使用HTML5構建下一代的Web Form

作者：蔣博 2009-06-26 09:06:01

本文介紹使用HTML5構建下一代的Web Form，以及介紹HTML5的表單新特性和實例分析。

HTML語言作為如今編程最為廣泛的語言，具有易用、快捷、多瀏覽平臺兼容等特點，但是隨著時代的進步，HTML的標準卻停滯不前，這一次還在不斷開發中的HTML5標準的更新可以說給這門標記語言帶來了新的生命力。本文將著重討論HTML5中的Web Forms 2.0, 即表單的部分。

表單是網頁中常見的控件(集)。小到網站注冊登錄，大到一個企業的數據管理系統，都基本上有表單的身影。表單之所以如此重要，主要是因為它擔負大量的用戶和網頁后臺數據更新交互的任務。Web開發人員，對于網頁表單可以說又愛又恨，愛的是它方便的收集、組織數據的功能，恨的是它的功能很大程度上也就僅此而已。一些在最終網站用戶看起來稀松平常的功能，比如說輸入類型檢查、表單校驗、錯誤提示等等，開發人員無不需要花費大量精力利用 JavaScript和DOM編程來滿足這些天然所需的功能點，而隨著Ajax的流行，出現的一些JavaScript的工具庫，比如Dojo, YUI等都提供了方便的JavaScript Widget或者API來減輕開發人員的負擔。

HTML5的表單新特性

HTML5 Web Forms 2.0是對目前Web表單的全面提升，它在保持了簡便易用的特性的同時，增加了許多內置的控件或者控件屬性來滿足用戶的需求，并且同時減少了開發人員的編程。在我看來，HTML5 主要在以下幾個方面對目前的Web表單做了改進：

1.新的控件類型
◆還在為類型檢查犯愁嗎，還在為那一長串看不太明白的檢驗輸入的正則表達式而苦惱嗎，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>

2.改進的文件上傳控件，你可以使用一個控件上傳多個文件，自行規定上傳文件的類型（accept），你甚至可以設定每個文件最大的大小（maxlength）。你看出它和一般操作系統提供的文件上傳控件的區別了嗎，反正我覺得基本一致了。在HTML5應用中，文件上傳控件將變得非常強大和易用。

3.重復（repeat）的模型，HTML5提供一套重復機制來幫助我們構建一些重復輸入列表，其中包括一些諸如 add、remove、move-up，move-down的按鈕類型，通過這一套重復的機制，開發人員可以非常方便的實現我們經常看到的編輯列表，這是一個很常見的模式，我們可以增加一個條目、刪除某個條目、或者移動某個條目等等。

4.內建的表單校驗系統，HTML5為不同類型的輸入控件各自提供了新的屬性，來控制這些控件的輸入行為，比如我們常見的必填項required屬性，以及為數字類型控件提供的max、min等。而在你提交表單的時候，一旦校驗錯誤，瀏覽器將不執行提交操作，而會顯示相應的檢驗錯誤信息。

<input type="text" required>input> 
<input type="number" min=10  max=100>input>

5.XML Submission，我們一般常見的是Web Form的編碼格式是application/x-www-form-urlencoded。開發人員都很清楚這種格式，數據送到服務器端，可以方便的存取。HTML5提供一種新的數據格式：XML Submission，即application/x-www-form+xml。簡單的舉例說，服務器端將直接接收到XML形式的表單數據。

<submission> 
    <field name="name" index="0">Peterfield> 
    <field name="password" index="0">passwordfield> 
submission>

我將利用HTML5新的表單系統, 做一個簡單的用戶注冊的界面，包括用戶名，密碼，出生日期，保密問題等內容，代碼如下：

> 
<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的表單元素

這個實例運用了一些HTML5的新的表單元素，比如email類型的輸入框(ID)，日期類型的輸入框(出生日期)。并且使用了重復模型來引導用戶填寫保密問題，而在個性頭像的上傳中，通過限制文件類型，方便用戶選擇圖片進行合乎規范的內容上傳。而用戶選擇國籍的下拉選擇輸入框中，采用的是外聯數據源的形式，外聯數據源使用coutries.xml，內容如下：

<select xmlns="http://www.w3.org/1999/xhtml"> 
    <option>Chinaoption> 
    <option>Japanoption> 
    <option>Koreaoption> 
select>

并且form的enctype是application/x-www-form+xml，也就是HTML5的XML提交。所以一旦form校驗通過，form的內容將會以XML的形式提交。你還會發現，在ID輸入框如果沒有值，或者輸入了非email類型的字符串時，一旦試圖提交表單，就會有提示錯誤的信息出現，而這都是瀏覽器內置的。
結語

HTML5對表單控件的更新，無疑是很振奮人心的。本文描述了一部分表單的新特性，還有一部分新特性同樣很令人期待。相信隨著標準的深入開發以及瀏覽器對HTML5支持程度的進一步提升，設計一個簡單易用的表單的工作，將變得非常輕松。

【編輯推薦】

IBM演示下一代網絡技術初試HTML5
HTML5-不需要Flash插件的YouTube
Google將推出開發者社區改善Web性能
讓JavaScript拯救HTML5的離線存儲
Web3.0、關聯數據和語義網

責任編輯：佚名來源： infoq

HTML5 Web Form