html5 表单标签

HTML 表单用于收集不同类型的用户输入，表单标签允许用户在表单中输入内容。表单标签指的是不同类型的 input 标签，比如文本框、密码框、复选框、单选按钮、提交按钮、重置按钮、文本域、下拉列表、标签等。多数情况下被用到的表单标签是输入标签 <input>，输入类型是由 type 属性定义。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

1、<form>：表单

HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

<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 属性覆盖。可能的值有：

• off：浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值，而提供密码自动填充功能，参见 自动填充属性和登录）。
• on：浏览器可自动补全条目。

name：表单的名称。HTML 4 中不推荐（应使用 id）。在 HTML 5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。

rel：根据 value 创建一个超链接。

action：处理表单提交的 URL。这个值可被 <button>、<input type=“submit”> 或 <input type=“image”> 元素上的 formaction 属性覆盖。

enctype：当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型 。可能的取值有：

• application/x-www-form-urlencoded：未指定属性时的默认值。
• multipart/form-data：当表单包含 type=file 的 元素时使用此值。
• text/plain：出现于 HTML5，用于调试。这个值可被 、 或 元素上的 formenctype 属性覆盖。

method：浏览器使用这种 HTTP 方式来提交 表单。可能的值有：

• post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。
• get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的 URL 中，并以 ‘?’ 作为分隔符，没有副作用 时使用这个方法。
• dialog：如果表单在 <dialog> 元素中，提交时关闭对话框。此值可以被 <button>、<input type=“submit”> 或 <input type=“image”> 元素中的 formmethod 属性覆盖。

novalidate：此布尔值属性表示提交表单时不需要验证表单。如果没有声明该属性（因此表单需要通过验证）。该属性可以被表单中的 <button>、<input type=“submit”> 或 <input type=“image”> 元素中的 formnovalidate 属性覆盖。

target：表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中，这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个浏览上下文 的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义：

• _self：默认值。在相同浏览上下文中加载。
• _blank：在新的未命名的浏览上下文中加载。
• _parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。
• _top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。此值可以被 <button>、 <input type=“submit”> 或 <input type=“image”> 元素中的 formtarget 属性覆盖。

2、<fieldset>、<legend>

HTML <fieldset> 元素用于对表单中的控制元素进行分组（也包括 label 元素）。<legend> 元素用于表示其父元素 <fieldset> 的内容标题。

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster" value="K">
    <label for="kraken">Kraken</label><br>

    <input type="radio" id="sasquatch" name="monster" value="S">
    <label for="sasquatch">Sasquatch</label><br>

    <input type="radio" id="mothman" name="monster" value="M" />
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

如上述例子所示，<fieldset> 元素将一个 HTML 表单的一部分组成一组，内置了一个 <legend> 元素作为 fieldset 的标题。这个元素有几个属性，最值得注意的是 form，其可以包含同一页面的 <form> 元素的 id，以使 <fieldset> 成为这个 <form> 的一部分，即使 <fieldset> 不在其内。还有 disabled 属性，可将 <fieldset> 及其所有内容设置为不可用。

属性

disabled：如果设置了这个 bool 值属性，<fieldset> 的所有子代表单控件也会继承这个属性。这意味着它们不可编辑，也不会随着 <form> 一起提交。它们也不会接收到任何浏览器事件，如鼠标点击或与聚焦相关的事件。默认情况下，浏览器会将这样的控件展示为灰色。注意，<legend> 中的表单元素不会被禁用。

form：将该值设为一个 <form> 元素的 id 属性值以将 <fieldset> 设置成这个 <form> 的一部分。

name：元素分组的名称。

3、<input>：输入（表单输入）

HTML <input> 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据；可以使用各种类型的输入数据和控件小部件，具体取决于设备和用户代理。

一、文本输入框

文本输入框是最基本的表单小部件。这是一种非常方便的方式，可以让用户输入任何类型的数据。

