表单元素

1. 表单标签

<form></form> 表单标签是 HTML 表单用于搜集不同类型的用户输入
双标签，一般情况下不能单独使用，需要在 form 元素中加入 input 等标签共同使用
常用属性
name属性主要是对这个form进行标记
methood=”get/post”， get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限。get安全性非常低，post安全性较高。但是执行效率get安全性非常低，post安全性较高。但是执行效率却比post方法好。
action，处理表单提交的 URL（可以为node中的路由接口地址）。
enctype属性，当method属性值为post时，enctype 就是将表单的内容提交给服务器的媒体类型。application/x-www-form-urlencoded：未指定属性时的默认值。

n个需求的表单内容 ……

2. input 标签及控件

<input/>元素是最重要的表单元素。它有很多形态，根据不同的 type 属性。
input 标签是单标签，主要依靠控件，input 的 type 类型就是用于书写控件的属性。它的控件有很多种类，从而达到我们要的需求。
input 标签是内联元素，但属于特殊的内联元素，可以定义宽度高度，单不自占一行

<body>
    <form action="" method="GET">
        <table border="1" style="border-collapse:collapse;">
        <html>
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style></style>
        </head>
        <body>
        </body>
        </html>
            <caption>注册详细信息表</caption>
            <tr>
                <td>用户名：</td>
                <td><input type="text"></td>
                <td>文本输入框</td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password"></td>
                <td>密码输入框</td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="radio" 
                    name="sex" value="0" checked>男
                    <input type="radio" 
                    name="sex" value="1">女
                </td>
                <td>单选题，必要属性name，相同name才能呈现单选效果</td>
            </tr>
            <tr>
                <td>复选框：</td>
                <td><input type="checkbox"
                    name="lesson" value="0">HTML <br>
                    <input type="checkbox" 
                    name="lesson" value="1">CSS <br>
                    <input type="checkbox"
                    name="lesson" value="2">JavaScript
                </td>
                <td>name、value必要属性，获取value值才能知道用户选的什么</td>
            </tr>
            <tr>
                <td>上传审核文件：</td>
                <td><input type="file" multiple></td>
                <td>上传文件（一个，多个multiple）</td>
            </tr>
            <tr>
                <td>选择城市：</td>
                <td>
                    <select multiple>
                        <option value="0">请选择</option>
                        <option value="101">北京</option>
                        <option value="230">黑龙江</option>
                        <option value="150">内蒙古</option>
                        <option value="430">湖南</option>
                    </select>
                </td>
                <td>通过select标签查询value值，可以多选multiple</td>
            </tr>
            <tr>
                <td>年龄：</td>
                <td><input type="number" min="18" max="75" step="5">
                </td>
                <td>step跨度</td>
            </tr>
            <tr>
                <td>出生日期：</td>
                <td><input type="date"></td>
                <td>选择的日期格式yyyy/mm/dd</td>
            </tr>
            <tr>
                <td>电子邮箱：</td>
                <td><input type="email"></td>
                <td>电子邮箱格式会在提交的时候验证，但不严格</td>
            </tr>
            <tr>
                <td>主题颜色：</td>
                <td><input type="color"></td>
                <td>颜色，通过value值获取颜色的色值</td>
            </tr>
            <tr>
                <td>薪资区间：</td>
                <td>6000 <input type="range"
                    min="6000" max="30000">30000</td>
                <td>区间选值</td>
            </tr>
            <tr>
                <td>留言板：</td>
                <td>
                    <textarea></textarea>
                </td>
                <td>文本域,可以放大缩小
                    style=resize:"none";就不能放大缩小了
                </td>
            </tr>
            <tr>
                <td>同意条款：</td>
                <td><input type="checkbox" id="yes">
                <label for="yes">同意以上条款</label>
                </td>
                <td>label标签，具有特殊的for属性，
                    关联需要元素的id
                </td>
            </tr>
            <tr>
                <td><input type="submit" value="提交"></td>
                <td><input type="reset" value="重填"></td>
                <td><input type="button" value="普通按钮"></td>
            </tr>
        </table>
    </form>
</body>

（1）文本框

type="text"定义单行文本输入域，用户可在其中输入文本
value=""代表初始值，用户输入后可通过事件获取该属性的值
placeholder="xxx" 占位符，可用来作为对用户的提示文字
name=""可与服务器交互数据的元素标示，可以在服务器端根据其 name 取得元素提交的值
maxlength 属性配合使用，可创建合法值范围，直接写数字

<input type="text" placeholder="输⼊⽤户名" name="username" maxlength="10" />

（2）密码框

type="password"定义密码输入域，用户在该域中输入的字符不直接显示，而是显示星号或实心圆。
具有value、placeholder、name属性

<input type="password" placeholder="输⼊密码" name="pwd" />

（3）单选框

type="radio"定义单选框，用户只能在多个选项中选择其中一个。
单选框有一个很重要的属性，name 属性。name 属性相同则可以让单选框变为一组，从而达到单选的目的 name="值"，值相同的单选框，都会被作为一组单选框，一组单选框的选项只能选择其一。
checked 属性代笔表默认被选中的,可以不用写值 checked 属性代笔表默认被选中的,可以不⽤写值

<input type="radio" name="sex" checked />男 <input type="radio" name="sex" />⼥

（4）复选框

type="checkbox"定义复选框，用户可以在多个选项中选择一个或多个。
复选框有一个很重要的属性，name 属性。name 属性相同则可以让复选框变为一组，从而达到记录复选内容的目的。
checked 属性代笔表默认被选中的,可以不用写值，多选可以有多个默认被选中的项

