詳細介紹HTML5表單的新功能
HTML5 是下一代 Web 語言，它不單單是一種標記語言，更為下一代 Web 提供了全新功能，并將***下一代 Web 實現類似桌面的應用體驗。下面介紹HTML5表單的新功能。
HTML語言作為如今編程最為廣泛的語言，具有易用、快捷、多瀏覽平臺兼容等特點，但是隨著時代的進步，HTML的標準卻停滯不前，這一次還在不斷開發中的HTML5標準的更新可以說給這門標記語言帶來了新的生命力。
表單是網頁中常見的控件(集)。小到網站注冊登錄，大到一個企業的數據管理系統，都基本上有表單的身影。表單之所以如此重要，主要是因為它擔負大量的用戶和網頁后臺數據更新交互的任務。Web開發人員，對于網頁表單可以說又愛又恨，愛的是它方便的收集、組織數據的功能，恨的是它的功能很大程度上也就僅此而已。
一些在最終網站用戶看起來稀松平常的功能，比如說輸入類型檢查、表單校驗、錯誤提示等等，開發人員無不需要花費大量精力利用 JavaScript和DOM編程來滿足這些天然所需的功能點，而隨著Ajax的流行，出現的一些JavaScript的工具庫，比如Dojo， YUI等都提供了方便的JavaScript Widget或者API來減輕開發人員的負擔。
HTML5 Web Forms 2.0是對目前Web表單的全面提升，它在保持了簡便易用的特性的同時，增加了許多內置的控件或者控件屬性來滿足用戶的需求，并且同時減少了開發人員的編程。HTML5 主要在以下幾個方面對目前的Web表單做了改進：
一、表單結構更自由
XHTML中需要放在form之中的諸如input/button/select/textarea等標簽元素，在HTML 5中完全可以放在頁面任何位置，然后通過新增的form屬性指向元素所屬表單的ID值，即可關聯起來。
二、新的控件類型
1.email輸入類型：
- <input type="email" name="email"></input>
此類型要求輸入格式正確的email地址，否則瀏覽器是不允許提交的，并會有一個錯誤信息提示.此類型在Opera中必須指定name值，否則無效果.
2.url輸入類型：
- <input type="url" ></input>
上面代碼展示的文本域要求輸入格式正確的URL地址，Opera中會自動在開始處添加http://
3.日期時間相關輸入類型：
- <input type="date"></input>
- <input type="time"></input>
- <input type="month"></input>
- <input type="week"></input>
這一系列是很酷的一個類型，完全解決了煩瑣的JS日歷控件問題.但目前MS只有Opera/Chrome新版本支持，且展示效果也不一樣。
4.number輸入類型：
- <input type="number"></input>
此類型將顯示一個可拖動的滑塊條，并可通過設定max/min/step值限定拖動范圍.拖動時會反饋給value一個值。
5.search輸入類型：
- <input type="search"></input>
此類型表示輸入的將是一個搜索關鍵字，通過results=s可顯示一個搜索小圖標。
6.tel輸入類型：
- <input type="tel"></input>
此類型要求輸入一個電話號碼，但實際上它并沒有特殊的驗證，與text類型沒什么區別。
7.color輸入類型：
- <input type="color"></input>
此類型可讓用戶通過顏色選擇器選擇一個顏色值，并反饋到value中。
三、新的表單屬性
1.placeholder屬性
- <input type="text" placeholder="點擊我會以清除"></input>
這是一個很實用的屬性，免去了用JS去實現點擊清除表單初始值.瀏覽器支持也還不錯，MS除了Firefox，其他標準瀏覽器都能很好的支持.
2.require/pattern屬性
- <input type="text" name="require" required=""></input>
- <input type="text" name="require1" required="required"></input>
- <input type="text" name="require2" pattern="^[1-9]\d{5}$"></input>
表單驗證屬性，require類型時，若輸入值為空，則拒絕提交，并會有一個提示.上面兩種寫法都對，這個很有用.并且可以用于textarea以及hidden/image/submit類型.pattern類型為正則驗證，可以完成各種復雜的驗證.這兩種類型在Opera中必須指定name值，否則無效果。
3.autofocus屬性
- <input type="text" autofocus="true"></input>
默認聚焦屬性，可在頁面加載時聚焦到一個表單控件，類似于JS的focus()。
4.list屬性
- <input type="text" list="ilist">
- <datalist id="ilist">
- <option label="a" value="a"></option>
- <option label="b" value="b"></option>
- <option label="c" value="c"></option>
- </datalist>
- </input>
該屬性需要與datalist屬性共用，datalist是對選擇框的記憶，而list屬性可以為選擇框自定義記憶的內容。
5.max/min/step屬性：
- <input type="range" max="100" min="1" step="20">
限制值的輸入范圍，以及值的輸入漸進程度，比如可在number設定輸入***值最小值，或者在range中設定拖動階梯。
6.autocomplete屬性：
- <input type="text" autocomplete="on">
此屬性是為表單提供自動完成功能.如果該屬性為打開狀態可很好地自動完成.一般來說，此屬性必須啟動瀏覽器的自動完成功能.
7.data屬性：
- <select data="http://domain/getmyoptions"></select>
要為一個select下拉別表動態的添加非常多的選項，這些選項大多數都是來自數據庫，比如說國家、省市列表等等。這個事情非常繁瑣。HTML5將支持data屬性，為select控件外聯數據源！
8.XML Submission編碼格式
我們一般常見的是Web Form的編碼格式是application/x-www-form-urlencoded。開發人員都很清楚這種格式，數據送到服務器端，可以方便的存取。HTML5提供一種新的數據格式：XML Submission，即application/x-www-form+xml。簡單的舉例說，服務器端將直接接收到XML形式的表單數據。
HTML5對表單控件的更新，無疑是很振奮人心的。相信隨著標準的深入開發以及瀏覽器對HTML5支持程度的進一步提升，設計一個簡單易用的表單的工作，將變得非常輕松。
本文地址：http://www.yiiyaa.net/1350
【編輯推薦】