所有文本框都有一些通用规范：

• 它们可以被标记为 readonly（用户不能修改输入值）甚至是 disabled（输入值永远不会与表单数据的其余部分一起发送）。
• 它们可以有一个 placeholder；这是文本输入框中出现的文本，用来简略描述输入框的目的。
• 它们可以使用 size 框的物理尺寸）和 maxlength 可以输入的最大字符数）进行限制。
• 如果浏览器支持的话，它们可以从拼写检查（使用 spellcheck 属性）中获益。

大部分用来定义表单小部件的元素都有一些他们自己的属性。然而，在所有表单元素中都有一组通用属性，它们可以对这些小部件进行控制。下面是这些通用属性的列表：

属性名称	默认值	描述
autofocus	false	这个布尔属性允许您指定当页面加载时元素应该自动具有输入焦点，除非用户覆盖它，例如通过键入不同的控件。文档中只有一个与表单相关的元素可以指定这个属性。
disabled	false	这个布尔属性表示用户不能与元素交互。如果没有指定这个属性，元素将从包含它的元素继承设置，例如 <fieldset>；如果没有包含在设定了 disabled 属性的元素里，那么这个元素就是可用的。
form		小部件与之相关联的表单元素。属性值必需是同个文档中的 <form> 元素的 id 属性。理论上，它允许您在 <form> 元素之外设置一个表单小部件。
name		元素的名称；这是跟表单数据一起提交的。
value		元素的初始值。

单行文本框

使用 type 属性值被设置为 text 的 <input> 元素创建一个单行文本框（同样的，如果你不提供 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 元素）。

E-mail 地址字段

将 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” 的表单时，大多数设备会显示数字键盘。这意味着只要数字键盘有用，这种类型就很有用，而且不只是用于电话号码。

由于世界各地的电话号码格式多种多样，这种类型的字段对用户输入的值没有任何限制（这意味着它可能包括字母等非数字值）。

URL 字段

在 type 属性值中使用 url，即可创建一个用于输入网址的文本字段：

<input type="url" id="url" name="url">

它为字段添加了特殊的验证约束。浏览器会在没有协议（例如 http:）输入或网址格式不对的情况下报告错误。在具有动态键盘的设备上，键盘通常会显示部分或全部冒号、句号和正斜杠作为默认键。

数字字段

用于输入数字的控件可以由 type 为 number 的 <input> 元素创建。这个控件外观与文本域类似，但只允许浮点数输入，并通常以旋转器（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）。你在买房网站等网站上经常看到这种情况，你想设置一个最高的房产价格来进行过滤。

从使用上来说，滑块的准确性不如文本字段。因此，它们被用来挑选精确值不一定那么重要的数字。

在 <input> 元素中使用 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 日期控件可用于处理这种特定的数据，提供日历控件并使数据统一。

日期和时间控件可由 <input> 元素和一个合适的 type 属性值来创建，该值取决于要收集的类型（日期、时间、还是以上全部）。

让我们简单地看看不同的可用类型。请注意，这些类型的用法相当复杂，特别是考虑到浏览器的支持。

datetime-local：<input type=“datetime-local”> 创建了显示和选择一个没有特定时区信息的日期和时间的控件。

<input type="datetime-local" name="datetime" id="datetime">

month：<input type=“month”> 创建了显示和选择带有年份信息的某个月的控件。

<input type="month" name="month" id="month">

time：<input type=“time”> 创建了显示和选择时间的控件。时间可能会以 12 小时制显示，但一定会以 24 小时制形式返回。

<input type="time" name="time" id="time">

week：<input type=“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> 元素创建：

<input type="color" name="color" id="color">

二、可选中项

可选中项是可以通过单击它们来更改状态的小部件。有两种可选中项：复选框和单选按钮。两者都使用 checked 属性，以指示该部件的默认状态：“选中”或“未选中”。

