【译】原生表单组件

• 系列文章说明

• 原文

HTML表单是由组件构成的，这些组件是各类浏览器都支持的内置控件。本文中咱们将深刻探讨它们、了解它们的做用、学习如何让各类浏览器更好地支持它们。

虽然这里咱们只探讨内建表单组件，但因为HTML表单有诸多限制、以及不一样浏览器间的实现有不少的不一样，故web开发者有时也得构建自定义的表单组件。这部份内容将会在[怎样建立定制表单组件]()一文中详细讨论。

文本输入框

文本输入框是最基本的表单组件，它便于用户输入各类数据。然而一些文本框也能够专门用来实现一些特定需求。

值得注意的是，HTML文本框只是个纯文本输入控件。这就意味着你不能用它来进行富文本编辑（如加粗、斜体等）。所谓的富文本编辑器其实都是自定义的组件。

全部文本框都共享一些公共行为：

• 它们能够被标记为只读（用户不可修改输入的值）或者禁用（输入的值不会随着表单的其余部分一块儿提交）。

• 它们可拥有一个占位符；这是一小段在文本输入框内的、用于简明描述文本框做用的文本。

• 它们都受size（输入框的物理尺寸）和length（文本框能输入的最大字符数）的约束。

• 它们能够有拼写检查，若是浏览器支持的话。

兼容性表

属性（桌面端）	Chrome	Firefox (Gecko)	IE	Opera	Safari
<input>.readonly	1.0	1.0 (1.7 or earlier)	6	1.0	1.0
<input>.disabled	1.0	1.0 (1.7 or earlier)	6	1.0	1.0
<input>.placeholder	10.0	Unknown (4.0)	10	11.10	4.0
<textarea>.placeholder	10.0	Unknown (4.0)	10	11.50	5.0
<input>.size	1.0	1.0 (1.7 or earlier)	2	1.0	1.0
<input>.maxlength	1.0	1.0 (1.7 or earlier)	2	1.0	1.0
<input>.spellcheck	10.0	Unknown (3.6)	10	11.0	4.0

属性（移动端）	Android	Firefox (Gecko)	IE	Opera	Safari
<input>.readonly	(Yes)	4.0 (4.0)	(Yes)	(Yes)	(Yes)
<input>.disabled	(Yes)	4.0 (4.0)	(Yes)	(Yes)	(Yes)
<input>.placeholder	2.3	4.0 (4.0)	?	11.10	4
<textarea>.placeholder	?	4.0 (4.0)	?	11.50	4
<input>.size	(Yes)	4.0 (4.0)	(Yes)	(Yes)	(Yes)
<input>.maxlength	(Yes)	4.0 (4.0)	(Yes)	(Yes)	(Yes)
<input>.spellcheck	?	4.0 (4.0)	?	11.0	?

单行文本框

单行文本框是用type属性值为text的<input>元素建立的（若未提供type属性值，text也是个默认属性）。此外，若是你指定给type属性的值不被浏览器支持，也会使用text做为回退值。

<input type="text">

单行文本框只有一个约束：若你输入的文本中有换行，浏览器会在发送数据前将这个换行给移除。

可是，咱们也能够给单行文本框“按需”添加一些约束。这得用到pattern属性；该属性会告诉浏览器根据你选择的一个正则表达式来验证值的有效性。

<input type="text" pattern="^cherry|banana$">

HTML5添加了几个type属性的值来加强基本的单行文本框。虽然这些值仍会把<input>元素呈现为一个单行文本框，但实际上它们还给文本框添加了几个额外的约束和特性。

E-mail输入框

该类型的输入框设置了type值为email：

<input type="email" multiple>

它给输入框添加了这样的验证约束：用户须要输入一个有效的e-mail地址；其余任何输入都会致使输入框报错。而经过设置multiple属性，这种输入框也可让用户输入多个e-mail地址。

密码输入框

该类型的输入框设置了type值为password：

<input type="password">

它并未给输入文本添加任何特殊的约束，只是把输入框的里值作了隐藏以防止被读取。

注：注意这只是个用户界面的特性；浏览器仍是会发送纯文本，除非你用Javascript给文本进行编码。

