注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

onefish资料库

成功要素---耐得住孤独!

 
 
 

日志

 
 

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

2011-03-11 19:53:45|  分类: web |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

  一、表单结构更自由

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

  比如:


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

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

  email输入类型


1 <INPUT type=email name=email>

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

  url输入类型


1 <INPUT type=url>

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

  日期时间相关输入类型


1 <INPUT type=date>  
2 <INPUT type=time>  
3 <INPUT type=month>  
4 <INPUT type=week>

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

  number输入类型


1 <INPUT type=number>

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

  range输入类型


1 <INPUT type=range>

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

  search输入类型


1 <INPUT type=search>

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

  tel输入类型


1 <INPUT type=tel>

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

  color输入类型


1 <INPUT type=color>

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


  三、新增的表单属性

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

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

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

  评论这张
 
阅读(89)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018