HTML5中的表单

高洛峰
Lepaskan: 2017-02-06 14:11:23
asal
1320 orang telah melayarinya

相对于 HTML4 来说,HTML5中的元素与特性提供更大程度上的语义标记,同时还删除了大量在 HTML4 中因为脚本与样式缘故而存在的冗余元素。通过让表单在不同网站上表现的更加一致,及时响应用户输入的数据,HTML5的表单特性为用户提供了更好的使用体验。这些体验同样适用于那些禁用了浏览器脚本的用户。

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

元素

的 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属性, 区域中可以用逗号分割的方式,输入多个email, 但 Firefox不支持. 元素也拥有一些新的特性。

list: 元素的 ID,该元素的内容,

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

form: 一个字符串,用于表明该 input 属于哪个

元素。一个 input 只能存在于一个表单中。

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

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

元素

元素有了一个新特性:

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

元素

元素会在填写 字段时,显示一列

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

元素

元素表示计算的结果。

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

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

placeholder 特性

placeholder 特性作用于