搜索框

该类型的输入框设置了type值为search：

<input type="search" autosave>

文本框和搜索框的主要区别在于外观和体验上（一般，搜索框会以圆角呈现）。但其实搜索框还增长了一个特性：输入的值可被自动保存，以实如今同一站点的不一样页面中给出自动补全。

电话号码输入框

该类型的输入框设置了type值为tel：

<input type="tel">

因为世界上有多种电话号码制式，因此此类型的的文本框不会给用户输入的值强制使用任何约束，主要是一个语义上的区别而已。虽然在某些设备上（尤为是手机）点击该输入框，会出现一个不一样的虚拟键盘。

URL输入框

该类型的输入框设置了type值为url：

<input type="url">

为确保只输入有效的URL，它为输入框添加了些特殊的验证约束；若输入的值不是个符合格式的URL，表单将会呈现错误状态。

注：URL符合格式并不意味着它指向确切存在的地址。

有特殊约束并处于错误状态的输入框会阻止表单提交；此外，为让错误提示更明显，也能够为它们加些样式，咱们将在[表单数据验证]()一文中详细讨论这点。

兼容性表

属性（桌面端）	Chrome	Firefox (Gecko)	IE	Opera	Safari
<input>.type="text"	1.0	1.0 (1.7 or earlier)	2	1.0	1.0
<input>.type="email"	10.0	Unknown (4.0)	10	10.62	?
<input>.type="password"	1.0	1.0 (1.7 or earlier)	2	1.0	1.0
<input>.type="search"	5.0	Unknown (4.0)	10	11.01	5.0
<input>.type="tel"	5.0	Unknown (4.0)	10	11.01	5.0
<input>.type="url"	10.0	Unknown (4.0)	10	10.62	?

属性（移动端）	Android	Firefox (Gecko)	IE	Opera	Safari
<input>.type="text"	(Yes)	4.0 (4.0)	(Yes)	(Yes)	1.0
<input>.type="email"	Not supported	4.0 (4.0)	Not supported	(Yes)	?
<input>.type="password"	?	4.0 (4.0)	?	?	?
<input>.type="search"	Not supported	4.0 (4.0)	?	(Yes)	4.0
<input>.type="tel"	2.3	4.0 (4.0)	?	(Yes)	3.1
<input>.type="url"	Not supported	4.0 (4.0)	?	(Yes)	3.1

多行文本框

多行文本框使用了<textarea>元素而非<input>元素。

<textarea cols="20" rows="10"></textarea>

多行文本框与普通的单行文本框间的主要不一样在于，用户能够输入带有显式换行（即支持回车[CR]和换行[LF]字符）的文本。

值得注意的是，使用CSS属性resize，用户能够直接改变多行文本框大小，若是你想让他们这么作的话。

兼容性表

属性（桌面端）	Chrome	Firefox (Gecko)	IE	Opera	Safari
<textarea>	(Yes)	1.0 (1.7 or earlier)	(Yes)	(Yes)	(Yes)

属性（移动端）	Android	Firefox (Gecko)	IE	Opera	Safari
<textarea>	(Yes)	4.0 (4.0)	(Yes)	(Yes)	(Yes)

下拉组件

下拉组件能让用户很方便地从众多选项中做选择。HTML有两种下拉组件：选择框和自动补全组件。这二者的交互方式是同样的，一旦控件被激活，浏览器会展现一列表的值让用户从中选择，这个值列表会覆盖在页面内容之上。

选择框

选择框是经过<select>元素建立的，并使用一或多个<option>元素做为其子元素，每一个<option>都指定了一个可能的值。

<select>
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select>

如有须要，选择框的默认值可经过为相应的<option>元素设置selected属性进行指定。为了给值建立分组，<option>元素亦可嵌套于<optgroup>元素中：

<select>
  <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
  </optgroup>
  <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
    <option>Potatoe</option>
  </optgroup>
</select>

兼容性表

