HTML5 是由 WHATWG (Web Hypertext Application Technology Working Group) 發(fā)起的，最開始的名稱叫做Web Application 1.0，而后這個(gè)標(biāo)準(zhǔn)吸納了Web Forms 2.0的標(biāo)準(zhǔn)，并一同被W3C組織所采用，合并成為下一代的HTML5標(biāo)準(zhǔn)。
前言
HTML語言作為如今編程最為廣泛的語言，具有易用、快捷、多瀏覽平臺(tái)兼容等特點(diǎn)，但是隨著時(shí)代的進(jìn)步，HTML的標(biāo)準(zhǔn)卻停滯不前，這一次還在不斷開發(fā)中的HTML5標(biāo)準(zhǔn)的更新可以說給這門標(biāo)記語言帶來了新的生命力。本文將著重討論HTML5中的Web Forms 2.0, 即表單的部分。
表單是網(wǎng)頁中常見的控件(集)。小到網(wǎng)站注冊登錄，大到一個(gè)企業(yè)的數(shù)據(jù)管理系統(tǒng)，都基本上有表單的身影。表單之所以如此重要，主要是因?yàn)樗鼡?dān)負(fù)大量的用戶和網(wǎng)頁后臺(tái)數(shù)據(jù)更新交互的任務(wù)。Web開發(fā)人員，對(duì)于網(wǎng)頁表單可以說又愛又恨，愛的是它方便的收集、組織數(shù)據(jù)的功能，恨的是它的功能很大程度上也就僅此而已。一些在最終網(wǎng)站用戶看起來稀松平常的功能，比如說輸入類型檢查、表單校驗(yàn)、錯(cuò)誤提示等等，開發(fā)人員無不需要花費(fèi)大量精力利用JavaScript和DOM編程來滿足這些天然所需的功能點(diǎn)，而隨著Ajax的流行，出現(xiàn)的一些JavaScript的工具庫，比如Dojo, YUI等都提供了方便的JavaScript Widget或者API來減輕開發(fā)人員的負(fù)擔(dān)。
HTML5 Web Forms 2.0是對(duì)目前Web表單的全面提升，它在保持了簡便易用的特性的同時(shí)，增加了許多內(nèi)置的控件或者控件屬性來滿足用戶的需求，并且同時(shí)減少了開發(fā)人員的編程。在我看來，HTML5 主要在以下幾個(gè)方面對(duì)目前的Web表單做了改進(jìn)：
<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新的表單系統(tǒng), 做一個(gè)簡單的用戶注冊的界面，包括用戶名，密碼，出生日期，保密問題等內(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(請(qǐng)使用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'>個(gè)性頭像</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ā)中，不同的瀏覽器對(duì)HTML5特性的支持都相當(dāng)有限。其中Opera在表單方面支持得比較好，本實(shí)例在Opera9上運(yùn)行一切正常，效果圖如下：
這個(gè)實(shí)例運(yùn)用了一些HTML5的新的表單元素，比如email類型的輸入框(ID)，日期類型的輸入框(出生日期)。并且使用了重復(fù)模型來引導(dǎo)用戶填寫保密問題，而在個(gè)性頭像的上傳中，通過限制文件類型，方便用戶選擇圖片進(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校驗(yàn)通過，form的內(nèi)容將會(huì)以XML的形式提交。你還會(huì)發(fā)現(xiàn)，在ID輸入框如果沒有值，或者輸入了非email類型的字符串時(shí)，一旦試圖提交表單，就會(huì)有提示錯(cuò)誤的信息出現(xiàn)，而這都是瀏覽器內(nèi)置的。
HTML5對(duì)表單控件的更新，無疑是很振奮人心的。本文描述了一部分表單的新特性，還有一部分新特性同樣很令人期待。相信隨著標(biāo)準(zhǔn)的深入開發(fā)以及瀏覽器對(duì)HTML5支持程度的進(jìn)一步提升，設(shè)計(jì)一個(gè)簡單易用的表單的工作，將變得非常輕松。
新聞熱點(diǎn)
疑難解答
