HTML_3 - 交互与框架

HTML 可以通过简单的表单收集输入的信息，如果需要更复杂的交互则需要 JS 等的支持。

表单交互

<form> 标签是一个表单框架，有结束标签。表单表示文档中的一个区域，其中有交互控件，可以收集用户输入的信息到 Web 服务器。

<input> 标签写在表单框架中，控制输入。type 属性控制输入的类型；name 属性给予该值一个变量名称，用于后续引用。

<form action="">
    输入框1: <input type="text" name="first"><br>
    输入框2: <input type="text" name="second">
</form>

可选属性

框架多页面

框架的作用是在同一个浏览器窗口中显示多个页面，即实现“页中页”效果。

使用 <iframe> 标签显示框架，有结束标签：

<iframe src="URL链接"></iframe>

高度与宽度

height 属性定义高度；width 属性定义宽度。

默认情况下以像素(px)为单位，允许指定成比例显示(80%)。

<iframe loading="lazy" src="https://bilibili.com" width="600" height="200">
</iframe>

其中 loading="lazy" 是懒加载的意思，即在浏览到当前位置才开始加载该页面，减少在初始加载时的负载。

移除边框

设置 frameborder 属性来定义页中页边框，“0”值为不显示边框。

<iframe src="URL链接" frameborder="0"></iframe>

切换页中页内容

<iframe> 框架的页中页内容是可以更换的，切换按键使用 <a> 超链接标签控制。

其原理是用 <a> 标签中的 target 属性命名，并用 <iframe> 标签中的 name 属性指定调用。此时点击 <a> 标签超链接的文本，就可以在 <iframe> 框架的页中页中切换到超链接的网址。

添加 rel="noopener" 属性以保护父页面不被子页面劫持。

<iframe src="https://baidu.com" name="bilibili"></iframe>
<p>
    <a href="https://bilibili.com" target="bilibili" rel="noopener">bilibili.com</a>
</p>

bilibili.com

此时点击 bilibili.com 按键，页中页就可以切换到超链接所在的 bilibili.com 地址。