属性（桌面端）	Chrome	Firefox (Gecko)	IE	Opera	Safari
<select>	1.0	1.0 (1.7 or earlier)	(Yes)	(Yes)	(Yes)
<option>	1.0	1.0 (1.7 or earlier)	(Yes)	(Yes)	(Yes)
<optgroup>	1.0	1.0 (1.7 or earlier)	(Yes)	(Yes)	(Yes)

属性（移动端）	Android	Firefox (Gecko)	IE	Opera	Safari
<select>	1.0	4.0 (4.0)	(Yes)	(Yes)	(Yes)
<option>	1.0	4.0 (4.0)	(Yes)	(Yes)	(Yes)
<optgroup>	1.0	4.0 (4.0)	(Yes)	(Yes)	(Yes)

多选下拉框

默认的，选择框只容许用户选择一个值。要让用户能选择多个值，可经过给<select>元素添加multiple属性实现。但此时，选择框就再也不呈现为一个下拉组件了，反而呈现为一个普通的列表框。

<select multiple>
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select>

注：全部支持<select>元素的浏览器也都支持它的multiple属性。

自动补全组件

经过使用<datalist>元素，你能够给表单组件提供说明、自动补全的值，并经过子元素<option>来指定要呈现的值。设置好后，这份数据列表就能绑定到其余使用了list属性的组件上了。

一旦数据列表附加到一个表单组件上，它的选项就能被用于自动补全用户输入的文本；典型的状况是，选项被呈现为一个带有可能匹配的值的下拉框。

<label for="myFruit">What's your favorite fruit?</label>
<input type="text" id="myFruit" list="mySuggestion" />
<datalist id="mySuggestion">
  <option>Apple</option>
  <option>Banana</option>
  <option>Blackberry</option>
  <option>Blueberry</option>
  <option>Lemon</option>
  <option>Lychee</option>
  <option>Peach</option>
  <option>Pear</option>
</datalist>

注：根据HTML规范，list属性和<datalist>元素可被用于任何须要用户输入的组件上。然而，其并未清楚指明如何在非文本控件上使用，同时不一样浏览器的实现也是各有不一样。因此，要在非文本控件使用该特性得多加当心。

兼容性表

属性（桌面端）	Chrome	Firefox (Gecko)	IE	Opera	Safari
<datalist>	20.0	Unknown (4.0)	10	9.6	Not supported
<input>.list	20.0	Unknown (4.0)	10	9.6	Not supported

属性（移动端）	Android	Firefox (Gecko)	IE	Opera	Safari
<datalist>	Not supported	4.0 (4.0)	Not supported	(Yes)	Not supported
<input>.list	Not supported	4.0 (4.0)	Not supported	(Yes)	Not supported

可勾选组件

可勾选组件指的是能够经过点击改变其状态的组件。有两种可勾选组件：复选框和单选框，它们均可以经过checked属性来指示该组件是否默认被勾选。

值得注意的是，这些组件的行为和其余表单组件不太同样。对大多数表单组件而言，表单提交后全部具备name属性的组件都会被提交，即便它们没有获值。但对于可勾选组件，它们的值却只有在它们被勾选以后才会提交，若是没有勾选，则不会提交东西，包括其name属性。

复选框

复选框由设置了type值为checkbox的<input>元素建立：

<input type="checkbox" checked>

上面的HTML建立的复选框是默认勾选的。

兼容性表

属性（桌面端）	Chrome	Firefox (Gecko)	IE	Opera	Safari
<input>.type="checkbox"	1.0	1.0 (1.7 or earlier)	2	1.0	1.0

属性（移动端）	Android	Firefox (Gecko)	IE	Opera	Safari
<input>.type="checkbox"	1.0	1.0 (1.0)	(Yes)	(Yes)	(Yes)

单选框

单选框由设置了type值为radio的<input>元素建立：

<input type="radio" checked>

几个单选框能够被绑定在一块儿，只要它们使用相同的name属性值，它们就被视为同一组选框。而在同一组中，只有一个选框能被勾选；这意味着其中一个勾选以后，其余全部选框会自动不勾选。

到了表单提交时，也只有被勾选的值会被提交；若是没有勾选，整组单选框会被认为处于未知状态且不会随表单提交。

兼容性表

