HTML5之表单详解
请在新版标准浏览器（Chrome/Opera/Firefox/Safari…）中浏览本文中的样例，否则你看到的只是一个个空白的表单！ copyright cnmoker.orrg
copyright cnmoker.orrg
时光车轮滚滚碾来，前端之路永无止歇。对于这个前端这门精一多专的技术，任何一次技术革新，我们都必须第一时间去了解它学习它，比如Web世界里这簇美艳的花朵—HTML5.虽然HTML5发布之初，许多人（包括我）都觉得普及它还很遥远，但自发布以来，许多企业级网站对它的尝试应用（比如《！doctype html》应用，比如canvas的应用），使HTML5的迈出了一大步，随之而来IE9的发布，无疑又让我们看到了HTML5离我们不再遥远。
cnmoker.org
学习HTML5半年有余了，虽然对它的离线存储以及canvas等革新性技术还是一知半解，但我还是希望我现在所学到的能帮助更多的前端人学习这门毋庸置疑是新趋势的技术。本文我将详细介绍一下HTML5中对表单功能的更新。 内容来自墨者资讯
阅读本文前建议在Opera最新版中打开样例演示页查看样例演示 本文转载自墨者资讯网 墨者资讯网
一、表单结构更自由 本文转载自墨者资讯网 墨者资讯网
XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素，在HTML5中完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的ID值，即可关联起来。
比如：
<FORM id=iform>
<INPUT>
...
</FORM>
<INPUT value=http://www.chinaz.com/Design/Rules/我在id为iform的表单外 form="foo"> 墨者资讯,最新资讯
二、多样的输入类型(大部分新类型目前并不为所有标准浏览器支持,请参见样例演示中的提示) 最好的it资讯站,最全面的it资讯,尽在墨者资讯网
email输入类型
<INPUT type=email name=email> 内容来自墨者资讯
copyright cnmoker.orrg此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型必须指定name值,否则无效果. 墨者资讯,最新资讯
url输入类型
<INPUT type=url>
墨者资讯www.cnmoker.org
cnmoker.org上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://. 本文转载自墨者资讯网 墨者资讯网
日期时间相关输入类型(这些个很牛X的) copyright cnmoker.orrg
<INPUT type=date>
<INPUT type=time>
<INPUT type=month>
<INPUT type=week>
这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样.
copyright cnmoker.orrg
number输入类型(这些个很牛X的)
<INPUT type=number> 本文转载自www.cnmoker.org 墨者资讯网
本文转载自墨者资讯网 墨者资讯网这个不用多解释了,要求输入一个数字字符,若未输入则会抛出一个错误.
range输入类型 墨者资讯www.cnmoker.org
<INPUT type=range> 最好的it资讯站,最全面的it资讯,尽在墨者资讯网
本文转载自墨者资讯网 墨者资讯网
此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.
墨者资讯,最新资讯
search输入类型 本文转载自墨者资讯网 墨者资讯网
<INPUT type=search>
本文转载自www.cnmoker.org 墨者资讯网
cnmoker.org此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标. 本文转载自www.cnmoker.org 墨者资讯网
tel输入类型 墨者资讯www.cnmoker.org
<INPUT type=tel>
copyright cnmoker.orrg
本文转载自墨者资讯网 墨者资讯网
此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.
color输入类型 本文来自墨者资讯
<INPUT type=color> 本文转载自www.cnmoker.org 墨者资讯网
cnmoker.org
此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中. 本文转载自www.cnmoker.org 墨者资讯网
三、新增的表单属性 最好的it资讯站,最全面的it资讯,尽在墨者资讯网
placeholder属性
<INPUT id=placeholder placeholder="点击我会以清除"> 内容来自墨者资讯
这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持.
本文来自墨者资讯
require/pattern属性
<INPUT id=placeholder name=require required>
<INPUT id=placeholder name=require1 required="required">
<INPUT name=require2 pattern="^[1-9]\d{5}$"> copyright cnmoker.orrg
表单验证属性，require类型时，若输入值为空，则拒绝提交，并会有一个提示。上面两种写法都对，这个很有用。并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证，可以完成各种复杂的验证。这两种类型必须指定name值，否则无效果。 copyright cnmoker.orrg
autofocus属性
copyright cnmoker.orrg
<INPUT autofocus="true">
墨者资讯www.cnmoker.org
墨者资讯,最新资讯默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus(). 最好的it资讯站,最全面的it资讯,尽在墨者资讯网
list属性 墨者资讯www.cnmoker.org
<INPUT id=list list="ilist">
<DATALIST id=ilist>
<OPTION value=http://www.chinaz.com/Design/Rules/"a" label="a">
<OPTION value=http://www.chinaz.com/Design/Rules/"b" label="b">
<OPTION value=http://www.chinaz.com/Design/Rules/"c" label="c">
</DATALIST>
该属性需要与datalist属性共用，datalist是对选择框的记忆，而list属性可以为选择框自定义记忆的内容。 本文来自墨者资讯
max/min/step属性 copyright cnmoker.orrg
<INPUT type=range step="20" min="1" max="100"> 本文转载自www.cnmoker.org 墨者资讯网
本文转载自墨者资讯网 墨者资讯网限制值的输入范围，以及值的输入渐进程度，比如可在number设定输入最大值最小值，或者在range中设定拖动阶梯。
autocomplete属性
cnmoker.org
<INPUT id=autocomplete autocomplete="on"> 墨者资讯www.cnmoker.org
本文转载自墨者资讯网 墨者资讯网此属性是为表单提供自动完成功能。如果该属性为打开状态可很好地自动完成。一般来说，此属性必须启动浏览器的自动完成功能。
路漫漫其修远兮，吾将上下而求索。前端之路，学无止尽。痛并快乐着。 最好的it资讯站,最全面的it资讯,尽在墨者资讯网
转载自 HTML5之表单详解@Mr.Think copyright cnmoker.orrg
内容来自墨者资讯
