第7 章 FormsAPI

 

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应用