HTML5 是由WHATWG (Web Hypertext Application Technology Working Group) 發起的,最開始的名稱叫做Web Application 1.0,而後這個標準吸納了Web Forms 2.0的標準,並一同被W3C組織所採用,合併成為下一代的HTML5標準。
前言
HTML語言作為如今編程最為廣泛的語言,具有易用、快捷、多瀏覽平台兼容等特點,但是隨著時代的進步,HTML的標準卻停滯不前,這一次還在不斷開發中的HTML5標準的更新可以說給這門標記語言帶來了新的生命力。本文將著重討論HTML5中的Web Forms 2.0, 即表單的部分。
表單是網頁中常見的控件(集)。小到網站註冊登錄,大到一個企業的數據管理系統,都基本上有表單的身影。表單之所以如此重要,主要是因為它擔負大量的用戶和網頁後台數據更新交互的任務。 Web開發人員,對於網頁表單可以說又愛又恨,愛的是它方便的收集、組織數據的功能,恨的是它的功能很大程度上也就僅此而已。一些在最終網站用戶看起來稀鬆平常的功能,比如說輸入類型檢查、表單校驗、錯誤提示等等,開發人員無不需要花費大量精力利用JavaScript和DOM編程來滿足這些天然所需的功能點,而隨著Ajax的流行,出現的一些JavaScript的工具庫,比如Dojo, YUI等都提供了方便的JavaScript Widget或者API來減輕開發人員的負擔。
HTML5 Web Forms 2.0是對目前Web表單的全面提升,它在保持了簡便易用的特性的同時,增加了許多內置的控件或者控件屬性來滿足用戶的需求,並且同時減少了開發人員的編程。在我看來,HTML5 主要在以下幾個方面對目前的Web表單做了改進:
<input type=url></input><input type=email></input>
<input type=date></input>
<select data=http://domain/getmyoptions></select>
<input type=text required></input><input type=number min=10 max=100></input>
<submission><field name=name index=0>Peter</field>
<field name=password index=0>password</field>
</submission>
我將利用HTML5新的表單系統, 做一個簡單的用戶註冊的界面,包括用戶名,密碼,出生日期,保密問題等內容,代碼如下:
<! doctype html><html> <head> <style> p label { width: 180px; float: left; text-align: right; padding-right: 10px } table { margin-left: 80px } table td { border-bottom: 1px solid #CCCCCC } input.submit { margin-left: 80px } </style> </head> <body> <form action='/register' enctype=application/x-www-form+xml method=post> <p> <label for='name'>ID(請使用Email註冊)</label> <input name='name' required type='email'></input> </p> <p> <label for='password'>密碼</label> <input name='password' required type='password'></input> </p> <p> <label for='birthday'>出生日期</label> <input type='date' name='birthday' /> </p> <p> <label for='gender'>國籍</label> <select name='country' data='countries.xml'></select> </p> <p> <label for='photo'>個性頭像</label> <input type='file' name='photo' accept='image/*' /> </p> <table> <thead> <td><button type=add template=questionId>+</button> 保密問題</td> <td>答案</td> <td></td> </thead> <tr id=questionId repeat=template repeat-start=1 repeat-min=1 repeat-max=3> <td><input type=text name=questions[questionId].q></td><td><input type=text name=questions[questionId].a></td><td><button type=remove>刪除</button></td> </tr> </table> <p> <input type='submit' value='send' class='submit' /> </p> </form> </body></html>由於目前HTML5標準仍然在開發中,不同的瀏覽器對HTML5特性的支持都相當有限。其中Opera在表單方面支持得比較好,本實例在Opera9上運行一切正常,效果圖如下:
這個實例運用了一些HTML5的新的表單元素,比如email類型的輸入框(ID),日期類型的輸入框(出生日期)。並且使用了重複模型來引導用戶填寫保密問題,而在個性頭像的上傳中,通過限製文件類型,方便用戶選擇圖片進行合乎規範的內容上傳。而用戶選擇國籍的下拉選擇輸入框中,採用的是外聯數據源的形式,外聯數據源使用coutries.xml,內容如下:
<select xmlns=http://www.w3.org/1999/xhtml> <option>China</option> <option>Japan</option> <option>Korea</option></select>
並且form的enctype是application/x-www-form+xml,也就是HTML5的XML提交。所以一旦form校驗通過,form的內容將會以XML的形式提交。你還會發現,在ID輸入框如果沒有值,或者輸入了非email類型的字符串時,一旦試圖提交表單,就會有提示錯誤的信息出現,而這都是瀏覽器內置的。
HTML5對錶單控件的更新,無疑是很振奮人心的。本文描述了一部分錶單的新特性,還有一部分新特性同樣很令人期待。相信隨著標準的深入開發以及瀏覽器對HTML5支持程度的進一步提升,設計一個簡單易用的表單的工作,將變得非常輕鬆。