?
7.1 HTML5 Forms概述
7.1.1 HTML Forms与XForms
?????? XForms是一个以XML为核心、功能强大却略显复杂的标准，它用于规范客户端表单的行为，而专门的W3C工作组研究这些行为已近十年。XForms充分利用了XML Schema，制定了针对验证和格式化的精确准则，不过，很遗憾，在没有安装插件的情况下，主流浏览器均不支持XForms。
7.1.2 功能性表单
?????? 提示
?????? 一定要领会HTML5 Forms的核心设计理念；规范的核心是功能性动作和语义，而非外观和显示效果。
7.1.3 HTML5 Forms的浏览器支持情况
7.1.4 输入型控件目录
7.2 使用HTML5 Forms API
7.2.1 新的表单特性和函数
?????? 1.placeholder
?????? 当用户还没有输入值的时候，输入型控件可以通过placeholder特性向用户显示描述性说明或提示信息。
?????? 使用placeholder特性只需将说明性文字作为该特性值即可。除了普通的文本输入框外，email、number、url等其他类型的输入框也都支持placeholder特性。
?????? 2.autocomplete
?????? 浏览器通过autocomplete特性能够直销是否应该保存输入值一杯将来使用。例如不保存的代码如下：
?????? <input type=”text” name=”creditcard”? autocomplete=”off”>
autocomplete特性应该迎来保护 敏感用户数据，避免本地浏览器对它们进行不安全地存储。
表7-4 输入型控件的autocomplate行为
|
类型 |
作用 |
|
on |
该字段无需受到保护，值可以被保存和恢复 |
|
off |
该字段需要受到保护，之不可以被保存 |
|
unspecified |
包含<form>的默认设置。如果没有被包含在表单中或没有指定值，则行为与设置on时相同 |
?????? 3.autofocus
?????? 页面载入时，开发人员通过autofocus特性可以指定某个表单元素获得输入焦点。每个页面上只允许出现一个auofocus特性。如果设置了多个autofocus特性，则相当于未指定此行为。
?????? 提示
?????? 如果页面内容的呈现依赖于门户页面或者共享内容页面，那么很难做到每个页面只有一个autofocus控件。所以，如果你无法完全控制整个页面，就不要指望给予autofocus特性获取焦点。
?????? 4.list特性和datalist元素
?????? 通过组合使用list特性和datalist元素，开发人员能够为某个输入型控件构造一张选值列表，其使用方法如下。
（1）?创建id特性值唯一的datalist元素，该元素可插入文档的任意位置。
（2）?添加若干option元素作为datalist元素的子元素，它们表示某控件推荐选值的全集。
（3）?将input元素的list特性值设为datalist元素的id值，可以实现二者的关联。
5.min和max
通过设置min和max特性，可以讲range输入框的数值输入范围限定在最低值和最高值之间。这两个特性既可以只设置一个，也可以两个都设置，还可以都不设置，输入型控件会根据设置的参数对峙的范围做出响应调整。
6.step
对于输入型控件，设置其step特性能够制定输入值递增或递减的粒度。
step特性的默认值取决于控件的类型。对于range控件，step默认值为1。为了配合step特性，HTML5引入了stepUp和stepDown两个函数对其进行控制。
7.valueAsNumber函数
valueAsNumber函数的作用是完成控件值类型在文本与数值之间的相互转换。它既是getter函数又是setter函数。作为getter函数调用时，valueAsNumber函数将文本类型转换成number类型，以方便计算。如果转换失败，则会返回NaN值。
8.required
一旦为某输入型控件设置了required特性，那么此项必填，否则无法提交表单。
如果此文本框中没有值，则无论以编程方式还是用户操作都无法提交表单。
7.2.2 表单验证
?????? 在支持HTML5表单验证的浏览器中，可以通过表单控件来访问ValidityState对象：
?????? var valCheck=document.myForm.myInput.validity；
?????? 这行代码获取了名为myInput的表单元素的ValidityState对象。对象包含了对所有八种验证状态的引用，以及最终验证结果。
?????? 调用方式如下：
?????? valCheck.valid
?????? 执行完毕，我们会得到一个布尔值，它表示表单控件是否已通过了所有的验证约束条件。可以把valid特性看做最终验证结果：如果所有八个约束条件都通过了，valid特性就是true。否则，只要有一项约束没通过，valid标志都是false。
提示
?????? ValidityState对象是一个实时更新的对象。获得某表单元素的ValidityState对象后，当表单元素内容发生变化时，你可以通过它来获得更新后的检测结果。
?????? willValidate特性
?????? willValidate特性仅用来说明某表单控件是否将进行验证。如果required特性、pattern特性等设置在了控件上，那么通过willValidate特性，你可以得知验证将会执行。
?????? checkValidity函数
?????? 即使没有用户输入，也可以使用checkValidity函数对表单进行验证。一般情况下，表单验证发生在用户或脚本提交表单是，checkValidity函数却能在任何时间对表单进行验证。
?????? 提示
?????? 在表单控件上调用checkValidity函数不仅会进行验证，还会触发所有结果事件和UI触发器，就好像表单已经提交了一样。
?????? validationMessage特性
?????? validationMessage特性允许你通过编程方式查询本地化错误信息，浏览器基于当前验证状态显示的也是这些信息。
7.2.3 验证反馈
?????? 只要发生表单验证（不管是在提交表单时，还是直接调用checkValidity函数），所有未通过验证的表单都会节后到一个invalid事件。invalid事件可以被忽略、观察、甚至取消。
?????? 表单本身可以通过代码方式设置noValidate特性。这样一来，所有的验证逻辑都会被放弃，只会单纯地提交表单。
关闭验证更好的办法是在如表单提交按钮（type特性值为submit）这样的控件上设置formNoValidate特性。
7.3 构建HTML5 Froms应用
?