值得注意的是，这些小部件与其他表单小部件不一样。对于大多数表单部件，一旦表单提交，所有具有 name 属性的小部件都会被发送，即使没有任何值被填。对于可选中项，只有在勾选时才发送它们的值。如果他们没有被勾选，就不会发送任何东西，甚至连他们的名字也没有。而在它们被勾选且没有提供值（value）时，将会发送名字和缺省值 on。

为了获得最大的可用性和无障碍（无障碍），建议您在 <fieldset> 中包围每个相关项目的列表，并使用 <legend> 提供对列表的全面描述。每个单独的 <label>/<input> 元素都应该包含在它自己的列表项中（或者类似的）。

复选框

使用 type 属性值为 checkbox 的 <input> 元素来创建一个复选框。

<input type="checkbox" id="questionOne" name="subscribe" value="yes" checked>

相关的复选框元素应该使用具有相同值的 name 属性。包含 checked 属性使复选框在页面加载时自动被选中。点击复选框或其相关联的标签也将自动翻转复选框的状态（选中、取消选中）。

任何带有 checked 属性的复选框和单选按钮在加载时都会匹配 :default 伪类，即使它们后面不再被选中。任何当前被选中的元素，都会匹配 :checked 伪类。

单选按钮

使用 type 属性值为 radio 的 <input> 元素来创建一个单选按钮。

<input type="radio" id="soup" name="meal" checked>

几个单选按钮可以连接在一起。如果它们的 name 属性共享相同的值，那么它们将被认为属于同一组的按钮。同一组中只有一个按钮可以同时被选；这意味着当其中一个被选中时，所有其他的都将自动未选中。如果没有选中任何一个，那么整个单选按钮池就被认为处于未知状态，并且没有以表单的形式发送任何值。

三、按钮

普通按钮

在 HTML 表单中，有三种按钮：

Submit：将表单数据发送到服务器。对于 <button> 元素，省略 type 属性（或是一个无效的 type 值）的结果就是一个提交按钮。

<button type="submit">
    This is a <strong>submit button</strong>
</button>

<input type="submit" value="This is a submit button">

Reset：将所有表单小部件重新设置为它们的默认值。

<button type="reset">
    This is a <strong>reset button</strong>
</button>

<input type="reset" value="This is a reset button">

Anonymous：没有自动生效的按钮，但是可以使用 JavaScript 代码进行定制。

<button type="button">
    This is an <strong>anonymous button</strong>
</button>

<input type="button" value="This is an anonymous button">

我们也可以使用 <button> 元素。它也带有 submit、reset 和 button 这几个 type 属性，与 <input> 的三种按钮行为一致。它们之间的主要区别在于 <button> 元素更易于设置样式。

图像按钮

图像按钮（image button）控件渲染的方式与 <img> 几乎完全相同。只是在用户点击它时，图像按钮的行为与提交（submit）按钮相同。

图像按钮是使用 type 属性值设置为 image 的 <input> 元素创建的。这个元素支持与 <img> 元素相同的属性，和其他表单按钮支持的所有属性。

<input type="image" alt="Click me!" src="my-img.png" width="80" height="30">

如果使用图像按钮来提交表单，这个小部件不会提交它的值；而是提交在图像上单击处的 X 和 Y 坐标（坐标是相对于图像的，这意味着图像的左上角表示坐标 (0, 0)），坐标被发送为两个键/值对：

• X 值键是 name 属性的值，后面是字符串“.x”。
• Y 值键是 name 属性的值，后面是字符串“.y”。

例如，当您点击这个小部件图像坐标为 (123,456) 的位置时，它将会通过 get 方法提交。你可以看到类似的 URL：

http://foo.com?pos.x=123&pos.y=456

四、文件选择器

HTML 表单能够将文件发送到服务器；在发送和检索表单数据的文章中详细描述了这个特定的操作。文件选择器小部件是用户如何选择一个或多个文件来发送的。

