本文我们将详细介绍一下HTML 5中对表单功能的更新。希望能帮助更多的前端人学习这门毋庸置疑是新趋势的技术.

一、表单结构更自由

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

比如:

<form id="iform"> 
<input type="text"> 
    ...  
</form> 
<input value="我在id为iform的表单外" form="foo"> 

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

email输入类型

<input type="email" name="email"> 

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

url输入类型

<input type="url"> 

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

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

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

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

range输入类型

<input type="number"> 

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

search输入类型

<input type="search"> 

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

(责任编辑：admin)