1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
---
title: HTML 中的表单
slug: Web/Guide/HTML/Forms_in_HTML
tags:
- HTML5
- HTML5 form updates
- form
translation_of: Learn/HTML/Forms/HTML5_updates
---
<div>HTML5中的表单元素和属性提供了比HTML4更多的语义标记，并取消了大量的在HTML4不可缺少的脚本和样式。HTML5中的表单功能为用户提供了更好的体验，使表单在不同网站之间更一致，并向用户提供有关数据输入的即时反馈。它们还为使用禁用脚本的浏览器的用户提供相同的用户体验。</div>
<div> </div>
<div>本文总结了HTML5中的表单变化。有关使用表单的详细指南，请参阅我们更多的<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms">HTML表单指南</a>。</div>
<div> </div>
<h2 id="The_input_element" name="The_input_element"><code><input></code> 元素</h2>
<p><code>{{HTMLElement("input")}}</code> 的 {{htmlattrxref("type", "input")}} 特性拥有更多的值。（请观看 {{HTMLElement("input")}} 获得完整列表）</p>
<ul>
<li><code>search</code>: 这个元素呈现为一个搜索框。除了换行符会自动从输入中移除，无其他强制性语法。</li>
<li><code>tel</code>: 这个元素可现为一个编辑电话号码的输入控件。因为电话号码国际化差异非常明显，所以除了换行符会自动从输入中移除，无其他强制性语法。你可以使用如 {{htmlattrxref("pattern", "input")}} 与 {{htmlattrxref("maxlength", "input")}} 等属性来限制输入到控件中的值。</li>
<li><code>url</code>: 这个元素呈现为一个编辑<a class="external" href="http://en.wikipedia.org/URL" title="http://en.wikipedia.org/wiki/URL">URL</a> 的输入控件。换行符与首尾的空格将会被自动去除。</li>
<li>
<p><code>email</code>: 这个元素呈现为一个邮件地址。换行符会被自动去除。可以设置一个无效的邮件地址，但若满足输入框的限制，必须遵守在<span style="font-family: Arial; font-size: medium; line-height: 26px;">扩展的巴科斯范式(ABNF)中的规范：</span><code style="font-size: 14px;">1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code><span style="line-height: 1.5em;"> 其中</span><code style="font-size: 14px;">atext</code><span style="line-height: 1.5em;"> 在规范</span><a class="external" href="http://tools.ietf.org/html/rfc5322#section-3.2.3" style="line-height: 1.5em;">RFC 5322 section 3.2.3</a> 中被定义<span style="line-height: 1.5em;">,而</span><code style="font-size: 14px;">ldh-str在规范</code><a class="external" href="http://tools.ietf.org/html/rfc1034#section-3.5" style="line-height: 1.5em;">RFC 1034 section 3.5</a> 中被定义。<span style="line-height: 1.5em;">.</span></p>
<div class="note"><strong>注意:</strong> 若设置{{htmlattrxref("multiple", "input")}}属性，{{HTMLElement("input")}} 区域中可以用逗号分割的方式，输入多个email, 但 Firefox不支持.</div>
</li>
</ul>
<p> {{HTMLElement("input")}} 元素也拥有一些新的特性。</p>
<ul>
<li>{{htmlattrxref("list", "input")}}： {{HTMLElement("datalist")}} 元素的 ID，该元素的内容，{{HTMLElement("option")}} 元素被用作提示信息，会在 input 的建议区域作为提议显示出来。</li>
<li>{{htmlattrxref("pattern", "input")}}： 一个正则表达式，用于检查控件的值，能够作用于 {{htmlattrxref("type", "input")}} 值是 <code>text，</code> <code>tel，</code> <code>search，</code> <code>url，</code> 和 <code>email 的 input 元素。</code></li>
<li>{{htmlattrxref("form", "input")}}： 一个字符串，用于表明该 input 属于哪个 {{HTMLElement("form")}} 元素。一个 input 只能存在于一个表单中。</li>
<li>{{htmlattrxref("formmethod", "input")}}：一个字符串，用于表明表单提交时会使用哪个 HTTP 方法 (GET 或 POST)；如果定义了它，则可以覆盖 {{HTMLElement("form")}} 元素上的 {{htmlattrxref("method", "form")}} 特性。只有当 {{htmlattrxref("type", "input")}} 值为 <code>image</code> 或 <code>submit，并且 </code>{{htmlattrxref("form", "input")}} 特性被设置的情况下， {{htmlattrxref("formmethod", "input")}} 才能生效。</li>
<li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}： 一个字符串，当表单字段验证失败后显示错误信息。该值为 Mozilla 扩展，并非标准。</li>
</ul>
<h2 id="text_input">text input</h2>
<dl>
<dt> </dt>
</dl>
<p>这个程序段段定义了一个用户可以输入的一行input。</p>
<pre><code><form>
Enter your Name <input type="text" name="name">
</form></code></pre>
<h2 id="checkboxes"><strong>checkboxes</strong></h2>
<p>这个程序段允许用户选择多个选项。</p>
<pre><code><input type="checkbox" name="chk" value="" checked> Do you want the newsletter</code></pre>
<h2 id="The_form_element" name="The_form_element">Radio < input> element</h2>
<pre><code><form>
<input type="radio" name="frequency" value="daily">Daily<br>
<input type="radio" name="frequency" value="weekly">Weekly<br>
<input type="radio" name="frequency" value="monthly">Monthly<br>
<input type="radio" name="frequency" value="yearly">Yearly
</form></code></pre>
<h2 id="The_form_element" name="The_form_element"><code><form></code> 元素</h2>
<p>{{HTMLElement("form")}} 元素有了一个新特性：</p>
<ul>
<li>{{htmlattrxref("novalidate", "form")}}：设置了该特性不会在表单提交之前对其进行验证。</li>
</ul>
<h2 id="The_datalist_element" name="The_datalist_element"><code><datalist> 元素</code></h2>
<p>{{HTMLElement("datalist")}} 元素会在填写 <span style="line-height: inherit;">{{HTMLElement("input")}} 字段时，显示一列</span><span style="line-height: inherit;"> {{HTMLElement("option")}} 作为提示。</span></p>
<p>你可以使用 {{HTMLElement("input")}} 元素上的<span style="line-height: inherit;"> {{htmlattrxref("list", "input")}} 特性来将一个特定的 input 与特定的</span><span style="line-height: inherit;"> {{HTMLElement("datalist")}} 元素做关联。</span></p>
<h2 id="The_output_element" name="The_output_element"><code><output></code> 元素</h2>
<p><code>{{HTMLElement("output")}}</code> 元素表示计算的结果。</p>
<p>你可以使用 {{htmlattrxref("for", "output")}} 特性来在 <code>{{HTMLElement("output")}}</code> 元素与文档内其他能够影响运算的元素(例如，input 或参数)建立关联。 {{htmlattrxref("for", "output")}} 特性的值是以空格做分隔的其他元素的 ID 列表。</p>
<p>{{non-standard_inline}} Gecko 2.0 (其他浏览器并非如此) 支持为 <span style="line-height: inherit;">{{HTMLElement("output")}} 元素自定义有效性约束(</span><span style="line-height: 21px;">validity constraints</span><span style="line-height: inherit;">)与错误信息，可以对其使用如下 CSS 伪类：</span><span style="line-height: inherit;">{{Cssxref(":invalid")}}， {{Cssxref(":valid")}}， {{Cssxref(":-moz-ui-invalid")}}，与 {{Cssxref(":-moz-ui-valid")}}。在如下情况会显得很有用：例如计算结果违反了业务规则，但却并非因为特定的 input 值出现错误(例如，</span><span style="line-height: inherit;">「百分比总数不能超过100</span><span style="line-height: inherit;">」</span><span style="line-height: inherit;">)。</span></p>
<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">placeholder 特性</h2>
<p>{{htmlattrxref("placeholder", "input")}} 特性作用于 <code>{{HTMLElement("input")}}</code> 与 <code>{{HTMLElement("textarea")}}</code> 元素上，提示用户此域内能够输入什么内容。placeholder 中的文本不能包含回车与换行。</p>
<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">autofocus 特性</h2>
<p>{{htmlattrxref("autofocus", "input")}} 特性让你能够指定一个表单控件，当页面载入后该表单自动获得焦点，除非用户覆盖它，例如在另一个控件中输入值。一个文档内只有一个表单能够拥有 <code>autofocus</code> 特性，它是一个 Boolean 值。这个特性适用于 <code>{{HTMLElement("input")}}，</code> <code>{{HTMLElement("button")}}，</code> <code>{{HTMLElement("select")}}，与<font face="Lucida Grande, Lucida Sans Unicode, DejaVu Sans, Lucida, Arial, Helvetica, sans-serif"> </font></code><code>{{HTMLElement("textarea")}}</code> 元素。例外情况是，如果一个 {{htmlattrxref("autofocus", "input")}} 元素的 {{htmlattrxref("type", "input")}} 特性值设置成了 <code>hidden，则</code><span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">autofocus</code><span style="line-height: inherit;"> 无法生效(就是说，你无法让一个隐藏控件自动获得焦点)。</span></p>
<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">label.control DOM 属性</h2>
<p><code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> DOM 接口除了为 <code>{{HTMLElement("label")}}</code> 元素提供了对应的特性外，还提供了一个额外的属性。 <strong>control</strong> 属性返回被打上标签的控件，就是 label 适用的控件，由 {{htmlattrxref("for", "label")}} 特性(如果定义的话) 或是第一个后代元素控件来确定。</p>
<h2 id="Constraint_Validation" name="Constraint_Validation">约束验证</h2>
<p>HTML5 为客户端表单的验证提供了语法与 API。当然这些功能无法取代服务器端验证，<span style="line-height: inherit;">出于安全性与数据完整性的考虑，服务器端验证仍然必不可少，但是客户端验证能够通过对输入数据的即时反馈来提供良好的用户体验。</span></p>
<p>如果 {{HTMLElement("input")}} 元素设置了<span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">title 特性，当验证失败时，特性值会显示在提示信息中。如果</code><span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">title</code><span style="line-height: inherit;"> 设置为空字符串，则不会显示提示信息。如果没有设置 </span><code style="font-size: 14px; line-height: inherit;">title</code><span style="line-height: inherit;"> 特性，会使用标准验证信息(例如通过 {{htmlattrxref("x-moz-errormessage")}} 特性指定，或调用 </span><code style="font-size: 14px; line-height: inherit;">setCustomValidity()</code><span style="line-height: inherit;"> 方法) 代为显示。</span></p>
<div class="note"><strong>注意：</strong> 约束验证不支持表单中的 {{HTMLElement("button")}} 元素；若想基于表单的验证结果来改变按钮的样式，可以使用 {{cssxref(":-moz-submit-invalid")}} 伪类。</div>
<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">约束验证的 HTML 语法</h3>
<p>下列 HTML5 语法中的条目用于为表单数据指定约束。</p>
<ul>
<li>{{HTMLElement("input")}}, {{HTMLElement("select")}}， 和 {{HTMLElement("textarea")}} 元素上的 {{htmlattrxref("required", "input")}} 特性，指定必须提供该元素的值。(在 {{HTMLElement("input")}} 元素上， {{htmlattrxref("required", "input")}} 只能与特定的 {{htmlattrxref("type", "input")}} 特性值结合起来生效。)</li>
<li>{{HTMLElement("input")}} 元素上的 {{htmlattrxref("pattern", "input")}} 特性用于限定元素值必须匹配一个特定的正则表达式。</li>
<li>{{HTMLElement("input")}} 元素上的 {{htmlattrxref("min", "input")}} 与 {{htmlattrxref("max", "input")}} 特性限定了能够输入元素的最大与最小值。</li>
<li>{{HTMLElement("input")}} 元素的 {{htmlattrxref("step", "input")}} 特性(与 {{htmlattrxref("min", "input")}} 与 {{htmlattrxref("max", "input")}} 特性结合使用) 限定了输入值的间隔。如果一个值与允许值的梯级不相符，则它无法通过验证。</li>
<li>{{HTMLElement("input")}} 与 {{HTMLElement("textarea")}} 元素的 {{htmlattrxref("maxlength", "input")}} 特性限制了用户能够输入的最大字符数(在 Unicode 代码点内)。</li>
<li>{{htmlattrxref("type", "input")}} 的 <code>url</code> 与 <code>email</code> 值分别用于限制输入值是否为有效的 URL 或电子邮件地址。</li>
</ul>
<p>此外，若要阻止对表单进行约束验证，你可以在 <span style="line-height: inherit;">{{HTMLElement("form")}} 上设置</span><span style="line-height: inherit;"> </span><span style="line-height: inherit;">{{htmlattrxref("novalidate", "form")}} 特性，或在 </span><span style="line-height: inherit;">{{HTMLElement("button")}} 与 {{HTMLElement("input")}} 元素(当 </span><span style="line-height: inherit;">{{htmlattrxref("type", "input")}} 是 </span><code style="font-size: 14px; line-height: inherit;">submit</code><span style="line-height: inherit;"> 或 </span><code style="font-size: 14px; line-height: inherit;">image</code><span style="line-height: inherit;">)上设置 </span><span style="line-height: inherit;">{{htmlattrxref("formnovalidate", "button")}} 特性。这些特性指定了当表单提交时不做验证。</span></p>
<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">约束验证 API</h3>
<p>下面这些 DOM 属性与方法和约束验证相关，能够在客户端脚本中使用：</p>
<ul>
<li><code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code> 对象上的 <code>checkValidity()</code> 方法，当表单的相关元素都通过了它们的约束验证时返回 true，否则返回 false。</li>
<li>在 <a href="/en-US/docs/HTML/Content_categories#Form-associated" title="HTML/Content Categories#form-associated">表单相关元素</a>上：
<ul>
<li><code>willValidate</code> 属性，如果元素的约束没有被符合则值为 false。</li>
<li><code>validity</code> 属性，是一个 <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> 对象，表示元素当前所处的验证状态(就是说约束成功或是失败)。</li>
<li><code>validationMessage</code> 属性，用于描述与元素相关约束的失败信息。</li>
<li><code>checkValidity()</code> 方法，如果元素没有满足它的任意约束，返回false，其他情况返回 true。</li>
<li><code>setCustomValidity()</code> 方法，设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息。</li>
</ul>
</li>
</ul>
<div>{{HTML5ArticleTOC}}</div>
|