属性（桌面端）	Chrome	Firefox (Gecko)	IE	Opera	Safari
<input>.type="radio"	1.0	1.0 (1.7 or earlier)	2	1.0	1.0

属性（移动端）	Android	Firefox (Gecko)	IE	Opera	Safari
<input>.type="radio"	1.0	1.0 (1.0)	(Yes)	(Yes)	(Yes)

按钮

HTML表单中，有三种按钮：

提交按钮
用于发送表单数据给服务器。
重置按钮
用于重置全部表单组件为默认值。
匿名按钮
这种按钮不自带特效，但也能够经过Javascript代码进行自定义。

按钮能够由<button>元素或<input>元素建立。type属性的值会指定将呈现何种按钮。

提交按钮

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

重置按钮

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

匿名按钮

<button type="button">
    This a <br><strong>anonymous button</strong>
</button>
<input type="button" value="This is a anonymous button">

一般使用<button>或<input>建立的按钮行为都是同样的。然而也存在几点不一样：

• 就如先前的例子所示，<button>元素容许你使用HTML内容做为其标记内容，但<input>元素只接受纯文本内容。

• 使用<button>元素是，能够采用和按钮中内容不同的值。（但在IE8如下的浏览器中这是不可行的）

兼容性表

属性（桌面端）	Chrome	Firefox (Gecko)	IE	Opera	Safari
<input>.type="number"	1.0	1.0 (1.7 or earlier)	2	1.0	1.0
<input>.type="reset"	1.0	1.0 (1.7 or earlier)	2	1.0	1.0
<input>.type="button"	1.0	1.0 (1.7 or earlier)	3	1.0	1.0
<button>	1.0	1.0 (1.7 or earlier)	(Yes)(Buggy before IE8)	(Yes)	(Yes)

属性（移动端）	Android	Firefox (Gecko)	IE	Opera	Safari
<input>.type="number"	1.0	1.0 (1.0)	(Yes)	(Yes)	(Yes)
<input>.type="reset"	1.0	1.0 (1.0)	(Yes)	(Yes)	(Yes)
<input>.type="button"	1.0	1.0 (1.0)	(Yes)	(Yes)	(Yes)
<button>	1.0	1.0 (1.0)	(Yes)	(Yes)	(Yes)

高级表单组件

这一系列的组件能让用户输入一些复杂或高度结构化的数据，包括精确或近似数字、日期和时间、颜色。

数字

数字组件是经过type设置为number的<input>元素建立的。该控件看起来像文本框，但却只容许输入浮点数，并且一般还会带有几个按钮来增长或减小组件的值。

咱们能够经过设置min和max属性来约束该组件的值。也能够经过step属性来指定该组件的增长和减小按钮的改变量。

<input type="number" min="1" max="10" step="2">

上述代码建立了一个取值被限制在1到10之间的数字组件，其增长和减小按钮的改变量为2。

兼容性表

属性（桌面端）	Chrome	Firefox (Gecko)	IE	Opera	Safari
<input>.type="number"	11.0	Not supported	10(recognized but no UI)	(Yes)	5.2

属性（移动端）	Android	Firefox (Gecko)	IE	Opera	Safari
<input>.type="number"	2.3	Not supported	Not supported	(Yes)	4.0

滑块

另外一种选取数字的方法是使用滑块。因为操做滑块看起来不及文本框输入数字精确，因此滑块经常使用于选取对值的要求不是很精确的数字。

滑块组件是经过type设置为range的<input>元素建立的。适当配置滑块是很重要的，强烈推荐你设置其min, max, step属性。

<input type="range" min="1" max="5" step="1">

示例中建立了一个取值被限制在1到5之间的滑块组件，其增长和减小按钮的改变量分别为+1和-1。

兼容性表

属性（桌面端）	Chrome	Firefox (Gecko)	IE	Opera	Safari
<input>.type="range"	5.0	23.0	10	10.62	4.0

属性（移动端）	Android	Firefox (Gecko)	IE	Opera	Safari
<input>.type="range"	Not supported	23.0	Not supported	10.62	5.0

日期和时间选择器