要创建一个文件选择器小部件，您可以使用 <input> 元素，将它的 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">

4、<textarea> ：文本域

HTML <textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。

<label for="story">Tell us your story:</label>

<textarea id="story" name="story"
          rows="5" cols="33">
It was a dark and stormy night...
</textarea>

上述例子展示了 <textarea> 的几个特点：

• 为了提高无障碍（accessibility），用于将 <textarea>与一个 <label> 关联的 id 属性。
• name 属性，用于设置随表单一同提交到服务器的相关数据的名字。
• rows 和 cols 属性，用于声明 <textarea> 的精确尺寸。这对于一致性非常有帮助，因为不同浏览器的默认值常常不一样。
• 位于开始标签和闭合标签之间的默认内容。<textarea> 不支持 value 属性。

<textarea> 还可以使用 <input> 中的一些常见属性，如autocomplete, autofocus, disabled, placeholder, readonly, 和 required。

属性

autocomplete：是否使用浏览器的记忆功能自动填充文本。可能的值有：

• off: 不使用浏览器的记忆自动填充，使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法。
• on: 浏览器根据用户之前输入的内容或者习惯，在用户输入的时候给出相应输入提示。如果不指明autocomplete属性，浏览器会从父级的表单元素上解析是不是开启这个属性。表单元素可以是 textarea 元素的父级<form>或者 textarea有跟表单相同的 id（参见下面的 form 属性）。更多请查看<form>的autocomplete 属性。

autofocus：页面加载完毕之后是否自动给本元素添加焦点。只有跟表格关联的才能使本属性生效。

cols：文本域的可视宽度。必须为正数，默认为 20 (HTML5)。

disabled：禁用文本域。默认为 false。如果未指定，也可以从父级上如<fieldset>继承而来。

form：指定跟自身相关联的表单。值必须为本文档内的表单的 ID，如果未指定，就是跟当前所在的表单元素相关联。这就允许你在文档的任意地方放置文本域元素。

maxlength：允许用户输入的最大字符长度 (Unicode) 。未指定表示无限长度。

minlength：允许用户输入的最小字符长度 (Unicode)

name：元素的名称。

placeholder：向用户提示可以在控件中输入的内容。在渲染提示时，占位符文本中的回车符 (\r) 或换行符 (\n) 一定会被作为行断（换行）处理。

readonly：不允许用户修改元素内文本。和 disabled 属性不同的是，这个能让用户点击和选择元素内的文本。如果在表单里，这个元素的值还是会跟随表单一起提交。

required：提示用户这个元素的内容必填。

rows：元素的输入文本的行数（显示的高度）。

spellcheck：该属性设为 true 时，表明该元素会做拼写和语法检查。属性值为 default 时，表明元素有默认行为，可能会基于父元素的 spellcheck 值。属性值为 false 时，表明元素不做拼写和语法检查。

wrap：指定文本换行的方式。默认为 soft。可能的值为：

• hard: 在文本到达元素最大宽度的时候，浏览器自动插入换行符 (CR+LF) 。比如指定 cols值。
• soft: 在到达元素最大宽度的时候，不会自动插入换行符。

5、<label> ：标签

HTML <label> 元素（标签）表示用户界面中某个元素的说明。

将一个 <label> 和一个 <input> 元素相关联主要有这些优点：

• 标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。
• 你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。

将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。

<label for="username">Click me</label>
<input type="text" id="username">

另外，你也可以将 <\input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在：

<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>

属性

for：即和 <label> 元素在同一文档中的 可关联标签的元素 的 id。文档中第一个 id 值与 <label> 元素 for 属性值相同的元素，如果可关联标签（labelable），则为已关联标签的控件，其标签就是这个 <label> 元素。如果这个元素不可关联标签，则 for 属性没有效果。如果文档中还有其他元素的 id 值也和 for 属性相同，for 属性对这些元素也没有影响。

