建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > html/xhtml >

解析HTML5之表单新功能(2)

时间:2011-03-15 10:19来源: 作者: 点击:
tel输入类型 input type = tel 此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别. color输入类型 input type = color 此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value

tel输入类型

  1. <input type="tel"> 

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

color输入类型

  1. <input type="color"> 

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

三、新增的表单属性

placeholder属性

  1. <input type="text" placeholder="点击我会以清除"> 

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

require/pattern属性

  1. <input type="text" name="require" required=""> 
  2. <input type="text" name="require1" required="required"> 
  3. <input type="text" name="require2" pattern="^[1-9]\d{5}___FCKpd___9quot;> 

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

autofocus属性

  1. <input type="text" autofocus="true"> 

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

list属性

  1. <input type="text" list="ilist"> 
  2. <datalist id="ilist"> 
  3.     <option label="a" value="a"> 
  4.     </option><option label="b" value="b"> 
  5.     </option><option label="c" value="c"> 
  6. </option></datalist> 

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

max/min/step属性

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

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

autocomplete属性

  1. <input type="text" autocomplete="on"> 

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

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片