收集日期和时间的值在以前每每是web开发者的噩梦。如今HTML5经过引入一个特殊的控件用于处理这类特定的数据，带来了一些新改进。

日期和时间控件是经过type设置为特定值的<input>元素建立的。由于你可能但愿能收集日期、时间或者二者兼有，因此它提供了几个不一样的type属性值：

date

建立展现和选取日期、但不含具体时间的组件。

<input type="date">

datetime

建立展现和选取日期、并带有UTC时区时间的组件。

<input type="datetime">

datetime-local

建立展现和选取日期、并带有任何指定时区时间的组件。

<input type="datetime-local">

month

建立展现和选取月份、并带有年份的组件。

<input type="month">

time

建立展现和选取一个时间值的组件。

<input type="time">

week

建立展现和选取周数、并带其年份的组件。

<input type="week">

全部的日期与时间控件均可以使用max和min属性进行约束：

<label for="myDate">When are you available this summer?</label>
<input type="date" min="2013-06-01" max="2013-08-31" id="myDate">

兼容性表

属性（桌面端）	Chrome	Firefox (Gecko)	IE	Opera	Safari
<input>.type="date"	Not supported	Not supported	Not supported	10.62	(Yes)
<input>.type="datetime"	Not supported	Not supported	Not supported	10.62	(Yes)
<input>.type="datetime-local"	Not supported	Not supported	Not supported	10.62	(Yes)
<input>.type="month"	Not supported	Not supported	Not supported	10.62	(Yes)
<input>.type="time"	Not supported	Not supported	Not supported	10.62	(Yes)
<input>.type="week"	Not supported	Not supported	Not supported	10.62	(Yes)

属性（移动端）	Android	Firefox (Gecko)	IE	Opera	Safari
<input>.type="date"	Not supported	Not supported	Not supported	10.62	5.0
<input>.type="datetime"	Not supported	Not supported	Not supported	10.62	(Yes)
<input>.type="datetime-local"	Not supported	Not supported	Not supported	10.62	(Yes)
<input>.type="month"	Not supported	Not supported	Not supported	10.62	(Yes)
<input>.type="time"	Not supported	Not supported	Not supported	10.62	(Yes)
<input>.type="week"	Not supported	Not supported	Not supported	10.62	(Yes)

警告：日期和时间组件都是很新的组件，甚至那些声称支持它们的浏览器也常有重大的用户界面问题，这让这些组件很难被使用。因此在发布你的内容以前，请先完全地在不一样的浏览器上测试一遍！

颜色选择器

一般颜色都有点难于处理，由于有许多种方式来表示它们：RGB值（十进制或十六进制）、HSL值、关键字等等。而颜色选择器能方便用户以文本或图形的形式选择颜色。

颜色组件是经过type设置为color的<input>元素建立的。

<input type="color">

兼容性表

属性（桌面端）	Chrome	Firefox (Gecko)	IE	Opera	Safari
<input>.type="color"	21.0	Not supported	Not supported	11.01	Not supported

属性（移动端）	Android	Firefox (Gecko)	IE	Opera	Safari
<input>.type="color"	Not supported	Not supported	Not supported	?	Not supported

其余组件

还有一些组件难以被归类，由于它们拥有一些很是特殊的行为；但其实它们也是颇有用的。

文件选择器

HTML表单能够向服务器发送文件，关于这点，在[发送表单数据]()一文中有详细的讨论。文件选择器组件是让用户选择一或多个文件进行发送的一种方式。

文件选择器组件是经过type设置为file的<input>元素建立的。被接收的文件类型可经过使用accept属性进行指定；此外，若你想让用户选择不止一个文件，能够添加multiple属性。

在下面的例子中，咱们建立了一个接收图像图形文件的文件选择器，它也容许用户选择多个文件。

<input type="file" accept="image/*" multiple>

兼容性表

属性（桌面端）	Chrome	Firefox (Gecko)	IE	Opera	Safari
<input>.type="file"	1.0	1.0 (1.7 or earlier)	3.02	1.0	1.0

属性（移动端）	Android	Firefox (Gecko)	IE	Opera	Safari
<input>.type="file"	?	?	?	?	?

