form
HTML 表单用于收集用户输入数据，这些数据通常会被发送至服务器进行处理。
<form>
</form>
属性
action
用于定义表单提交时执行的操作。 通常情况下，当用户点击提交按钮后，表单数据将发送至服务器端的指定文件。 若省略 action 属性，系统将默认把表单数据提交至当前页面。
<form action="http://localhost">
</form>
target
用于指定表单提交后接收响应的显示位置。
| value | description |
|---|---|
| _blank | 响应内容将在新窗口或新标签页中显示。 |
| _self | 响应内容将在当前窗口内显示。 |
| _parent | 响应内容将在父级框架内显示。 |
| _top | 响应内容将占据整个窗口主体区域显示。 |
| framename | 响应内容将在指定名称的iframe内嵌框架中显示。 |
<form action="http://localhost" target="_blank">
</form>
method
用于定义提交表单数据时使用的 HTTP 方法。
- get(default)
- post
<form action="http://localhost" target="_blank" method="post">
</form>
autocomplete
用于控制表单是否启用自动填充功能。
<form action="http://localhost" target="_blank" autocomplete="on">
</form>
novalidate
当该属性存在时，表示表单数据在提交时不应进行验证。
<form action="http://localhost" novalidate>
</form>
accept-charset
指定表单提交时使用的字符编码格式。
<form action="http://localhost" accept-charset="UTF-8"></form>
enctype
定义表单数据提交至服务器时的编码方式（仅适用于 method=“post” 场景）。
<form action="http://localhost" enctype="application/x-www-form-urlencoded"></form>
name
定义表单名称。
<form action="http://localhost" name="f">
</form>
rel
定义被链接资源与当前文档间的关联关系。
<form action="http://localhost" rel="external"
元素
input
<input type="text">
input - type
格式：<input type="text">
| type | description |
|---|---|
| text | 文本输入框 |
| password | 密码输入框 |
| checkbox | 复选框，允许用户在有限选项中选择零个或多个项目 |
| radio | 单选按钮，允许用户在有限选项中选择唯一的答案 |
| submit | 提交按钮，用于向表单处理器提交数据的按钮 |
| reset | 重置按钮，将所有表单数值恢复至初始默认状态 |
| button | 按钮 |
| color | 颜色选择器 |
| date | 日期选择器 |
| datetime-local | 日期时间选择器，没有时区 |
| 电子邮件地址输入框 | |
| file | 文件选择器 |
| hidden | 隐藏域，用于存储非显示的数据 |
| image | 图像按钮，将图像定义为提交按钮。 |
| month | 月份选择器 |
| number | 数字输入框 |
| range | 范围选择器 |
| search | 搜索框 |
| tel | 电话号码输入框 |
| range | 用于输入近似数值的控件（类似滑块组件） |
| time | 时间选择器 |
| url | 网址地址输入框 |
| week | 周选择器 |
input - attribute
<input type="number" min="0" max="100">
| 属性 | 描述 |
|---|---|
| min | 最小值 |
| max | 最大值 |
| checked | 指定页面加载时预设选中输入字段（适用于 type=“checkbox” 或 type=“radio” 类型） |
| disabled | 指定输入字段是否不可用（适用于 type=“checkbox” 或 type=“radio” 类型） |
| readonly | 指定输入字段是否只读 |
| required | 指定输入字段是否必须填写 |
| value | 指定输入字段的默认值 |
| placeholder | 指定输入字段的提示信息 |
| size | 指定输入字段的宽度（仅适用于 type=“text” 或 type=“password” 类型） |
| maxlength | 指定输入字段的最大长度（仅适用于 type=“text” 或 type=“password” 类型） |
| pattern | 指定输入字段的正则表达式（仅适用于 type=“text” 或 type=“password” 类型） |
| step | 指定输入字段的增量（仅适用于 type=“number” 类型） |
input - form - attributes
<form action="http://localhost" id="form1">
<input type="text" name="fname" form="form1">
</form>
| 属性 | 描述 |
|---|---|
| form | 用于声明该输入框所属的表单。 |
| formaction | 用于指定表单提交时处理输入数据的文件地址。（仅适用于 type=“submit” 或 type=“image”） |
| formenctype | 定义表单数据提交时的编码方式（仅适用于 method=“post” 的表单，仅适用于 type=“submit” 或 type=“image”）。 |
| formmethod | 定义表单提交时使用的 HTTP 方法（仅适用于 type=“submit” 或 type=“image”）。 |
| formnovalidate | 当该属性存在时，表示表单数据在提交时不应进行验证。（仅适用于 type=“submit”）。 |
| formtarget | 定义表单提交后接收响应的显示位置（仅适用于 type=“submit” 或 type=“image”）。 |
| novalidate | 当该属性存在时，表示表单数据在提交时不应进行验证。 |
label
为多个表单控件定义标签。
当焦点聚焦于输入元素时，屏幕阅读器将清晰朗读标签内容。
当点击标签内的文本时，将自动触发关联的单选按钮/复选框的切换操作。
<label> 标签的 for 属性值需与对应 <input> 元素的 id 属性值一致，以建立两者间的绑定关系。
<label for="name">Name:</label>
<input type="text" id="name">
select - option
定义了一个下拉列表框。
<option> 标签的 value 属性值用于定义选项的值，而其文本内容则用于显示在下拉列表框中。
<size> 属性用于定义下拉列表框的可见行数。
<multiple> 属性用于定义下拉列表框是否支持多选。
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
textarea
定义多行文本输入框。
rows 属性用于定义文本框的行数，cols 属性用于定义文本框的列数。
<textarea rows="4" cols="50">
</textarea>
fieldset - legend
<fieldset> 元素用于对表单中的关联数据进行分组。
<legend> 元素为 <fieldset> 分组定义标题说明。
<fieldset>
<legend>Personalia</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
</fieldset>
datalist
<datalist> 元素为 <input> 输入框提供预定义选项列表。
用户输入时将看到预定义选项的下拉列表。
<input> 元素的 list 属性值必须与 <datalist> 元素的 id 属性值相对应。
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
output
呈现计算结果的输出显示（通常由脚本执行运算生成）。
<output name="result" for="x y">100</output>