html5表单属性

表单

一、多样的输入类型

 email输入类型
<INPUT type='email' name=email>

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

url输入类型
<INPUT type=url>

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

日期时间相关输入类型
<INPUT type=date>
<INPUT type=time>
<INPUT type=month>
<INPUT type=week>

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

number输入类型
<INPUT type=number>

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

range输入类型
<INPUT type=range>

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

search输入类型
<INPUT type=search>

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

tel输入类型
<INPUT type=tel>

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

color输入类型
<INPUT type=color>

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

二、新增的表单属性

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}$">

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

autofocus属性
<INPUT autofocus="true">

默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().

list属性

<INPUT id=list list="ilist">
<DATALIST id=ilist>
 <OPTION value="a" label="a">
 <OPTION value="b" label="b">
 <OPTION value="c" label="c">
</DATALIST>

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

max/min/step属性
<INPUT type=range step="20" min="1" max="100">

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