HTML5之表單新功能詳解

轉自：http://www.yiiyaa.net/?p=1350

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支援程度的進一步提升，設計一個簡單易用的表單的工作，将變得非常輕松。