HTML5技术应用之表单功能详解

so_brave

HTML5技术应用之表单功能详解

    时光车轮滚滚碾来,前端之路永无止歇.对于这个前端这门精一多专的技术,任何一次技术革新,我们都必须第一时间去了解它学习它,比如Web世界里这簇美艳的花朵—HTML5.虽然HTML5发布之初,许多人(包括我)都觉得普及它还很遥远,但自发布以来,许多企业级网站对它的尝试应用(比如应用,比如canvas的应用),使HTML5的迈出了一大步,随之而来IE9的发布,无疑又让我们看到了HTML5离我们不再遥远.



　　学习HTML5半年有余了,虽然对它的离线存储以及canvas等革新性技术还是一知半解,但我还是希望我现在所学到的能帮助更多的前端人学习这门毋庸置疑是新趋势的技术.本文我将详细介绍一下HTML5中对表单功能的更新.

　　阅读本文前建议在Opera最新版中打开样例演示页查看样例演示


　　一、表单结构更自由

　　XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来.

　　比如:

1. 1 <FORM id=iform>  
   
2. 
   
3. 2 <INPUT>  
   
4. 
   
5. 3     ...  
   
6. 
   
7. 4 </FORM>  
   
8. 
   
9. 5 <INPUT value=我在id为iform的表单外 form="foo">

复制代码

二、多样的输入类型(大部分新类型目前并不为所有标准浏览器支持,请参见样例演示中的提示)


　　email输入类型

1. 1 <INPUT type=email name=email>

复制代码

此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.

　　url输入类型

1. 1 <INPUT type=url>

复制代码

上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://.

　　日期时间相关输入类型

1. 
   
2. 1 <INPUT type=date>  
   
3. 
   
4. 2 <INPUT type=time>  
   
5. 
   
6. 3 <INPUT type=month>  
   
7. 
   
8. 4 <INPUT type=week>

复制代码

这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样.

　　number输入类型

1. 1 <INPUT type=number>

复制代码

这个不用多解释了,要求输入一个数字字符,若未输入则会抛出一个错误.

　　range输入类型

1. 1 <INPUT type=range>

复制代码

此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.

　　search输入类型

1. 1 <INPUT type=search>

复制代码

此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标.

　　tel输入类型

1 <INPUT type=tel>
　　此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.

　　color输入类型

1. 1 <INPUT type=color>

复制代码

此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中.



　　三、新增的表单属性

　　placeholder属性

1. 
   
2. 1 <INPUT placeholder="点击我会以清除">

复制代码

这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持.

　　require/pattern属性

1. 
   
2. 1 <INPUT name=require required>  
   
3. 
   
4. 2 <INPUT name=require1 required="required">  
   
5. 
   
6. 3 <INPUT name=require2 pattern="^[1-9]\d{5}$">

复制代码

表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示.上面两种写法都对,这个很有用.并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果.

　　autofocus属性

1. 1 <INPUT autofocus="true">
   
2. 　　默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().
   
3. 
   
4. 　　list属性
   
5. 
   
6. 1 <INPUT list="ilist">  
   
7. 
   
8. 2 <DATALIST id=ilist>  
   
9. 
   
10. 3     <OPTION value="a" label="a">  
    
11. 
    
12. 4     <OPTION value="b" label="b">  
    
13. 
    
14. 5     <OPTION value="c" label="c">  
    
15. 
    
16. 6 </DATALIST>

复制代码

该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容.

　　max/min/step属性

1. 1 <INPUT type=range step="20" min="1" max="100">

复制代码

限制值的输入范围,以及值的输入渐进程度,比如可在number设定输入最大值最小值,或者在range中设定拖动阶梯.

　　autocomplete属性

1. 1 <INPUT autocomplete="on">

复制代码

此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.

　　路漫漫其修远兮，吾将上下而求索.前端之路,学无止尽.痛并快乐着.

　　请在新版标准浏览器(Chrome/Opera/Firefox/Safari…)中浏览本文中的样例,否则你看到的只是一个个空白的表单!