使用HTML5構(gòu)建下一代的Web Form
作者 蔣博 發(fā)布于 2009年6月22日 上午4時52分
- Architecture,
- Java
- 主題
- 編程,
- 語言
- 標(biāo)簽
- W3C,
- 標(biāo)識語言
HTML5 是由 WHATWG (Web Hypertext Application Technology Working Group) 發(fā)起的，最開始的名稱叫做Web Application 1.0，而后這個標(biāo)準(zhǔn)吸納了Web Forms 2.0的標(biāo)準(zhǔn)，并一同被W3C組織所采用，合并成為下一代的HTML5標(biāo)準(zhǔn)。
前言
HTML語言作為如今編程最為廣泛的語言，具有易用、快捷、多瀏覽平臺兼容等特點，但是隨著時代的進(jìn)步，HTML的標(biāo)準(zhǔn)卻停滯不前，這一次還在不斷開發(fā)中的HTML5標(biāo)準(zhǔn)的更新可以說給這門標(biāo)記語言帶來了新的生命力。本文將著重討論HTML5中的Web Forms 2.0, 即表單的部分。
表單是網(wǎng)頁中常見的控件(集)。小到網(wǎng)站注冊登錄，大到一個企業(yè)的數(shù)據(jù)管理系統(tǒng)，都基本上有表單的身影。表單之所以如此重要，主要是因為它擔(dān)負(fù)大量的用戶和網(wǎng)頁后臺數(shù)據(jù)更新交互的任務(wù)。Web開發(fā)人員，對于網(wǎng)頁表單可以說又愛又恨，愛的是它方便的收集、組織數(shù)據(jù)的功能，恨的是它的功能很大程度上也就僅此而已。一些在最終網(wǎng)站用戶看起來稀松平常的功能，比如說輸入類型檢查、表單校驗、錯誤提示等等，開發(fā)人員無不需要花費大量精力利用 JavaScript和DOM編程來滿足這些天然所需的功能點，而隨著Ajax的流行，出現(xiàn)的一些JavaScript的工具庫，比如Dojo, YUI等都提供了方便的JavaScript Widget或者API來減輕開發(fā)人員的負(fù)擔(dān)。
HTML5的表單新特性
HTML5 Web Forms 2.0是對目前Web表單的全面提升，它在保持了簡便易用的特性的同時，增加了許多內(nèi)置的控件或者控件屬性來滿足用戶的需求，并且同時減少了開發(fā)人員的編程。在我看來，HTML5 主要在以下幾個方面對目前的Web表單做了改進(jìn)：
- 新的控件類型
- 還在為類型檢查犯愁嗎，還在為那一長串看不太明白的檢驗輸入的正則表達(dá)式而苦惱嗎，HTML5提供的一系列新的控件將天然的具備類型檢查的功能。比如說URL輸入框，Email輸入框等。
<input type="url"></input>
<input type="email"></input>
- 當(dāng)然還有非常重要的日期輸入框，要知道使用JavaScript和CSS來“手工”制作一個日期輸入框還是非常花功夫的，類似Dojo，YUI這樣的類庫也無不在這個widget上面大做文章。
<input type="date"></input>
- 作為我痛苦記憶的一部分，我經(jīng)常記得我們開發(fā)人員要為一個select下拉別表動態(tài)的添加非常多的選項,這些選項大多數(shù)都是來自數(shù)據(jù)庫，比如說國家、省市列表等等。這個事情非常繁瑣。HTML5將支持data屬性，為select控件外聯(lián)數(shù)據(jù)源！
<select data="http://domain/getmyoptions"></select>
- 改進(jìn)的文件上傳控件，你可以使用一個控件上傳多個文件，自行規(guī)定上傳文件的類型（accept），你甚至可以設(shè)定每個文件最大的大小（maxlength）。你看出它和一般操作系統(tǒng)提供的文件上傳控件的區(qū)別了嗎，反正我覺得基本一致了。在HTML5應(yīng)用中，文件上傳控件將變得非常強(qiáng)大和易用。
- 重復(fù)（repeat）的模型，HTML5提供一套重復(fù)機(jī)制來幫助我們構(gòu)建一些重復(fù)輸入列表，其中包括一些諸如 add、remove、move-up，move-down的按鈕類型，通過這一套重復(fù)的機(jī)制，開發(fā)人員可以非常方便的實現(xiàn)我們經(jīng)常看到的編輯列表，這是一個很常見的模式，我們可以增加一個條目、刪除某個條目、或者移動某個條目等等。
- 內(nèi)建的表單校驗系統(tǒng)，HTML5為不同類型的輸入控件各自提供了新的屬性，來控制這些控件的輸入行為，比如我們常見的必填項required屬性，以及為數(shù)字類型控件提供的max、min等。而在你提交表單的時候，一旦校驗錯誤，瀏覽器將不執(zhí)行提交操作，而會顯示相應(yīng)的檢驗錯誤信息。
<input type="text" required></input>
<input type="number" min=10 max=100></input>
- XML Submission，我們一般常見的是form的編碼格式是application/x-www-form-urlencoded。開發(fā)人員都很清楚這種格式，數(shù)據(jù)送到服務(wù)器端，可以方便的存取。HTML5將提供一種新的數(shù)據(jù)格式：XML Submission，即application/x-www-form+xml。簡單的舉例說，服務(wù)器端將直接接收到XML形式的表單數(shù)據(jù)。
<submission>
<field name="name" index="0">Peter</field>
<field name="password" index="0">password</field>
</submission>
實例分析
我將利用HTML5新的表單系統(tǒng), 做一個簡單的用戶注冊的界面，包括用戶名，密碼，出生日期，保密問題等內(nèi)容，代碼如下：
<! 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標(biāo)準(zhǔn)仍然在開發(fā)中，不同的瀏覽器對HTML5特性的支持都相當(dāng)有限。其中Opera在表單方面支持得比較好，本實例在Opera9上運(yùn)行一切正常，效果圖如下：
這個實例運(yùn)用了一些HTML5的新的表單元素，比如email類型的輸入框(ID)，日期類型的輸入框(出生日期)。并且使用了重復(fù)模型來引導(dǎo)用戶填寫保密問題，而在個性頭像的上傳中，通過限制文件類型，方便用戶選擇圖片進(jìn)行合乎規(guī)范的內(nèi)容上傳。而用戶選擇國籍的下拉選擇輸入框中，采用的是外聯(lián)數(shù)據(jù)源的形式，外聯(lián)數(shù)據(jù)源使用coutries.xml，內(nèi)容如下：
<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的內(nèi)容將會以XML的形式提交。你還會發(fā)現(xiàn)，在ID輸入框如果沒有值，或者輸入了非email類型的字符串時，一旦試圖提交表單，就會有提示錯誤的信息出現(xiàn)，而這都是瀏覽器內(nèi)置的。
結(jié)語
HTML5對表單控件的更新，無疑是很振奮人心的。本文描述了一部分表單的新特性，還有一部分新特性同樣很令人期待。相信隨著標(biāo)準(zhǔn)的深入開發(fā)以及瀏覽器對HTML5支持程度的進(jìn)一步提升，設(shè)計一個簡單易用的表單的工作，將變得非常輕松。
參考資料
- W3C HTML5 規(guī)范： http://www.w3.org/TR/html5/
- HTML5 與 HTML4的差異：http://www.w3.org/TR/html5-diff/
- Opera dev: Improve your forms with HTML5： http://dev.opera.com/articles/view/improve-your-forms-using-html5/
- Comparison of layout engines（HTML5）：
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
關(guān)于作者
蔣博，主要從事Web前端技術(shù)的開發(fā)工作，在Web開發(fā)與性能分析以及敏捷實踐等領(lǐng)域有較豐富的經(jīng)驗。對HTML5的發(fā)展以及各種 JavaScript類庫有比較濃厚的興趣，經(jīng)常關(guān)注社交型的網(wǎng)站發(fā)展情況，平常喜歡聽音樂，看一些歷史類書籍。（本文僅代表個人觀點，與公司立場無關(guān)。）
給InfoQ中文站投稿或者參與內(nèi)容翻譯工作，請郵件至editors@cn.infoq.com。也歡迎大家加入到InfoQ中文站用戶討論組中與我們的編輯和其他讀者朋友交流。