首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

第七 章 FormsAPI

2013-11-09 
第7 章 FormsAPI?7.1 HTML5 Forms概述7.1.1 HTML Forms与XForms?????? XForms是一个以XML为核心、功能强大

第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 使用HTML5Forms API

7.2.1 新的表单特性和函数

?????? 1.placeholder

?????? 当用户还没有输入值的时候,输入型控件可以通过placeholder特性向用户显示描述性说明或提示信息。

?????? 使用placeholder特性只需将说明性文字作为该特性值即可。除了普通的文本输入框外,email、number、url等其他类型的输入框也都支持placeholder特性。

?????? 2.autocomplete

?????? 浏览器通过autocomplete特性能够直销是否应该保存输入值一杯将来使用。例如不保存的代码如下:

?????? <inputtype=”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元素,开发人员能够为某个输入型控件构造一张选值列表,其使用方法如下。

5.min和max

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对象:

?????? varvalCheck=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 构建HTML5Froms应用

?

热点排行