HTML5 Web Forms 2.0是对目前Web表单的全面提升,它在保持了简便易用的特性的同时,增加了许多内置的控件或者控件属性来满足用户的需求,并且同时减少了开发人员的编程。HTML5 主要在以下几个方面对目前的Web表单做了改进:
HTML结构更加自由
XHTML中需要放在form之中的诸如input/button/select/textarea等标签元素,在HTML 5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来。
<form id="form0" action="http://www.baidu.com"></form>
<input type="search" form="form0" name="kw">
新增控件类型
- Email/Url类型
<input type="email" name="email"></input>
<input type="url" name="url"></input>
必须输入正确的email/url地址,表单才能正常提交。
- search
<input type="search" search="s"></input>
此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标。
- number/range
<input type="number" name="points" min="5" step="5" max="100" />
<input type="range" name="points" min="5" step="5" max="100" />
不同的数字输入模式
- color
<input type="color"></input>
此类型可让用户通过颜色选择器选择一个颜色值,并反馈到value中。
- date/month/week/time/datetime 日期选择器
<input type="date" name="user_date" />
新增表单属性
- placeholder
<input type="text" placeholder="请输入用户名"></input>
- require/pattern
<input type="text" name="require" required=""></input>
<input type="text" name="require1" required="required"></input>
<input type="text" name="require2" pattern="^[1-9]\d{5}$"></input>
- autofocus
<input type="text" autofocus="true"></input>
页面初始时,聚焦
- list
<input type="text" list="ilist"/>
<datalist id="ilist">
<option label="a" value="a"></option>
<option label="b" value="b"></option>
<option label="c" value="c"></option>
</datalist>
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
- multiple 规定输入域中可选择多个值。
<input type="file" name="img" multiple="multiple" />
-
XML Submission编码格式
我们一般常见的是Web Form的编码格式是application/x-www-form-urlencoded。开发人员都很清楚这种格式,数据送到服务器端,可以方便的存取。HTML5提供一种新的数据格式:XML Submission,即application/x-www-form+xml。简单的举例说,服务器端将直接接收到XML形式的表单数据。