HTML5中的表单

这个话题会描述那些被 Gecko/Firefox4 或更高版本所支持的一些新特性或者改变的部分。

<input> 元素

<input> 的 type 特性拥有更多的值.

search: 这个元素呈现为一个搜索框。换行符会从输入值中去掉，此外没有其他的语法增强了。

tel: 这个元素可现为一个编辑电话号码的输入控件。换行符会从输入值中去掉，此外没有其他的语法增强了，因为电话号码国际化差异非常明显。你可以使用如 pattern 与 maxlength 等属性来限制输入到控件中的值。

url: 这个元素呈现为一个编辑URL 的输入控件。换行符与首尾的空格将会被自动去除。

email: 这个元素呈现为一个邮件地址。换行符会被自动去除。可以设置一个无效的邮件地址，但若满足输入框的限制，必须遵守在扩展的巴科斯范式(ABNF)中的规范：1( atext / "." ) "@" ldh-str 1( "." ldh-str ) 其中atext 在规范RFC 5322 section 3.2.3 中被定义,而ldh-str在规范RFC 1034 section 3.5 中被定义。.

注意: 若设置multiple属性，<input> 区域中可以用逗号分割的方式，输入多个email, 但 Firefox不支持. <input> 元素也拥有一些新的特性。

list： <datalist> 元素的 ID，该元素的内容，<option> 元素被用作提示信息，会在 input 的建议区域作为提议显示出来。

pattern： 一个正则表达式，用于检查控件的值，能够作用于 type 值是 text， tel， search， url， 和 email 的 input 元素。

form： 一个字符串，用于表明该 input 属于哪个 <form> 元素。一个 input 只能存在于一个表单中。

formmethod：一个字符串，用于表明表单提交时会使用哪个 HTTP 方法 (GET 或 POST)；如果定义了它，则可以覆盖 <form> 元素上的 method 特性。只有当 type 值为 image 或 submit，并且 form 特性被设置的情况下， formmethod 才能生效。

x-moz-errormessage ： 一个字符串，当表单字段验证失败后显示错误信息。该值为 Mozilla 扩展，并非标准。

<form> 元素

<form> 元素有了一个新特性：

novalidate：设置了该特性不会在表单提交之前对其进行验证。

<datalist> 元素

<datalist> 元素会在填写 <input> 字段时，显示一列 <option> 作为提示。

你可以使用 <input> 元素上的 list 特性来将一个特定的 input 与特定的 <datalist> 元素做关联。

<output> 元素

<output> 元素表示计算的结果。

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

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

placeholder 特性

placeholder 特性作用于 <input> 与 <textarea> 元素上，提示用户此域内能够输入什么内容。placeholder 中的文本不能包含回车与换行。

autofocus 特性

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

label.control DOM 属性

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

约束验证

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

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

注意： 约束验证不支持表单中的 <button> 元素；若想基于表单的验证结果来改变按钮的样式，可以使用 :-moz-submit-invalid 伪类。约束验证的 HTML 语法

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

<input>, <select>， 和 <textarea> 元素上的 required 特性，指定必须提供该元素的值。(在 <input> 元素上， required 只能与特定的 type 特性值结合起来生效。)

<input> 元素上的 pattern 特性用于限定元素值必须匹配一个特定的正则表达式。

<input> 元素上的 min 与 max 特性限定了能够输入元素的最大与最小值。

<input> 元素的 step 特性(与 min 与 max 特性结合使用) 限定了输入值的间隔。如果一个值与允许值的梯级不相符，则它无法通过验证。

<input> 与 <textarea> 元素的 maxlength 特性限制了用户能够输入的最大字符数(在 Unicode 代码点内)。

type 的 url 与 email 值分别用于限制输入值是否为有效的 URL 或电子邮件地址。

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

约束验证 API

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

HTMLFormElement 对象上的 checkValidity() 方法，当表单的相关元素都通过了它们的约束验证时返回 true，否则返回 false。

在 表单相关元素上：

willValidate 属性，如果元素的约束没有被符合则值为 false。

validity 属性，是一个 ValidityState 对象，表示元素当前所处的验证状态(就是说约束成功或是失败)。

validationMessage 属性，用于描述与元素相关约束的失败信息。

checkValidity() 方法，如果元素没有满足它的任意约束，返回false，其他情况返回 true。

setCustomValidity() 方法，设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息。

HTML5 Documentation

HTML

Audio/Video Canvas WebGL SVG MathML WebForms AppCache Microformats SemanticTags

JavaScript

Storage IndexedDB WebSockets WebWorkers Events Drag/Drop ProtocolHandler Geolocation Focus

CSS

NewSelectors Typography Visual Effects

更多HTML5中的表单相关文章请关注PHP中文网！