form：表示与 label 元素关联的 <form> 元素（即它的表单拥有者）。如果声明了该属性，其值应是同一文档中 <form> 元素的 id。因此你可以将 label 元素放在文档的任何位置，而不仅作为 <form> 元素的后代。

<label> 元素没有特别的样式考虑——结构上，<label> 是简单的行内元素，所以可使用和 <span> 或 <a> 元素大致相同的方式来应用样式。你也可以任意方式为 <label> 应用样式，只是不要让文本难以阅读。

6、<select>：下拉框

HTML 元素表示一个提供选项菜单的控件。

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

上述例子展示了 <select> 的典型用法。元素中设置了 id 属性以将其与 <label> 元素关联在一起，提高可及性（accessibility）。name 属性表示提交到服务器的相关数据点的名字。每个菜单选项由 <select> 中的一个 <option> 元素定义。

每个 <option> 元素都应该有一个 value 属性，其中包含被选中时需要提交到服务器的数据值。如果不含 value 属性，则 value 值默认为元素中的文本。你可以在 <option> 元素中设置一个 selected 属性以将其设置为页面加载完成时默认选中的元素。

<select> 元素有一些用于控制元素的特有属性，例如 multiple 规定了能不能同时选中多个选项，size 规定了一次性显示多少选项。这个元素也支持大多数常见的表单输入元素属性，如 required, disabled, autofocus 等。

你还可以将 元素放在 元素中以为下拉菜单创建不同的选项分组。

属性

autocomplete：一个 DOMString，为用户代理 提供自动填充功能的线索。关于该值的完整列表以及如何使用自动填充的详细信息，请参阅 HTML 自动完成属性。

autofocus：这个布尔值属性能够让一个对象在页面加载的时候获得焦点。一个文档中只有一个对象可以有这个属性。

disabled：这个布尔值的属性表示用户不能与该表单控件交互。如果没有声明这个属性，则从它的父元素继承，例如 fieldset；如果没有父元素设置了 disabled 属性，那么默认该表单对象可用。

form：<select> 所关联的<form> (它的"表单拥有者")。其值必须是在同一文档中的 <form> 元素的id（如果没有设置这个属性， <select> 元素则与其任何存在的祖先 <form> 元素关联）。 这个属性让你将 <select> 元素与文档中任意位置的 <form> 元素相关联，而不仅仅是包含 <select> 元素的 <form> 元素。这个属性还可以覆盖元素的祖先 <form> 元素。

multiple：这个布尔值属性表示列表中的选项是否支持多选。没有声明该值时，一次只能选中一个选项。声明这个属性后，大多数浏览器都会显示一个可滚动的列表框，而非一个下拉菜单。

name：该属性规定了控件的名称。

required：一个布尔值属性，表示必须选中一个有非空字符串值的选项。

size：如果控件显示为滚动列表框（如声明了 multiple），则此属性表示为控件中同时可见的行数。浏览器不需要将选择元素呈现为滚动列表框。默认值为 0。

<select id="multi" name="multi" multiple size="2">
     <option>Banana</option>
     <option selected>Cherry</option>
     <option>Lemon</option>
</select>

<optgroup> 元素经常用于把相关的选项组合在一起。如果你有很多的选项组合, 使用<optgroup> 能够很简单的将相关选项组合在一起。

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

7、<datalist> ：自动补全框

可以通过 <datalist> 元素中的一些显示的 <option> 子元素为表单项提供推荐的自动补全值。<datalist> 元素需要指定一个 id。

数据列表会使用 list 属性绑定至一个 <input> 元素（如 text 或 email 输入类型），该属性的取值就是要绑定的数据列表的 id 值。

一旦数据列表与表单控件相关联，它的选项就会被用来自动补全用户输入的文本；通常，它以下拉框的形式呈现给用户，列出他们输入内容的可能匹配。

示例

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

8、<output>：输出

