技术开发 频道

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

  三、新增的表单属性

  placeholder属性

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

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

  require/pattern属性

1 <INPUT name=require required>  

2
<INPUT name=require1 required="required">  

3
<INPUT name=require2 pattern="^[1-9]\d{5}$">

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

  autofocus属性

1 <INPUT autofocus="true">

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

  list属性

1 <INPUT list="ilist">  

2
<DATALIST id=ilist>  

3    
<OPTION value="a" label="a">  

4    
<OPTION value="b" label="b">  

5    
<OPTION value="c" label="c">  

6
</DATALIST>

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

  max/min/step属性

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

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

  autocomplete属性

1 <INPUT autocomplete="on">

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

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

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

0
相关文章