HTML5的表单新特性(3)

虽然目前各种浏览器对HTML5的支持程度参差不齐,但是不可否认HTML5将会成为未来的流行趋势。

一、HTML5表单新增属性

(1)placeholder 这个属性的用处是颇大的,可以向用户显示描述性说明或者提示信息。如果浏览器不支持的话,此属性

会忽略掉,显示浏览器默认的状态。当输入框中有值或者获得焦点的时候,不显示placeholder的值

eg:  您的名字: <input type="text" placeholder="请输入您的真实姓名" name="realname"/>


      【注意】不过这个属性比较有意思的就是,如果浏览器同时也支持autofocus的时候,此属性的作用就发挥不出来了,

其实也好理解,如果autofocus有效的时候,表示该输入框有内容,但内容为空。

(2)autocomplete  该属性用来保护铭感用户数据,避免本地浏览器对他们进行不安全的存储。

【值】on  该字段不受保护,值可以被保存和恢复

off  该字段受到保护,值不可以被保存

unspecified 包含form的默认设置,如果没有被包含在表单中或者没有指定值,则行为与设置on时相同

(3)autofocus 该属性顾名思义,就是自动获得焦点,但是每个页面只允许出现一个autofocus属性,如果设置了多个的

话,相当于未指定此行为。该属性有点类似checked的用法,可以直接写,不用设置便有效

eg: <input type="text" name="name" autofocus/>

(4)list和datalist

HTML5里的标签确实都是精华,在做搜索的时候,经常会遇到这样的实现方式,输入的时候有一定的提示信息

<datalist  id="urllist">

<option value="http://www.google.hk" label=”谷歌中国">

<option value="http://www.baidu.com" label="百度">

</datalist>

选择搜索引擎 : <input type="text"  id="contacts"  list="urllist"/>

效果如下:(FF下,不同的浏览器下效果有所不同)

【注意】:datalist必须有id,引用的input等用list属性的值与datalist的id值相对应

(5)min和max

min和max属性用于input type=“range”的输入框,min设置最小值,max设置最大值

例:取值范围:<input type="range" name="number" min="0" max="100"/>效果如下Opera浏览器下效果

(6)step

该属性对于输入型控件,设置其step特性能够制定输入值递增或递减的粒度。此属性同min和max一样值针对

input type=range的输入框

eg:<input type="range" name="number" min="0" max="100"  step="5" value="0"/>

(7)valueAsNumber函数

作用是完成控件值类型在文本与数值间的相互转换。

eg: document.getElementByIdx_x("confidence").valueAsNumber(65);

(8)required属性

一旦某输入型空间设置了required属性,则此项为必填项

eg:<input type="text" name="name" required/>

二、HTML5表单验证

HTML5的表单验证实际上只是一种优化,其实际目的倒不是为了保证提交给服务器表单的数据的正确性和有效性,而是

为了让web应用更快的抛出异常。

说到HTML5的表单验证,就不得不提到ValidityState对象,该对象包含了八种验证状态的引用,以及最终验证结果

获取name为myForm的表单中name为myInput的表单元素的ValidityState对象:

var vState=document.myForm.myInput.validity;

(1)valid 最终验证结果,如果下面的八种约束条件都通过了,validate特性就是true,否则就是false;

(2)八种约束条件

a.  valueMissing

该属性针对设置了required的表单元素

eg:var flag=input.valueMissing;

b.  typeMismatch

该属性针对设置了type=email | number | url的表单元素  eg:var flag=input.typeMismatch;

c.  patternMismatch

该属性针对设置了pattern的表单元素  eg: var flag=input.patternMismatch;

d.  tooLong

该属性针对设置了maxLength的表单元素 eg: var flag=input.tooLong;

e. rangeUnderflow

该属性针对type=range且设置了min的range表单元素  eg: var flag=input.rangeUnderflow;

f.  rangeOverflow

该属性针对type=range且设置了max的range表单元素  eg: var flag=input.rangeOverflow;

g. stepMismatch

该属性针对type=range且设置了min,max以及step的range表单元素  eg: var flag=input.stepMismatch;

h. customError

这个属性比较晦涩,当浏览器内置的验证机制不适用的时候,需要显示自定义验证错误信息,当输入值不符合语义

规则时,应用程序代码应设置这些自定义验证消息。

此属性通过setCustomValidity(message)来使表单控件置于customEorror状态

eg: input.setCustomValidity("values not match!");

setCustomValidity的值需要通过validationMessage来获取 eg:input.validationMessage

不过从它的作用来看似乎也不比直接使用javascript来自定义错误简单了多少啊!

【其他用于验证的特性及函数】

(1)willValidate  说明表单控件是否将进行验证,也就是说如果有required,pattern等属性设置在控件上,那么通

过willValidate就可以知道该控件是否有验证约束

eg: <input type="text" required name="realname" onblur="alert(this.willValidate);">

(2) checkValidity  此函数用户对表单控件进行验证,如果为true则验证通过,false验证不通过,一般情况下,表

单验证发生在用户或者脚本提交表单的时候,但是checkValidity却可以在任何时间对表单进行验证。不同的地

