Html5 Web Forms 2.0是對目前Web表單的全面提升,它在保持了簡便易用的特性的同時,增加了許多內置的控件或者控件屬性來滿足用戶的需求,並且同時減少了開發人員的編程。在我看來,Html5 主要在以下幾個方面對目前的Web表單做了改進:
- 新的控件類型
- 還在為類型檢查犯愁嗎,還在為那一長串看不太明白的檢驗輸入的正則表達式而苦惱嗎,Html5提供的一系列新的控件將天然的具備類型檢查的功能。比如說URL輸入框,Email輸入框等。
<input type="url"></input>
<input type="email"></input>
- 當然還有非常重要的日期輸入框,要知道使用JavaScript和CSS來“手工”制作一個日期輸入框還是非常花功夫的,類似Dojo,YUI這樣的類庫也無不在這個widget上面大做文章。
<input type="date"></input>
- 作為我痛苦記憶的一部分,我經常記得我們開發人員要為一個select下拉別表動態的添加非常多的選項,這些選項大多數都是來自數據庫,比如說國家、省市列表等等。這個事情非常繁瑣。Html5將支持data屬性,為select控件外聯數據源!
<select data="http://domain/getmyoptions"></select>
- 改 進的文件上傳控件,你可以使用一個控件上傳多個文件,自行規定上傳文件的類型(accept),你甚至可以設定每個文件最大的大小(maxlength)。你看出它和一般操作系統提供的文件上傳控件的區別了嗎,反正我覺得基本一致了。在Html5應用中,文件上傳控件將變得非常強大和易用。
- 重復(repeat)的模型,Html5提供一套重復機制來幫助我們構建一些重復輸入列表,其中包括一些諸如add、remove、move- up,move-down的按鈕類型,通過這一套重復的機制,開發人員可以非常方便的實現我們經常看到的編輯列表,這是一個很常見的模式,我們可以增加一個條目、刪除某個條目、或者移動某個條目等等。
- 內建的表單校驗系統,Html5為不同類型的輸入控件各自提供了新的屬性,來控制這些控件的輸入行為,比如我們常見的必填項required屬性,以及為數字類型控件提供的max、min等。而在你提交表單的時候,一旦校驗錯誤,浏覽器將不執行提交操作,而會顯示相應的檢驗錯誤信息。<input type="text" required></input>
<input type="number" min=10 max=100></input>
- XMLSubmission,我們一般常見的是form的編碼格式是application/x-www-form-urlencoded。開發人員都很清楚這種格式,數據送到服務器端,可以方便的存取。Html5將提供一種新的數據格式:XMLSubmission,即application/x-www-form+xml。簡單的舉例說,服務器端將直接接收到XML形式的表單數據。
<submission>
<field name="name" index="0">Peter</fIEld>
<fIEld name="password" index="0">passWord</fIEld>
</submission>