本文详细介绍了HTML表单的基础知识，包括<form>、<label>、<input>、<select>、<button>、<textarea>、<fieldset>和<legend>等标签的使用。此外，还深入探讨了HTML5表单的新特性，如新增的输入类型、<datalist>和<output>元素，以及autofocus、form、multiple等新属性，提供了更丰富的表单交互和验证功能。
目录
1、HTML表单基础
HTML表单用于收集用户输入或选择的数据，且将数据作为参数提交给服务器处理。
1.1 表单标签< form >
定义表单框架，本身无可视化效果，可与文本输入框、密码框、按钮等表单组件形成完整的表单效果。| 属性名 | 属性值 | 说明 |
|---|---|---|
| action | url地址 | 规定提交数据的服务器地址 |
| method | get或post | 规定发送数据的HTTP方式，默认为get |
| name | 自定义表单名 | 规定表单名称，具有唯一性 |
| enctype | application/x-www-form-urlencoded（默认值） multipart/form-data; text/plain | 规定数据发送前的编码要求 |
| target | _blank _self _parent _top iframename | 规定以什么方式打开action属性中url地址 |
注：（1）与post相比较，get将表单的数据名称和值转换为文本形式的参数直接加到原url地址后面，不安全，且传输大小较小，不超过2KB。
（2）application/x-www-form-urlencoded：处理表单控件中所有的value属性值；multipart/form-data：用于使用表单上传文件时；text/plain：用于通过表单发送邮件（表单的action属性值为mailto:URL）。
1.2 标记标签< label >
< label >可以在被点击时为对应的表单控件生成焦点，显示效果与普通文本一致。
<!-- <label>的首标签中使用for属性引用对应表单控件的id名称 -->
<!-- 法一 -->
<label for="user">用户名：</label>
<input type="text" name="user1" id="user1" />
<!-- 法二 -->
<label>用户名：<input type="text" name="user1" /></label>
1.3 输入标签< input >
根据type不同的属性值可显示多种表单元素样式：单行文本输入框、单选/复选按钮、密码框，id或name属性用于自定义名称。
| 属性值 | 说明 |
|---|---|
| text | 显示单行文本输入框 |
| password | 显示密码输入框（*） |
| radio | 显示单选按钮 |
| checkbox | 显示复选按钮 |
| submit | 显示提交按钮 |
| reset | 显示重置按钮 |
| button | 显示无动作按钮，可添加onclick事件，结合Javascript使用 |
| image | 显示图像形式的提交按钮 |
| file | 显示文件上传控件，包括输入区域和浏览按钮 |
| hidden | 隐藏输入字段 |
<!--添加value可以设置初始文本内容-->
<input type="text" name="username" value="请输入..." />
<!--radio和checkbox类型可使用checked属性设置默认选中的选项-->
<input type="radio" name="ball" value="badminton" checked /> 羽毛球
<input type="radio" name="ball" value="baseball" /> 棒球
<!--image类型的alt属性定义图片无法显示时的替代文本内容-->
<input type="image" src="../images/bird.png" alt="小鸟" />
<!--file类型可添加accpet属性用于筛选上传文件的MIME类型，*表示允许上传所有类型的文件，也可以采用特定的gif或mp4等格式-->
<input type="file" accpet="../images/*" />
注：hidden隐藏域用于确认用户身份，如sessionkey。所有浏览器均支持，不管浏览器是否禁用cookies或脚本。
1.4 列表标签< select >
用于创建单选或多选菜单，根据不同属性值可显示为下拉菜单或列表框。
| 属性名 | 属性值 | 说明 |
|---|---|---|
| disabled | disabled | 禁用列表菜单 |
| multiple | multiple | 允许同时选中多项，即显示样式由默认的下拉菜单变为列表框 |
| name | 自定义 | 列表元素名称 |
| size | 数值 | 列表菜单可见选项的个数 |
< select >可配合若干个< option >标签形成下拉菜单。
| 属性名 | 属性值 | 说明 |
|---|---|---|
| disabled | disabled | 首次加载禁用当前选项 |
| label | 文本内容 | 取代原选项内容显示在列表中 |
| value | 文本内容 | 提交表单发送给服务器的选项值 |
| selected | selected | 首次加载当前选项为选中状态 |
<!-- 默认选中第一个选项，可为<option>添加selected属性从而设置默认选中其他选项 -->
<select>
<option value="lion">狮子</option>
<option value="bpanda" selected>熊猫</option>
<option value="peacock">孔雀</option>
</select>
可使用标签定义选项组。
| 属性名 | 属性值 | 说明 |
|---|---|---|
| disabled | disabled | 禁用选项组中的所有选项 |
| label | 文本内容 | 选项组的标题 |
<!-- <optgroup>的label属性点击时不会变为选中状态。 -->
<select>
<optgroup label="动物">
<option value="lion">狮子</option>
<option value="panda" selected>熊猫</option>
<option value="peacock">孔雀</option>
</optgroup>
</select>
1.5 按钮标签< button >
< button >可用于在网页上生成自定义样式的按钮，如果用于表单内，须规定type属性（IE与其他浏览器的默认类型不一样），可用< input >代替。
| 属性名 | 属性值 | 说明 |
|---|---|---|
| disabled | disabled | 禁用当前按钮元素 |
| label | 文本内容 | 按钮的名称 |
| value | 文本内容 | 按钮的初始值 |
| type | button reset submit | 按钮的类型 |
1.6 多行文本标签< textarea >
< textarea >允许文本回车换行，可容纳无限量文本内容，默认字体Courier。
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rows | 正整数 | 文本框可见的行数 |
| cols | 正整数 | 文本框可见的宽度，默认20 |
| wrap | soft（不换行）或hard（换行） | 文本框的换行方式，默认soft，当使用了hard时，一定要设置cols |
<!-- 文本框默认为可编辑状态，readonly属性设置为只读状态，disabled属性禁用文本区域 -->
<textarea rows="10" cols="5"></textarea>
1.7 域标签< fieldset >、域标题标签< legend >
可用于分组显示同一个表单中的多个表单元素，浏览器会形成边框效果凸显分组。可为每个分组的区域显示独立的标题。<form method="get" action="http://localhost:84/HTML/Index.html">
<fieldset>
<legend>用户个人信息</legend>
姓名：<input type="text" />
学号：<input type="text" />
班级：<input type="text" />
<input type="reset" name="button2" id="button2" value="重置" />
<input type="submit" name="button" id="button" value="提交" />
</fieldset>
</form>
2、HTML5表单API
2.1 表单新增输入类型
HTML5新增多项表单输入类型，在禁用浏览器脚本时仍能为用户提供输入控制和验证。
| 输入类型 | 说明 |
|---|---|
| tel | 电话号码 |
| 电子邮件（包含@） | |
| number | 数值 |
| range | 含数值范围的滚动条，拖动滑动条上的点进行数据值的选择 |
| url | url地址 |
| time | 选择时间（时、分） |
| date | 选择日期 |
| datetime | UTC日期（年、月、日）和时间（时、分） |
| datetime-local | 本地日期和时间 |
| week | 选择星期 |
| month | 选择月份 |
| color | 颜色选择器 |
| search | 搜索栏的文本输入框 |
<!--min、max控制最小值和最大值-->
<input type="number" min="0" max="100" />
<!--step设置滑动条的数值间隔-->
<input type="range" id="音量" min="0" max="100" step="10" />
datetime、datetime-local、time、date、week和month类型都是时间日期选择器控件，称为Date Pickers（日期选择器）。
2.2 表单新增元素标签——< datalist >和< output >
1、< datalist >为普通单行文本输入框提供提示选项，需与文本输入框配合使用，否则无效果；且文本框中添加的list属性需与元素的id属性的属性值相同。该标签提供的不仅可供用户选择，还可供用户输入，有模糊匹配的效果。
| 属性名 | 属性值 | 说明 |
|---|---|---|
| disabled | disabled | 禁用列表菜单 |
| multiple | multiple | 允许同时选中多项 |
| name | 自定义 | 列表元素名称 |
| size | 数值 | 列表菜单可见选项的个数 |
<input type="text" list="list1" />
<datalist id="list1">
<option>西瓜</option>
<option>苦瓜</option>
<option>丝瓜</option>
</datalist>
2、< output >用于显示各种输出结果，需与表单oninput事件配合使用，动态变化输出结果。
| 属性名 | 属性值 | 说明 |
|---|---|---|
| name | 自定义 | 输出标签的名称 |
| for | 元素的id名 | 定义关联的一或多个元素 |
| size | 表单的id名 | 定义输出标签所属的一或多个表单 |
<!-- 要加上form和oninput属性才能正常地动态显示（IE不支持）-->
<form oninput="out1.value=io1.value">
音量大小:
<input type="range" name="io1" id="io1" min="0" max="20" step="1" value="0" />
<output name="out1" for="io1">0</output>
</form>
2.3 表单新增属性
1、autofocus属性：使输入框在页面加载时自动成为焦点。
<input type="text" name="昵称"/>
<input type="text" name="姓名" autofocus />
2、form属性：可以让表单组件放在标签外，HTML5之前只能放在标签内的表单组件才可以正确提交给服务器。而且表单组件可同时属于多个表单。
<form id="f1" action="Index-form1.jsp">
输入用户名：<input type="text" name="name1">
</form>
<form id="f2" action="Index-form2.jsp">
输入手机号:<input type="text" name="phone">
</form>
<input type="submit" form="f1, f2" value="提交" />
3、multiple、max、min和step属性
multiple属性：不局限于< select >中，HTML5在< input >中也可以使用，只适合email和file类型。
max、min和step属性：适合标签的date pickers、number、range类型。
<input type="file" name="选择文件" multiple />
4、表单重写属性：formaction为首的一系列属性，只适合标签的submit或image类型。
| 属性名 | 说明 |
|---|---|
| formaction | 重写表单的action属性 |
| formenctype | 重写表单的enctype属性 |
| formmethod | 重写表单的method属性 |
| formnovalidate | 重写表单的novalidate属性 |
| formtarget | 重写表单的target属性 |
<form method="post">
<input type="submit" value="注册" formaction="Register.jsp"/>
<input type="submit" value="登录" formaction="Login.jsp"/>
</form>
5、placeholder属性：提示功能，适合< input >标签的text、password、url、tel、email和search类型。
<input type="search" name="搜索框" placeholder="请输入搜索内容" />
6、required属性：要求输入框在提交时不能为空。
<form method="post">
<input type="tel" name="电话号码" required />
<input type="submit" value="提交"/>
</form>
7、list属性：与< datalist >配合使用，提供一系列选项提示。例子见上文< datalist >。
8、pattern属性：通过正则表达式约束输入域的内容，适合< input >标签的text、password、url、tel、email和search类型。
<input type="text" name="" pattern="" title="" />
9、autocomplete属性：为用户正在输入的内容显示曾填过的内容选项，属性值有on和off。
例子参考：https://www.runoob.com/tags/att-input-autocomplete.html
<form action="demo.jsp" autocomplete="on">
First name:<input type="text" name="fname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
10、novalidate属性：在表单提交时不验证form或input域的内容。
例子参考：https://www.runoob.com/tags/att-form-novalidate.html
<form action="Index.jsp" novalidate>
E-mail: <input type="email" name="邮箱">
<input type="submit">
</form>
扫一扫
1474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