方在于,使用checkValidity进行表单验证不会出现提示信息,需要自己根据返回值进行定义。

eg: <input type="text" required name="realname" onblur="validate(this)"/>

<script>

function validate(input){

var flag=input.checkValidity();

if(!flag){alert("不能为空!");}

}

</script>

(3)validationMessage 允许通过编程方式查询本地化错误信息,浏览器基于当前验证状态显示的也是这些信息。

此属性可以和setCustomValidity(mesg)配合使用

(4)一些特殊情况下,例如我们在填表单的时候遇到一点急事,想先保存填的内容,就需要提交到服务器进行保

存,但是又有表单验证的限制,我们不能之间提交,这个时候就需要我们关闭表单的验证,采用

formnovalidate来实现。

如下:

<input type="submit" formnovalidate name="save" value="submit"/>

formnovalidate通常是设置在表单的提交按钮上

时间: 2024-10-07 06:10:05

HTML5的表单新特性(3)的相关文章

HTML5的表单新特性(2)

HTML5 表单新特性:等待了12年之久,我们迎来了HTML5主要修订版本.虽然此版本仍处于测试阶段并且没有宣布正式推出的日期,HTML5的网页设计师和程序员已经就开始关注,并对最新功能展开了热烈讨论. HTML5新特性的目的是改善嵌入,比如视频和音频等多媒体的支持,为开发者和终端用户供简单的编程和更好的用户体验.现在互联网世界都在等待,浏览器更新时能支持HTML5的新版本.HTML5已经被很多浏览器支持,比如Safari, Chrome, FireFox, Opera, IE9,它是向后兼容的

HTML5的表单新特性

HTML5 Web Forms 2.0是对目前Web表单的全面提升,它在保持了简便易用的特性的同时,增加了许多内置的控件或者控件属性来满足用户的需求,并且同时减少了开发人员的编程.在我看来,HTML5 主要在以下几个方面对目前的Web表单做了改进: 新的控件类型 还在为类型检查犯愁吗,还在为那一长串看不太明白的检验输入的正则表达式而苦恼吗,HTML5提供的一系列新的控件将天然的具备类型检查的功能.比如说URL输入框,Email输入框等. <input type="url">

html5 css3表单新特性

2如何给不支持新特性的浏览器打补丁1 2如何给不支持新特性的浏览器打补丁1Modernizr补丁下载 <!DOCTYPE html> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="

HTML5_01之表单新特性

1.WebStorm快捷键: Ctrl+Alt+(向下方向键):快速复制当前行 Alt+(向上/下方向键):移动当前行 Ctrl+D:删除当前行 Ctrl+/:快速(取消)注释当前行 Ctrl+Alt+L:格式化当前文档2.HTML5九大新特性: ①表单新特性.②视频音频.③Canvas绘图.④SVG绘图.⑤地理定位.⑥拖放API.⑦WebWorker.⑧WebStorage.⑨WebSocket3.表单Input类型: ①已有type类型:  text(文本框).password(密码框).r

HTML5基础知识汇总_(2)自己定义属性及表单新特性

自己定义属性data-* 说起这个属性,事实上如今非经常见了;怎么说呢,由于在一些框架都能看到他的身影!!! 比方Jquery mobile,里面非常频繁的使用了这个属性; 这个属性是哪里来的-.当然是尾随最新的H5一起出来的-.. 兼容性在PC端仅仅能呢说一般般(眼下.比較老式浏览器居多),,手机端支持还是比較OK的; 虽说是自己定义属性,可是还是有一定的规格的,,比方前缀必须是data-[自己定义属性]; 比方 <div data-id="id"></div>

html5表单新特性

type=range 值区域范围 默认值(0-100) type=data  选择日期 type=color value='初始值' 颜色选择器控件 type=search 搜索框效果 type=image 创建一个图像控件该空间单击后将导致表单立即提交 type=email 提交表单时 会自动提交其值 type=url  用于包含地址的输入域,提交表单时会自动验证 type=tel 输入的内容为电话号码类型

HTML5的表单新属性(扩展)

新的 form 属性: autocomplete. novalidate  autocomplete控件是指用户在文本框输入前几个字母或是汉字的时候, autocomplete控件就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便. autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers,

表单新特性

1 placeholder 文本站位 当用户还没有输入值时,输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息,这在目前网站中很常见,一些JS框架都会提供类似功能,简单的说下在旧版本中常用的解决方案,为输入控件创建一个label,然后通过CSS控制些label的位置使之覆盖在输入控件上面,当label获得焦点时,浏览器会把焦点指向输入控件.有了placeholder,新的浏览器就内置了这一功能,其特性值会以浅灰色样式显示在输入框中,当输入框获得焦点并有值后,该提示信息自

HTML5有哪些表单新特性

21. 检测属性支持除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持,如: 22. Mark元素 把元素看做是高亮的作用,当我选择一段文字的时候,javascript对于HTML的markup效果应该是这样的: Search Results They were interrupted, just after Quato said, ”Open your Mind”. 23. 什么时候用 HTML5已经引入了这么多元素,那么div我们还要用吗?div你可以在没