From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../zh-cn/web/guide/html/forms_in_html/index.html | 144 +++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 files/zh-cn/web/guide/html/forms_in_html/index.html (limited to 'files/zh-cn/web/guide/html/forms_in_html/index.html') diff --git a/files/zh-cn/web/guide/html/forms_in_html/index.html b/files/zh-cn/web/guide/html/forms_in_html/index.html new file mode 100644 index 0000000000..24a27db5b5 --- /dev/null +++ b/files/zh-cn/web/guide/html/forms_in_html/index.html @@ -0,0 +1,144 @@ +--- +title: HTML 中的表单 +slug: Web/Guide/HTML/Forms_in_HTML +tags: + - HTML5 + - HTML5 form updates + - form +translation_of: Learn/HTML/Forms/HTML5_updates +--- +
HTML5中的表单元素和属性提供了比HTML4更多的语义标记，并取消了大量的在HTML4不可缺少的脚本和样式。HTML5中的表单功能为用户提供了更好的体验，使表单在不同网站之间更一致，并向用户提供有关数据输入的即时反馈。它们还为使用禁用脚本的浏览器的用户提供相同的用户体验。
+ +
 
+ +
本文总结了HTML5中的表单变化。有关使用表单的详细指南，请参阅我们更多的HTML表单指南。
+ +
 
+ +

<input> 元素

+ +

{{HTMLElement("input")}} 的 {{htmlattrxref("type", "input")}} 特性拥有更多的值。（请观看 {{HTMLElement("input")}} 获得完整列表）

+ + + +

 {{HTMLElement("input")}} 元素也拥有一些新的特性。

+ + + +

text input

+ +
+
 
+
+ +

这个程序段段定义了一个用户可以输入的一行input。

+ +
<form>
+  Enter your Name <input type="text" name="name">
+</form>
+ +

checkboxes

+ +

这个程序段允许用户选择多个选项。

+ +
<input type="checkbox" name="chk" value="" checked> Do you want the newsletter
+ +

Radio < input> element

+ +
<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>
+ +

<form> 元素

+ +

{{HTMLElement("form")}} 元素有了一个新特性：

+ + + +

<datalist> 元素

+ +

{{HTMLElement("datalist")}} 元素会在填写 {{HTMLElement("input")}} 字段时，显示一列 {{HTMLElement("option")}} 作为提示。

+ +

你可以使用 {{HTMLElement("input")}} 元素上的 {{htmlattrxref("list", "input")}} 特性来将一个特定的 input 与特定的 {{HTMLElement("datalist")}} 元素做关联。

+ +

<output> 元素

+ +

{{HTMLElement("output")}} 元素表示计算的结果。

+ +

你可以使用 {{htmlattrxref("for", "output")}} 特性来在 {{HTMLElement("output")}} 元素与文档内其他能够影响运算的元素(例如，input 或参数)建立关联。 {{htmlattrxref("for", "output")}} 特性的值是以空格做分隔的其他元素的 ID 列表。

+ +

{{non-standard_inline}} Gecko 2.0 (其他浏览器并非如此) 支持为 {{HTMLElement("output")}} 元素自定义有效性约束(validity constraints)与错误信息，可以对其使用如下 CSS 伪类：{{Cssxref(":invalid")}}， {{Cssxref(":valid")}}， {{Cssxref(":-moz-ui-invalid")}}，与 {{Cssxref(":-moz-ui-valid")}}。在如下情况会显得很有用：例如计算结果违反了业务规则，但却并非因为特定的 input 值出现错误(例如，「百分比总数不能超过100」)。

+ +

placeholder 特性

+ +

{{htmlattrxref("placeholder", "input")}} 特性作用于 {{HTMLElement("input")}} 与 {{HTMLElement("textarea")}} 元素上，提示用户此域内能够输入什么内容。placeholder 中的文本不能包含回车与换行。

+ +

autofocus 特性

+ +

{{htmlattrxref("autofocus", "input")}} 特性让你能够指定一个表单控件，当页面载入后该表单自动获得焦点，除非用户覆盖它，例如在另一个控件中输入值。一个文档内只有一个表单能够拥有 autofocus 特性，它是一个 Boolean 值。这个特性适用于 {{HTMLElement("input")}}， {{HTMLElement("button")}}， {{HTMLElement("select")}}，与 {{HTMLElement("textarea")}} 元素。例外情况是，如果一个 {{htmlattrxref("autofocus", "input")}} 元素的 {{htmlattrxref("type", "input")}} 特性值设置成了 hidden，则 autofocus 无法生效(就是说，你无法让一个隐藏控件自动获得焦点)。

+ +

label.control DOM 属性

+ +

HTMLLabelElement DOM 接口除了为 {{HTMLElement("label")}} 元素提供了对应的特性外，还提供了一个额外的属性。 control 属性返回被打上标签的控件，就是 label 适用的控件，由 {{htmlattrxref("for", "label")}} 特性(如果定义的话) 或是第一个后代元素控件来确定。

+ +

约束验证

+ +

HTML5 为客户端表单的验证提供了语法与 API。当然这些功能无法取代服务器端验证，出于安全性与数据完整性的考虑，服务器端验证仍然必不可少，但是客户端验证能够通过对输入数据的即时反馈来提供良好的用户体验。

+ +

如果 {{HTMLElement("input")}} 元素设置了 title 特性，当验证失败时，特性值会显示在提示信息中。如果 title 设置为空字符串，则不会显示提示信息。如果没有设置 title 特性，会使用标准验证信息(例如通过 {{htmlattrxref("x-moz-errormessage")}} 特性指定，或调用 setCustomValidity() 方法) 代为显示。

+ +
注意： 约束验证不支持表单中的 {{HTMLElement("button")}} 元素；若想基于表单的验证结果来改变按钮的样式，可以使用 {{cssxref(":-moz-submit-invalid")}} 伪类。
+ +

约束验证的 HTML 语法

+ +

下列 HTML5 语法中的条目用于为表单数据指定约束。

+ + + +

此外，若要阻止对表单进行约束验证，你可以在 {{HTMLElement("form")}} 上设置 {{htmlattrxref("novalidate", "form")}} 特性，或在 {{HTMLElement("button")}} 与 {{HTMLElement("input")}} 元素(当 {{htmlattrxref("type", "input")}} 是 submit 或 image)上设置 {{htmlattrxref("formnovalidate", "button")}} 特性。这些特性指定了当表单提交时不做验证。

+ +

约束验证 API

+ +

下面这些 DOM 属性与方法和约束验证相关，能够在客户端脚本中使用：

+ + + +
{{HTML5ArticleTOC}}
-- cgit v1.2.3-54-g00ecf