<input type="checkbox" name="eat" checked />吃⾯

<input type="checkbox" name="eat" />吃饭

<input type="checkbox" name="eat" checked />吃⼟

（5）按钮

type="submit"定义提交按钮，提交按钮会把表单数据发送到服务器，数据会被发送到在 from 表单的 action 属性中规定的 URL。不定义文字内容，会显示“提交”
type="reset"重制表单里所有的内容会被清空，默认按钮文字为重制
type="button"普通按钮没有功能，需要 value 属性指定按钮文字

<input type="submit" />

<input type="reset" />

<input type="button" value="普通按钮" />

（6）文件上传

使用 type="file" 的<input> 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上
multiple属性表示允许选择多个文件。当这个属性存在在标签中，则可以同时上传多个文件。

<input type="file" />

<input type="file" multiple />

（7）html5 新增 type 属性

type="number"用于输入数字的字段，其中 min 设定允许的最小值；max 设定允许的最大值；value 规定默认值；还有 step 可规定合法数字间隔；
type="email"专用于 email 的输入，省去了正则表达式的编写
type="color"使用 color 属性能直接调用系统的颜色调节窗口，默然为黑色
type="range"定义用于精确值不重要的输入数字的控件；min 属性指定最小值限制，max 属性指定最大值限制，step 属性规定合法数字间隔，value 属性规定默认值，
type="date"可用来选择或输入日期，包括（年/月/日）不包括时间

<input type="number" min="1" max="5">

<input type="color" id="color"﹥

3. 标记标签

<label></label> 标记标签标签不会向用户呈现任何特殊效果。双标签，内联元素，不自占一行
它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。label 标签的"for" 属性可把 label 绑定到另外一个元素。把 "for" 属性的值设置为相关元素的 id 属性的值。

⽤户名：<input type="text" placeholder="请输⼊⽤户名" />

<input type="checkbox" id="mianmi" />30天免密码登录

4.菜单标签

<select></select> 下拉菜单标签,双标签，但不能单独存在，只能包裹<option></option> 标签是选项标签
<option></option>的value属性是可以获取并且得到该下拉菜单用户选择的是哪一项
multiple属性代表该下拉菜单可以多选。

<select name="cd" id="city" multiple>
请选择北京天津⼴州重庆

5.文本域

<textarea></textarea>文本域标签具有滚动条的多行文本输入控件，与单行文本框 text 控件不同

- 它不能通过 maxlength 属性来限制字数，为此必须寻求其他方法来加以限制以达到预设的需求。

文本域禁止缩放的样式resize:none;

练习：

<body>
    <h1>欢迎注册</h1>
    <table>
        <tr>
            <td>*证件类型</td>
            <td colspan="2">
                <input type="radio" name="sf" value="0" checked>身份证
                <input type="radio" name="sf" value="1">银行卡
            </td>
        </tr>
        <tr>
            <td>*身份证/卡号</td>
            <td colspan="2">
                <input type="text" name="" id="">
            </td>
        </tr>
        <tr>
            <td>*登录密码</td>
            <td colspan="2">
                <input type="text" name="" id="">
            </td>
        </tr>
        <tr>
            <td>*确认密码</td>
            <td colspan="">
                <input type="text" name="" id="">
            </td>
        </tr>
        <tr>
            <td>*动态验证码</td>
            <td>
                <input type="text" name="" id="">
            </td>
            <td>
                <button>点击发送动态验证码</button>
            </td>
        </tr>
        <tr>
            <td colspan="3" align="center"><input type="checkbox" id="yes">
                <label for="yes">同意以上条款</label>
                <a href="#">《商城用户注册协议》</a>
            </td>
        </tr>
        <tr align="center">
            <td colspan="3" style="width: 250px;">
                <input type="submit" value="立即注册">
            </td>
        </tr>
    </table>
</body>

iframe

<iframe></iframe>标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持 iframe 标签
简单用法的属性

- src iframe 页面地址，有同域跨域之分

- height iframe 高度

- width iframe 宽度

- name iframe 命名

- scrolling用来设置框架是否需要滚动条，取值可以是yes,no,auto

- auto在需要的情况下出现滚动条（默认值）

- yes始终显示滚动条（即使不需要）

- no从不显示滚动条（即使需要）

优势和劣势

- 程序调入静态页面比较方便;

- iframe 有不好之处：样式/脚本需要额外链入，会增加请求

- 有同步和异步之分

- 样式不好控制

scrolling="yes">

您的浏览器不⽀持嵌⼊式框架，或者当前配置为不显示嵌⼊式框架。

结构化标签

1.语义化功能

搜索引擎去抓取页面的内容的时候，它只能猜测你的某个 div 内的内容是文章内容容器，或者是导航模块的容器，或者是作者介绍的容器等等。也就是说整个 HTML 文档结构定义不清晰，HTML5 中为了解决这个问题，专门添加了：页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。

2.部分新增结构标签（了解）

<section></section>标签，定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。
<nav></nav>导航的链接组，使 html 代码在语义化方面更加精确，同时对于屏幕阅读器等设备的支持也更好。
<aside></aside>aside 标签用来装载非正文的内容,例如广告，成组的链接，侧边栏等等的包裹型标签。
<header></header>标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。
<footer></footer>标签定义网页的页脚

HTML表单元素、标签、iframe内联框架 详细代码图解

表单元素

iframe

结构化标签

HTML表单元素、标签、iframe内联框架详细代码图解