隐藏内容

有时由于技术缘由，咱们得让一些随表单发送的数据对用户不可见。要这样作，你能够在你的表单中添加一个隐藏元素，只需使用type设置为hidden的<input>元素。

若你建立了这种元素，还必须设置其name和value属性：

<input type="hidden" name="timestamp" value="1286705410">

兼容性表

属性（桌面端）	Chrome	Firefox (Gecko)	IE	Opera	Safari
<input>.type="hidden"	1.0	1.0 (1.7 or earlier)	2	1.0	1.0

属性（移动端）	Android	Firefox (Gecko)	IE	Opera	Safari
<input>.type="hidden"	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)

图像按钮

图像按钮控件表面看起来就像是<img>元素，除非被用户点击，它才会具备提交按钮的行为（参见上文）。

图像按钮是经过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"。这样就提供了一种便于建立“热点地图”的方式。

举个例子：

<form action="http://foo.com" method="get">
  <!-- 译注：原文是value="pos"，明显是错的，下面已改正 -->
  <input type="image" name="pos" alt="" src="map.png" />
</form>

当你点击这个表单的图像时，你会发送出以下URL：

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

pos.x和pos.y参数的值取决于你点击了图片上哪一个地方。这些数据的发送和检索将在[发送表单数据]()一文中讨论。

兼容性表

属性（桌面端）	Chrome	Firefox (Gecko)	IE	Opera	Safari
<input>.type="image"	1.0	1.0	2	1.0	1.0

属性（移动端）	Android	Firefox (Gecko)	IE	Opera	Safari
<input>.type="image"	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)

度量和进度条

度量和进度条是数字值的可视化表示。

进度条表明一个随时间变化、直至达到由max属性指定的最大值的值。进度条使用<progress>元素进行建立，<progress>元素的内容用于让不支持该元素的浏览器做降级处理、也让无障碍设备能读出来。

<progress max="100" value="75">75/100</progress>

度量条表示一个处于由min和max值划分的范围的固定值。该值被渲染为一个长条，长条使用<meter>元素进行建立，<meter>元素的内容用于让不支持该元素的浏览器做降级处理、也让无障碍设备能读出来。

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

而要知道该长条长什么样子，咱们还得比较它的value值与另外几个值：

• low和high值将一个长条的范围划分了三个部分：

  • 范围较低的那部分位于min和low之间（含这两个值）。

  • 范围的中间部分位于low和high之间（不含这两个值）。

  • 范围较高的那部分位于high和max之间（含这两个值）。

• optimum值定义了<meter>元素的最佳值。结合low和high值，就能肯定一个长条范围的哪一个部分是最佳的：

  • 若optimum值位于范围较低的那部分，则较低的那部分是最佳的部分，中间部分是平均的部分，较高的那部分则是最差的部分。

  • 若optimum值位于范围的中间部分，则较低的那部分是平均的部分，中间部分是最佳的部分，较高的那部分也仍是平均的部分。

  • 若optimum值位于范围较高的那部分，则较低的那部分是最差的部分，中间部分是平均的部分，较高的那部分是最佳的部分。

全部实现了<meter>元素的浏览器都会使用上述的值来改变度量长条的颜色：

• 若如今的值位于范围最佳的部分，则长条显示为绿色。

• 若如今的值位于范围平均的部分，则长条显示为黄色。

• 若如今的值位于范围最差的部分，则长条显示为红色。

兼容性表

属性（桌面端）	Chrome	Firefox (Gecko)	IE	Opera	Safari
<progress>	6.0	6.0(6.0)	10	10.6	5.2
<meter>	6.0	16.0(16.0)	Not supported	11.0	5.2

属性（移动端）	Android	Firefox (Gecko)	IE	Opera	Safari
<progress>	Not supported	6.0(6.0)	Not supported	11.0	?
<meter>	Not supported	16.0(16.0)	Not supported	11.0	?

参见

若要深刻了解表单组件的不一样，这里还提供了一些你应该看看的有用资源：

• The Current State of HTML5 Forms by Wufoo

• HTML5 Tests - inputs on Quirksmode (也可用于移动端浏览器)