HTML5 Web Forms 2.0是對目前Web表單的全面提升矩欠,它在保持了簡便易用的特性的同時,增加了許多內(nèi)置的控件或者控件屬性來滿足用戶的需求灵巧,并且同時減少了開發(fā)人員的編程髓需。HTML5 主要在以下幾個方面對目前的Web表單做了改進(jìn):
HTML結(jié)構(gòu)更加自由
XHTML中需要放在form之中的諸如input/button/select/textarea等標(biāo)簽元素啡氢,在HTML 5中完全可以放在頁面任何位置,然后通過新增的form屬性指向元素所屬表單的ID值掰曾,即可關(guān)聯(lián)起來旭蠕。
<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>
此類型表示輸入的將是一個搜索關(guān)鍵字掏熬,通過results=s可顯示一個搜索小圖標(biāo)佑稠。
- number/range
<input type="number" name="points" min="5" step="5" max="100" />
<input type="range" name="points" min="5" step="5" max="100" />
不同的數(shù)字輸入模式
- 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 屬性規(guī)定輸入域的 datalist。datalist 是輸入域的選項列表疮丛。
- multiple 規(guī)定輸入域中可選擇多個值幔嫂。
<input type="file" name="img" multiple="multiple" />
-
XML Submission編碼格式
我們一般常見的是Web Form的編碼格式是application/x-www-form-urlencoded。開發(fā)人員都很清楚這種格式誊薄,數(shù)據(jù)送到服務(wù)器端履恩,可以方便的存取。HTML5提供一種新的數(shù)據(jù)格式:XML Submission呢蔫,即application/x-www-form+xml切心。簡單的舉例說,服務(wù)器端將直接接收到XML形式的表單數(shù)據(jù)片吊。