HTML 表单用于收集不同类型的用户输入，表单标签允许用户在表单中输入内容。表单标签指的是不同类型的 input 标签，比如文本框、密码框、复选框、单选按钮、提交按钮、重置按钮、文本域、下拉列表、标签等。多数情况下被用到的表单标签是输入标签 ，输入类型是由 type 属性定义。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
HTML
<form action="" method="get" class="form-example"> <div class="form-example"> <label for="name">Enter your name: label> <input type="text" name="name" id="name" required> div> <div class="form-example"> <label for="email">Enter your email: label> <input type="email" name="email" id="email" required> div> <div class="form-example"> <input type="submit" value="Subscribe!"> div> form>
属性
autocomplete：用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。可能的值有：
name：表单的名称。HTML 4 中不推荐（应使用 id）。在 HTML 5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。
rel：根据 value 创建一个超链接。
action：处理表单提交的 URL。这个值可被 、 或 元素上的 formaction 属性覆盖。
enctype：当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型 。可能的取值有：
method：浏览器使用这种 HTTP 方式来提交 表单。可能的值有：
novalidate：此布尔值属性表示提交表单时不需要验证表单。如果没有声明该属性（因此表单需要通过验证）。该属性可以被表单中的 、 或 元素中的 formnovalidate 属性覆盖。
target：表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中，这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个浏览上下文 的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义：
<form> <fieldset> <legend>Choose your favorite monsterlegend> <input type="radio" id="kraken" name="monster" value="K"> <label for="kraken">Krakenlabel><br> <input type="radio" id="sasquatch" name="monster" value="S"> <label for="sasquatch">Sasquatchlabel><br> <input type="radio" id="mothman" name="monster" value="M" /> <label for="mothman">Mothmanlabel> fieldset> form>
如上述例子所示，
disabled：如果设置了这个 bool 值属性，
form：将该值设为一个
name：元素分组的名称。
HTML 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据；可以使用各种类型的输入数据和控件小部件，具体取决于设备和用户代理。
文本输入框是最基本的表单小部件。这是一种非常方便的方式，可以让用户输入任何类型的数据。
所有文本框都有一些通用规范：
大部分用来定义表单小部件的元素都有一些他们自己的属性。然而，在所有表单元素中都有一组通用属性，它们可以对这些小部件进行控制。下面是这些通用属性的列表：
使用 type 属性值被设置为 text 的 元素创建一个单行文本框（同样的，如果你不提供 type 属性，该属性将被默认设置为 text）。在你指定的 type 属性的值在浏览器中是未知的情况下（比如你指定 type=“date”，但是浏览器不支持原生日期选择器），属性值也将会回落到 text。
<input type="text" id="comment" name="comment" value="I'm a text field">
通过设置 type 属性值为 password 来设置密码框。
<input type="password" id="pwd" name="pwd">
它不会为输入的文本添加任何特殊的约束，但是它会模糊输入到字段中的值（例如，用点或星号），这样它就不能被其他人读取。
请记住，这只是一个用户界面特性；除非你安全地提交你的表单，否则它会以明文发送，这不利于安全——恶意的一方可能会截获你的数据，窃取你的密码、信用卡信息，或者你提交的其他任何东西。保护用户不受此影响的最佳方式是在安全连接上托管任何涉及表单的页面（例如：https://……地址），使得数据在发送之前就已加密。
另一个原生的文本框控件是 hidden input 类型。它被用于创建对用户不可见的表单部件，但在发送表单时，会与其它的表单数据一起被发送到服务器——例如，你可能希望向服务器提交一个时间戳，说明订单是何时产生的。因为它是隐藏的，所以用户看不到也不能简单地修改该值，它将永远不会获得焦点，屏幕阅读器也不会注意到它。
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
如果您创建了这样一个元素，就需要设置它的 name 和 value 属性。元素的值可以通过 JavaScript 动态设置。hidden input 类型不应有关联的标签（label 元素）。
将 type 属性设置为 email 就可以使用地址字段。
<input type="email" id="email" name="email">
当使用了这种 type 类型时，用户需要输入一个合法的电子邮件地址，任何其他输入都会使得浏览器在表单提交时显示错误信息。
你也可以搭配使用 multiple 属性，以允许在同一个 email 输入框中输入多个电子邮件地址，以英文逗号分隔：
<input type="email" id="email" name="email" multiple>
注意，在默认限制条件下，a@b 也是一个合法的电子邮件地址，因为 email input 类型默认也允许内部网络的电子邮件地址。为了实现不同的验证行为，你可以使用 pattern 属性，而且可以自定义错误信息。
查询字段（Search fields）旨在用于在页面和应用程序上创建搜索框。将 type 属性设置为 search 就可以使用这种控件：
<input type="search" id="search" name="search">
text 字段和 search 字段的主要区别是浏览器赋予它们的外观显示。通常情况下，search 字段拥有圆角边框，有时会显示“Ⓧ”标志，当点击它时会清除输入框。另外，在动态键盘设备上，键盘的回车键会显示“search”，或显示为放大镜图标。
另外一个值得提示的特性是，search 字段的值可以自动地保存下来，在同一网站的自动完成框中复用输入，这样的特性倾向于在大多数现代浏览器中自动进行。
在 type 属性中使用 tel 值，即可创建一个专门用于输入电话号码的文本域：
<input type="tel" id="tel" name="tel">
当使用带有动态键盘的移动设备访问带有 type=“tel” 的表单时，大多数设备会显示数字键盘。这意味着只要数字键盘有用，这种类型就很有用，而且不只是用于电话号码。
由于世界各地的电话号码格式多种多样，这种类型的字段对用户输入的值没有任何限制（这意味着它可能包括字母等非数字值）。
在 type 属性值中使用 url，即可创建一个用于输入网址的文本字段：
<input type="url" id="url" name="url">
它为字段添加了特殊的验证约束。浏览器会在没有协议（例如 http:）输入或网址格式不对的情况下报告错误。在具有动态键盘的设备上，键盘通常会显示部分或全部冒号、句号和正斜杠作为默认键。
用于输入数字的控件可以由 type 为 number 的 元素创建。这个控件外观与文本域类似，但只允许浮点数输入，并通常以旋转器（spinner）的形式提供按钮来增加和减少控件的值。在有动态键盘的设备上，一般会显示数字键盘。
使用 number input 类型，你可以使用 min 和 max 属性控制允许输入的最小值和最大值。
你也可以使用 step 属性来设定每次按下 spinner 按钮增加或减少的值。默认情况下，number input 类型只允许整数值输入，为了允许浮点数输入，要指定 step=“any”。如果省略了此值，step 会默认为 1，意味着只有自然数是有效的输入。
我们来看一些例子。第一个例子创建了可从 1 到 10 之间选择值的数字选择器，且单击一次按钮所增长或减少的值为 2。
<input type="number" name="age" id="age" min="1" max="10" step="2">
第二个例子创建了可从 0 到 1 之间选择值得数字选择器，且单击一次按钮所增长或减少的值为 0.01。
<input type="number" name="change" id="pennies" min="0" max="1" step="0.01">
当有效值的范围有限时，number 输入类型才有意义，例如一个人的年龄或身高。如果范围太大，渐进式增加没有意义（如范围为 00001 到 99999 的美国 ZIP 码）的话，使用 tel 类型可能会更好；它提供了数字键盘，而放弃了数字输入器的 spinner UI 功能。
另外一种选择数字的方式是使用滑块（slider）。你在买房网站等网站上经常看到这种情况，你想设置一个最高的房产价格来进行过滤。
从使用上来说，滑块的准确性不如文本字段。因此，它们被用来挑选精确值不一定那么重要的数字。
在 元素中使用 range 作为属性 type 的值，就可以创建一个滑块，滑块可以通过鼠标、触摸，或用键盘的方向键移动。
正确配置滑块组件非常重要。推荐分别配置 min 、max 和 step 属性来设置滑块的最小值、最大值和增量值。
<input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000">
本示例创建了一个其取值为 50000 到 500000 之间的滑块，每次的增量值是 100。我们使用 value 属性设定了此滑块的默认值为 250000。
收集日期和时间值历来是 web 开发者的噩梦。为了获得良好的用户体验，提供一个日历选择用户界面是很重要的，使用户能够选择日期，而不需要切换到本地日历应用程序的上下文，或者可能以难以解析的不同格式输入。上个千年（1000~1999 年）的最后一分钟可以用以下不同的方式表示，例如：1999/12/31，23:59 或 12/31/99T11:59PM。
HTML 日期控件可用于处理这种特定的数据，提供日历控件并使数据统一。
日期和时间控件可由 元素和一个合适的 type 属性值来创建，该值取决于要收集的类型（日期、时间、还是以上全部）。
让我们简单地看看不同的可用类型。请注意，这些类型的用法相当复杂，特别是考虑到浏览器的支持。
datetime-local： 创建了显示和选择一个没有特定时区信息的日期和时间的控件。
<input type="datetime-local" name="datetime" id="datetime">
month： 创建了显示和选择带有年份信息的某个月的控件。
<input type="month" name="month" id="month">
time： 创建了显示和选择时间的控件。时间可能会以 12 小时制显示，但一定会以 24 小时制形式返回。
<input type="time" name="time" id="time">
week： 创建了显示和选择一年中特定编号周的控件。
一周以周一开始，一直运行到周日结束。另外，每年的第一周总会包含那一年首个星期四，其中可能不包括当年的第一天，也可能包括前一年的最后几天。
<input type="week" name="week" id="week">
所有的日期和时间控件总可以由 min 和 max 属性控制，可由 step 属性进一步做控制，具体值随着 input 类型的不同而产生变化。
<label for="myDate">When are you available this summer?label> <input type="date" name="myDate" min="2013-06-01" max="2013-08-31" step="7" id="myDate">
颜色总是有点难处理。有许多方法来表达它们，如 RGB 值（十进制或十六进制）、HSL 值、关键词等。
用于输入颜色的控件可以由 type 为 color 的 元素创建：
<input type="color" name="color" id="color">
可选中项是可以通过单击它们来更改状态的小部件。有两种可选中项：复选框和单选按钮。两者都使用 checked 属性，以指示该部件的默认状态：“选中”或“未选中”。
值得注意的是，这些小部件与其他表单小部件不一样。对于大多数表单部件，一旦表单提交，所有具有 name 属性的小部件都会被发送，即使没有任何值被填。对于可选中项，只有在勾选时才发送它们的值。如果他们没有被勾选，就不会发送任何东西，甚至连他们的名字也没有。而在它们被勾选且没有提供值（value）时，将会发送名字和缺省值 on。
为了获得最大的可用性和无障碍（无障碍），建议您在
使用 type 属性值为 checkbox 的 元素来创建一个复选框。
<input type="checkbox" id="questionOne" name="subscribe" value="yes" checked>
相关的复选框元素应该使用具有相同值的 name 属性。包含 checked 属性使复选框在页面加载时自动被选中。点击复选框或其相关联的标签也将自动翻转复选框的状态（选中、取消选中）。
任何带有 checked 属性的复选框和单选按钮在加载时都会匹配 :default 伪类，即使它们后面不再被选中。任何当前被选中的元素，都会匹配 :checked 伪类。
使用 type 属性值为 radio 的 元素来创建一个单选按钮。
<input type="radio" id="soup" name="meal" checked>
几个单选按钮可以连接在一起。如果它们的 name 属性共享相同的值，那么它们将被认为属于同一组的按钮。同一组中只有一个按钮可以同时被选；这意味着当其中一个被选中时，所有其他的都将自动未选中。如果没有选中任何一个，那么整个单选按钮池就被认为处于未知状态，并且没有以表单的形式发送任何值。
在 HTML 表单中，有三种按钮：
Submit：将表单数据发送到服务器。对于 元素，省略 type 属性（或是一个无效的 type 值）的结果就是一个提交按钮。
<button type="submit"> This is a <strong>submit buttonstrong> button> <input type="submit" value="This is a submit button">
Reset：将所有表单小部件重新设置为它们的默认值。
<button type="reset"> This is a <strong>reset buttonstrong> button> <input type="reset" value="This is a reset button">
Anonymous：没有自动生效的按钮，但是可以使用 JavaScript 代码进行定制。
<button type="button"> This is an <strong>anonymous buttonstrong> button> <input type="button" value="This is an anonymous button">
我们也可以使用 元素。它也带有 submit、reset 和 button 这几个 type 属性，与 的三种按钮行为一致。它们之间的主要区别在于 元素更易于设置样式。
图像按钮（image button）控件渲染的方式与 几乎完全相同。只是在用户点击它时，图像按钮的行为与提交（submit）按钮相同。
图像按钮是使用 type 属性值设置为 image 的 元素创建的。这个元素支持与 元素相同的属性，和其他表单按钮支持的所有属性。
<input type="image" alt="Click me!" src="my-img.png" width="80" height="30">
如果使用图像按钮来提交表单，这个小部件不会提交它的值；而是提交在图像上单击处的 X 和 Y 坐标（坐标是相对于图像的，这意味着图像的左上角表示坐标 (0, 0)），坐标被发送为两个键/值对：
例如，当您点击这个小部件图像坐标为 (123,456) 的位置时，它将会通过 get 方法提交。你可以看到类似的 URL：
http://foo.com?pos.x=123&pos.y=456
HTML 表单能够将文件发送到服务器；在发送和检索表单数据的文章中详细描述了这个特定的操作。文件选择器小部件是用户如何选择一个或多个文件来发送的。
要创建一个文件选择器小部件，您可以使用 元素，将它的 type 属性设置为 file。被接受的文件类型可以使用 accept 属性来约束。此外，如果您想让用户选择多个文件，那么可以通过添加 multiple 属性来实现。
在本例中，创建一个文件选择器，请求图形图像文件。在本例中，允许用户选择多个文件。
<input type="file" name="file" id="file" accept="image/*" multiple>
在一些移动终端上，文件选择器可以访问由设备相机和麦克风直接获取的图片、视频、音频。我们只需要这样设置 accept 属性即可（分别对应相机捕获的图片、视频和麦克风获取的音频）：
<input type="file" accept="image/*;capture=camera"> <input type="file" accept="video/*;capture=camcorder"> <input type="file" accept="audio/*;capture=microphone">