当前位置:首页 > 开发 > Web前端 > 前端 > 正文

第7 章 FormsAPI

发表于: 2012-03-12   作者:bsr1983   来源:转载   浏览次数:
摘要:   7.1 HTML5 Forms概述 7.1.1 HTML Forms与XForms        XForms是一个以XML为核心、功能强大却略显复杂的标准,它用于规范客户端表单的行为,而专门的W3C工作组研究这些行为已近十年。XForms充分利用了XML Schema,制定了针对验证和格式化的精确准则,不过,很遗憾,

 

7.1 HTML5 Forms概述

7.1.1 HTML FormsXForms

       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特性只需将说明性文字作为该特性值即可。除了普通的文本输入框外,emailnumberurl等其他类型的输入框也都支持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.minmax

通过设置minmax特性,可以讲range输入框的数值输入范围限定在最低值和最高值之间。这两个特性既可以只设置一个,也可以两个都设置,还可以都不设置,输入型控件会根据设置的参数对峙的范围做出响应调整。

6.step

对于输入型控件,设置其step特性能够制定输入值递增或递减的粒度。

step特性的默认值取决于控件的类型。对于range控件,step默认值为1。为了配合step特性,HTML5引入了stepUpstepDown两个函数对其进行控制。

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

 

第7 章 FormsAPI

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
声明:文中观点仅代表个人,其中文字、图片未经本人许可,不得部分或全部转载,违者所造成影响后后
声明:文中观点仅代表个人,其中文字、图片未经本人许可,不得部分或全部转载,违者所造成影响后后
第7章 仓库 本章介绍了maven的仓库概念,仓库分类等内容。 7.1 何为maven仓库 maven仓库就是放置所
一、为什么要动态链接 相比静态链接,动态链接的优势: 1. 节省磁盘和内存空间:静态链接中,磁盘和
一、为什么要动态链接 相比静态链接,动态链接的优势: 1. 节省磁盘和内存空间:静态链接中,磁盘和
学习要点: 1.标准函数 2.自定义函数 3.文件包含 4.魔法常量 一般来讲,冗余的代码都是不好的。一而
第 7 章 使用filter过滤请求 注意 Filter虽然很常用,但是覆盖的范围太广,这里我们只介绍设置编码
我们经常会遇到找不到某个同事的联系方式或是某个新来同事的联系方式怎么也找不到,公司发放的通讯
我们经常会遇到找不到某个同事的联系方式或是某个新来同事的联系方式怎么也找不到,公司发放的通讯
第七章:更加抽象 1:对象的重要优点:多态(Polymorphism)、封装(Encapsulation)、继承(Inheri
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号