Html5系列之:新Form表单

 

• 新增的表单类型

email输入类型

<input type="email" value="some@email.com" />

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

<input type="url"  />

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

	<input type="date">
       <input type="time">
	<input type="month">
	<input type="week">

<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>

 range输入类型

<input type="range" min="0" max="50" value="10" />

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

<input type="search" results="10" placeholder="Search..." />

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

<input type="tel"  placeholder="(888) 888-8888"         pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />

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

<input type="color" placeholder="e.g. #bbbbbb" />

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

<input type="number" step="1" min="-5" max="10" value="0" />

  

• 新增的表单属性

  placeholder属性

<input type="text" placeholder="请输入关键字">

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

<input type="text" name="require" required="">

<input type="text" name="require1" required="required">

<input type="text" name="require2" pattern="^[1-9]\d{5}$">

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

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

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

	<input type="text" list="city">
	<datalist id="city">
        <option  value="hangzhou">hangzhou
	</option><option  value="shanghai">shanghai
	</option><option  value="beijing">beijing
	</option></datalist>

该属性需要与datalist属性共用,可以实现autocomplete功能，以上效果可以拷贝到本地进行预览。 max/min/step属性

<input type="range" min="0" max="50" value="10" />

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