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形式的表單數據。