HTML5 表單新特性：等待了12年之久，我們迎來了HTML5主要修訂版本。雖然此版本仍處于測試階段并且沒有宣布正式推出的日期，HTML5的網(wǎng)頁設計師和程序員已經(jīng)就開始關注，并對最新功能展開了熱烈討論。

HTML5新特性的目的是改善嵌入，比如視頻和音頻等多媒體的支持，為開發(fā)者和終端用戶供簡單的編程和更好的用戶體驗。現(xiàn)在互聯(lián)網(wǎng)世界都在等待，瀏覽器更新時能支持HTML5的新版本。HTML5已經(jīng)被很多瀏覽器支持，比如Safari, Chrome, FireFox, Opera, IE9，它是向后兼容的，但是現(xiàn)在的瀏覽器不能完全兼容HTML5。

網(wǎng)站升級到HTML5是相當容易的，因為它兼容HTML4。你只需要修改你的DOCTYPE。這種新的更新有助于讓事情變得簡單，所以你現(xiàn)在就可以更新你所有的網(wǎng)站，它們不會崩潰，因為所有HTML4的標簽在HTML5還是100％支持的。
HTML5的表單定義了十幾個新的輸入類型和特性，這些新增元素可以讓程序員更加簡單的進行編程。下面我們就來講講這些新的特性。

一、輸入框占位符

HTML4中開發(fā)人員都使用JavaScript和jQuery做輸入框占位符，而在HTML5中，開發(fā)人員可以非常容易的顯示一個占位符。什么是占位符？占位符就是出現(xiàn)在輸入框的提示文本，當你點擊輸入欄位，它就自動消失。你可以把用戶應該輸入的文本樣例在文本框提示出來。不如，有一個E-mail輸入框，你可以設置占位符XXX@XXX.COM，點擊它們時就會消失。

IE      FF     Safari     Chrome   Opera     iphone   Android

-      3.7+      4+         4+          11+       4+             -

二、自動焦點事件

HTML5只要加載一個網(wǎng)頁，網(wǎng)頁自動將焦點移到特定的輸入框，和JavaScript一樣。區(qū)別是什么？由于現(xiàn)在只是一個HTML標記，用戶可以很容易地在他們的瀏覽器禁用此屬性。并非所有瀏覽器都支持自動對焦功能，但瀏覽器不只是簡單地忽略該屬性。如果你想所有瀏覽器都行得通，只需添加新的HTML5自動對焦屬性，然后檢測瀏覽器是否支持自動對焦。如果可以就不必使用自動對焦的腳本，如果沒有的話，就要添加自動對焦的腳本。      

FF   IE     Safari   Chrome  Opera   iphone  Android

-    4+       4+     3+         10+         -             -    

三、HTML 新定義的輸入類型

1、電子郵件

我要說的第一個輸入框是電子郵件地址。那些不支持新類型的舊版瀏覽器也只是把它們看作一個文本框，99%的用戶不會注意到這個變化，直到他們提交表單（此時會有表單驗證）。

2、網(wǎng)址

再說說網(wǎng)址輸入框。如果需要輸入網(wǎng)址，期望輸入的就像http://www.survivalescaperooms.com。現(xiàn)在在網(wǎng)址類型輸入框會出現(xiàn)像iPhone里面一樣的一個可變化的虛擬鍵盤用戶可以很方便輸入斜線和.com。同樣的，在提交表單之前用戶對這些毫不知情。

3、數(shù)字

HTML4要得到匹配的數(shù)字，就得使用jquery腳本來幫助驗證。HTML5增加了數(shù)字類型。還增加了一些額外的屬性（可選）：Min：指定輸入框可接受的最小輸入數(shù)字。Max：就是允許輸入的最大數(shù)字。 Step:屬性輸入域合法的間隔 ，默認是1.

如上圖，只允許輸入數(shù)字（大多數(shù)情況下不會注意到這些，直到提交的時候提示錯誤），只有0，2，4合法（6不合法因為step是10，合法的是0，10，20..）。

4、數(shù)字滑動條

HTML5允許你使用一個新的類型叫range，輸入框變成一個滑動條。你的網(wǎng)站表單可以使用滑動條了，它的屬性標記和數(shù)字類型一樣，只是把類型設置type='number'改成type='range'。

5、日歷表

迄今為止最好的新增元素，名為date和datetime的日期選擇器類型（還有其他額外的date/time類型，如時間，星期，月份，以及本地日歷）。 很多JavaScript框架如jQuery UI和YIU已經(jīng)具備了這些控件，但增加一個日歷選擇器還是挺煩人的。 HTML5定義一個新的本地日期選擇器，不必包括使用頁面上的腳本。截至目前，Opera是一個唯一完全支持此功能的，對于其他瀏覽器，你可以做一個備用腳本以備該瀏覽器不支持。不過，最終，所有的瀏覽器都會更新的。

6、搜索

HTML5增加了搜索輸入框類型。這沒什么，但對一些用戶來說是很好的變化。它可以簡單的把輸入框自動圓邊，當你開始輸入時，它右邊會有一個小X。目前并不是所有的瀏覽器支持。

7、顏色

HTML5還定義類型的顏色，它可以讓你選擇一種顏色，返回hexademical值。Opera11是唯一支持這種類型的瀏覽器。不過應該不會有很多人使用這個類型，所以不支持也不是什么大問題。

8、表單驗證

最令人興奮的新特性莫過于表單驗證。大多數(shù)開發(fā)人員都做了表單驗證，無論是客戶端或服務器端。也許HTML5的表單驗證器可能無法取代你的服務器端驗證，但它肯定能最終取代你的客戶端驗證。 JavaScript驗證的問題是，用戶很容易繞過它，可以很容易繞過它只需禁用JavaScript。現(xiàn)在HTML5，你不用有此擔心，錯誤都是HTML5原生提示的，未使用JavaScript。

IE    FF    Safari   Chrome    Opera    Iphone  Andriod

-    4+      5+       10+          9+            -           -

9、必需字段

HTML5的表單驗證并不僅僅局限于驗證字段的類型，它還允許調(diào)用一個新的額外的標記，required。這個新屬性允許開發(fā)人員驗證輸入框是否填寫，無需使用JavaScript。

總結(jié):上面這些更新對縮短開發(fā)周期和增強的用戶體驗都是至關重要。一旦所有的瀏覽器接受了HTML5，新一代的網(wǎng)站將超過任何人的期望。HTML5不是什么麻煩，它將大大有助于開發(fā)者，提高用戶體驗度。