原文：[http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/](http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/) 作者：[Cristian Colceriu](http://net.tutsplus.com/author/cristiancolceriu/ "Posts by Cristian Colceriu") 譯者：蔣宇捷（http://blog.csdn.net/hfahe） 轉載請標明 友情提示：本文難度為中等，閱讀完需要1小時左右，理解需要一定的基礎。  [下載源文件](http://nettuts.s3.amazonaws.com/881_html5Forms/demo.zip) [在線示例](http://nettuts.s3.amazonaws.com/881_html5Forms/demo/demo.html) ????? 在此教程里，我們將要討論如何在現代瀏覽器里創建HTML5表單，并在老式的瀏覽器里使用[Webforms2](http://code.google.com/p/webforms2/),?[Modernizr](http://www.modernizr.com/),?[jQuery UI](http://jqueryui.com/)和多種jQuery插件實現同樣的效果。 **Introduction** **介紹** HTML5**增強了表單，提供了大量的語義化標記，不再需要大量**Javascript**的支持。** ? ??表單向HTML5發展的第一個努力是WHATWG（***Web Hypertext Application TechnologyWorking Group***）的網絡化表單2.0，最初叫做XForms Basic。規格引入了新的表單控制和驗證，以及其他特性。稍后，它將表單添加到HTML5中；再晚一些將重復模型剝離出來，就產生了我們今天所熟知的HTML5表單。 ????? 經常存在的問題是，很不幸，兼容性還是非常讓人頭疼。開發者需要必須要處理恐怖的IE，正如你可能預料到的一樣，還不提供表單最新特性的支持-即便在IE9最新的beta版本中。IE的老版本？忘記它們吧！雖然這樣，我們如何想要使用這些新的特性，我們可以做到。現在，我們將要開始看看這里面一些新的元素。我們將要檢查是否瀏覽器支持這些特性，如果不支持，通過CSS和Javascript來實現。 **工具：**Modernizer ? ??當瀏覽器不支持HTML5表單或者一部分特性時，我們將會提供替代方案。和檢測瀏覽器的方式相比，更合適的技術是使用特性檢測。我們將會使用當前流行的[Modernizr](http://www.modernizr.com/)庫。 ????? Modernizr是一個小型的Javascript庫，檢測當前瀏覽器支持HTML5和CSS3的哪些特性。 ?????? **如果你想要更多的了解**Modernizr**，你可以在**Tuts+**商店中觀看“*[*一個**Modernizr**速成班視頻*](http://net.tutsplus.com/tutorials/javascript-ajax/2-new-premium-tutorials-refinery-and-modernizr/)*”的高級教程。** **工具：**Webforms2 ????? [Webforms2](http://code.google.com/p/webforms2/)是?[Weston Ruter](http://weston.ruter.net/)開發的一個Javascript庫，提供HTML5表單之前的版本-“WHATWG 網絡表單 2.0″規格的跨瀏覽器實現。 ????? 我們將使用它來為當前元素創建驗證和擴展功能。 ~~~ <mce:script type="text/javascript" src="webforms2/webforms2-p.js" mce_src="webforms2/webforms2-p.js"></mce:script>? ~~~ **微件：拖動條** ????? 規格定義了范圍輸入標簽是一個非精確的控制器，用于通過數字的表現將元素的值設置為字符串。 <input type="range" name="slider"> ??? ????? 這是在Opera 10.63版本下的預覽效果：  ????? 為提供其他瀏覽器的支持，我們將使用JQuery UI的拖動條微件。首先，我們將要創建初始化方法，以從范圍輸入標簽創建拖動條。 ~~~ var initSlider = function() { $('input[type=range]').each(function() { var $input = $(this); var $slider = $('<div id="' + $input.attr('id') + '" class="' + $input.attr('class') + '"></div>'); var step = $input.attr('step'); $input.after($slider).hide(); $slider.slider({ min: $input.attr('min'), max: $input.attr('max'), step: $input.attr('step'), change: function(e, ui) { $(this).val(ui.value); } }); });};? ~~~ ????? 我們為每一個范圍輸入標簽創建一個新的<div>元素，同時在節點上調用拖動條。這是因為jQuery UI的拖動條不支持通過input標簽的直接調用。 ?????? **請注意我們將要從**input**標簽中獲取屬性，例如**min**、**max**和**step**，然后使用它們作為拖動條的參數。這將幫助我們在功能上模仿真正**HTML5**的拖動條實現。** ????? 然后，我們使用Modernizr來檢測當前瀏覽器是否支持這種輸入類型。Modernizr為當前文檔元素（html標簽）添加類，允許你在樣式表中實現特定瀏覽器的功能。它還將創建一個自己命名的Javascript全局對象，包含了每個特性的相關屬性：如果瀏覽器支持這個特性，屬性值為真，否則為假。 ????? 利用這個方式，要檢測input類型的支持，我們將使用?Modernizr.inputtypes[type]。 ~~~ if( !Modernizr.inputtypes.range ){ $(document).ready( initSlider );};? ~~~ ????? 如果不支持和范圍輸入標簽，我們將initSlider?方法綁定到jQuery’s?document.ready方法上，使頁面加載后初始化我們的方法。這就是拖動條在瀏覽器里看起來就像原生支持一樣。  **微件：數字微調控件** ? ??引用[Mark Pilgrim](http://diveintohtml5.org/)的話： ??????**比起郵箱地址和網址，詢問一個數字更為聰明。** ????? 這就是為什么我們提供一個單獨的表單控制器，用于明確的處理數字：數字微調控件，也被稱為數字調節器。 <input type="number" value="2"> ? ????? 這個標簽被Opera和Webkit內核的瀏覽器支持，這是在Opera 10.6版本下的樣子：  ????? 因為jQuery并不提供數字微調控件，我們將使用一個[Brant Burnett](http://btburnett.com/)開發的jQuery插件，作為一個jQuery UI的微件展現。 ????? 我們通過類似于之前的方式實現：使用一個方法創建微調器，在Modernizr中檢測，然后將此方法綁定到$(document).ready方法。 ~~~ var initSpinner = function() { $('input[type=number]').each(function() { var $input = $(this); $input.spinner({ min: $input.attr('min'), max: $input.attr('max'), step: $input.attr('step') }); });};if(!Modernizr.inputtypes.number){ $(document).ready(initSpinner);};? ~~~ ????? 因為數字輸入標簽同樣支持min、max和step屬性，我們從域中獲得屬性，并作為初始化數字微調器插件的參數。我們兼容性的微件看起來相似這樣：  **微件：日期選擇器** ????? 要實現日期選擇器不可能使用比6個更少的輸入框。 - 日期date - 月份month - 周week - 時間time - 時間datetime - 本地時間datetime ????? 而在寫這篇文章時，唯一支持這些標簽的只有Opera 9以上的版本。 ~~~ <input type="date"><input type="month"><input type="week"><input type="time"><input type="datetime"><input type="datetime-local"> ? ~~~ ????? 既然如此，我們只能用jQuery UI日期選擇器為日期輸入提供兼容性方案。請放心的使用其他插件來完全模擬HTML5日期輸入選擇器。 ~~~ var initDatepicker = function() { $('input[type=date]').each(function() { var $input = $(this); $input.datepicker({ minDate: $input.attr('min'), maxDate: $input.attr('max'), dateFormat: 'yy-mm-dd' }); });};if(!Modernizr.inputtypes.date){ $(document).ready(initDatepicker);};? ~~~  **微件：取色器** ????? 現在，沒有瀏覽器提供取色器的支持。所以，直到他們完成這部分工作之前，我們都需要提供兼容性方案。 <input type="color">? ????? 因為jQuery UI并沒有在基本庫里面實現取色器，我們將使用[StefanPetre](http://www.eyecon.ro/)的[jQuery取色器插件](http://www.eyecon.ro/colorpicker/)。 ~~~ var initColorpicker = function() { $('input[type=color]').each(function() { var $input = $(this); $input.ColorPicker({ onSubmit: function(hsb, hex, rgb, el) { $(el).val(hex); $(el).ColorPickerHide(); } }); });};if(!Modernizr.inputtypes.color){ $(document).ready(initColorpicker);};? ~~~ ? ??效果如下：  **輸入類型：搜索** ????? 新的搜索輸入類型已經在語義中偷偷的提供了支持，并會在以后提供許多有趣的功能。 <input type="search">? ????? 現在，只有Webkit內核的瀏覽器支持這種特性。規范中也支持results屬性，用于在下拉列表中顯示一些搜索歷史項。在OS X系統的Safari中看起來效果如下： ?????  ????? 這個標簽在其他的瀏覽器中顯示為一個標準的文本輸入框，所以你可以放心的使用它。 **輸入類型：**URL**和電子郵箱** ????? 有兩種用于驗證輸入的類型：URL和電子郵箱。它們在移動設備上相當有用，因為屏幕上的鍵盤布局可能是會自適應視野區域的。它們在iOS（iPhone、iPad、iPod）上的Safari和Android上已經得到了支持。 <input type="email"><input type="url">? ????? 這些輸入類型可以通過Webforms2在其他瀏覽器里面實現。 ?????? **你可以放心的在你的新項目中使用這些類型，因為不兼容的情況下，它們將回退為簡單的輸入框。在手機上，如果你為輸入提供這些類型，鍵盤將會自動轉換。** **輸入類型：必填項** ????? 新的規范介紹了非常便利的required屬性。比起使用專門的Javascript來驗證必填的項目，我們現在可以很容易的完成這個工作。 <input type="email" required>? ????? 對于不支持這個屬性的瀏覽器，我們還是可以使用Webforms2。所以在我們一開始就包含Webforms2后，什么都可以不用考慮了。 ????? 注意：確保為表單元素指定了name屬性，否則required屬性將不會生效。 **屬性：模式** ????? Pattern屬性使用[正則表達式](http://en.wikipedia.org/wiki/Regular_expressions)驗證輸入值，確保它們符合特定的格式。如果輸入值不符合條件，表單將不能提交。 ????? 例如，要驗證一個電話號碼，我們可以使用如下模式或者正則表達式： <input type="text" name="Tel" pattern="^0[1-689][0-9]{8}$">? ????? Pattern屬性可以使用Webforms2在各種瀏覽器上實現。 **屬性：自動設置焦點** ????? Autofocus屬性正如其名：為控件自動設置焦點。現在已經被Webkit內核瀏覽器（Safari、Chrome等）和Opera所支持。記住：同時只有一個表單控件可以應用這個屬性。 <input type="email" autofocus>? ????? Webform2為不支持的瀏覽器提供了實現。 **屬性：占位符** ????? 我們之前用Javascript來實現占位符屬性也有些年頭了。它為輸入域添加了一小段信息，就是一個很短的描述，在輸入域獲得焦點后就消失了。 <input name="name" placeholder="First Name">? ????? 這個屬性在最新版的Firefox測試版和Webkit內核瀏覽器中得到了支持。我們使用[Viget’s DesignLab](http://www.viget.com/inspire/)的[jQuery Placehold](http://www.viget.com/inspire/a-jquery-placeholder-enabling-plugin/)插件為其他瀏覽器提供支持。 ~~~ var initPlaceholder = function() { $('input[placeholder]').placehold();};if(!Modernizr.input.placeholder){ $(document).ready(initPlaceholder);};? ~~~ **屬性：最大、最小和步長** ????? Min、max和step輸入屬性為確定的表單空間指定約束，例如日期選擇器、數字和范圍輸入框。你可以從min和max的命名中猜到它們的作用。Step屬性指定每一次點擊，或者叫做每一步的輸入倍數。例如，如果step值是2，可以接受的值將會是0、2、4… <input type="range" name="slider" min="0" max="20" step="5" value="0">? ????? 這個屬性目前僅被Opera和Webkit內核瀏覽器支持。通過Webforms2可以支持瀏覽器。 **總結** ????? 我們今天學習了創建HTML5表單，并為絕大多數特性提供了兼容性方案。如果有人到今天還在為你使用HTML5表單感到恐懼的話，不要再理會他們，按照你自己的安排來開始使用這些強大的工具。 ????? 確保你已經看過[Zoltan](http://www.useragentman.com/blog/)偉大的[HTML5微件](http://www.useragentman.com/blog/2010/07/27/cross-browser-html5-forms-using-modernizr-webforms2-and-html5widgets/)，通過本地Javascript文件提供了的解決方案。例如取色器所支持的效果如下圖所示：