HTML <output> 标签表示计算或用户操作的结果。<output>标签定义一个计算结果，并将计算结果输出显示(比如执行脚本的输出)。与<label>标签类似，<output>标签也通过for属性来绑定计算中使用的元素。

属性

for：其它影响计算结果的标签的 ID，可以多个。

form：与当前标签有关联的 form（从属的表单）。该属性的值必须是当前文档内的表单元素的 ID。如果未指明该属性，output 标签必须是一个 form 的后代标签。该属性的用处在于可以让 output 标签脱离 form 标签，存在于一个网页文档的任意位置。

name：name 属性。

示例

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
	<input type="range" id="a" value="50">100
	+<input type="number" id="b" value="50">
	=<output name="x" for="a b"></output>
</form>

9、<progress>：进度条

HTML中的 <progress> 元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。

属性

max：该属性描述了这个progress元素所表示的任务一共需要完成多少工作。

value：该属性用来指定该进度条已完成的工作量。如果没有value 属性,则该进度条的进度为"不确定",也就是说，进度条不会显示任何进度，你无法估计当前的工作会在何时完成 (比如在下载一个未知大小的文件时，下载对话框中的进度条就是这样的)。

可以使用orient属性来指定该进度条的显示方向是横向 (默认) 还是纵向。CSS 伪类:indeterminate可以用来匹配那些不确定的进度条。

示例

<progress value="70" max="100">70 %</progress>

10、<meter>：计量器

<meter>计量器代表了一个由 max 和 min 限定范围内的固定值。这个值在视觉上呈现为一个条形，为了了解这个条形的样子，我们将这个值与其他一些设定的值进行比较：

• low 和 high 将范围分为了三个部分：
  下半部分范围在 min 和 low 值之间，包含端点值。
  中间部分范围在 low 和 high 值之间，不包含端点值。
  上半部分范围在 high 和 max 值之间，包含端点值。
• optimum 值定义了 元素的最佳值，它与 low 和 high 值一同定义了首选的范围部分：
  如果 optimum 在下半部分范围内，下半部分范围被认为是首选部分，中间部分范围被认为是平均部分，而上半部分范围被认为是最差的部分。
  如果 optimum 在中间部分范围内，下半部分范围被认为是平均部分，中间部分范围被认为是首选部分，而上半部分范围也被认为是平均部分。
  如果 optimum 在上半部分范围内，下半部分范围被认为是最差的部分，中间部分范围被认为是平均部分，而上半部分范围被认为是首选部分。

所有实现了 元素的浏览器使用这些值来改变计量器的颜色：

• 如果当前值位于首选范围，则计量器显示为绿色。
• 如果当前值位于平均范围，则计量器显示为黄色。
• 如果当前值位于最差范围，则计量器显示为红色。

示例

像下面这种条形是使用 <meter> 元素创建出来的。这是为了实现任何类型的仪表，例如，显示磁盘上使用的总空间的条形图，当它开始变满时就变成红色。

<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

属性

value：当前的数值。如果设置了最小值和最大值（分别由 min 属性和 max 属性定义），它必须介于最小值和最大值之间。如果没有指定或者格式有误，值即为 0.如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值。

min：值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为 0。

max：值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为 1。

low：定义了低值区间的上限值（译者注：如果 value 介于 min 和 low 之间，该元素就会表现出低值的视觉效果，value 落在 [min,low]、[high,max] 等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过 high 值和最大值。未设置或者比最小值还要小时，其值即为最小值。

high：定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于 low 值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。

optimum：这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了 low 和 high 属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和 low 之间，那么 lower 区间就被认为是更佳的取值范围。

form：该属性将本元素与对应的 form 元素关联。例如，一个计量器可能用来显示某个数值输入框（input 元素，number 类型）的范围。只有当计量器元素被用作表单关联的元素时，该属性才应当被使用；即便如此，如果它作为表单的后代元素出现，它仍然有可能被省略。