在本教程中，我們將了解如何向現代瀏覽器提供 HTML5 表單，同時通過混合使用Webforms2、Modernizr、jQuery UI 和各種 jQuery 插件。
簡介
HTML5 支持的表單提供了大量語義標記，并且消除了對大量 JavaScript 的需求。
塊引用>
針對 HTML5 的第一個努力是 WHATWG 的 Web Forms 2.0，最初稱為 XForms Basic。該規范引入了新的表單控件和驗證等。后來，它被合并到 HTML5 中，并隨后刪除了重復模型，形成了我們今天所知的 HTML5 表單。
不幸的是，一直存在的向后兼容性問題仍然是一個令人頭痛的問題。開發人員必須面對可怕的 Internet Explorer，正如您可能已經猜到的那樣，它沒有為表單的最新進展提供太多支持 – 即使在 IE9 的最新可用測試版中也是如此。舊版本的 IE？ Fagetaboutit。
盡管如此，我們想要使用這些新功能，并且我們會使用它們！今天，我們將看看其中一些新元素。我們將檢查瀏覽器是否支持這些功能，如果不支持，則使用 CSS 和 JavaScript 提供后備。
工具：現代化工具
我們將僅向不支持 HTML5 表單或其某些部分的瀏覽器提供后備方案。但正確的技術不是依賴瀏覽器嗅探，而是使用特征檢測。我們將使用流行的 Modernizr 庫。
Modernizr 是一個小型 JavaScript 庫，用于針對大量 HTML5 和 CSS3 功能測試當前瀏覽器。
如果您想了解有關 Modernizr 的更多信息，您可以查看 Tuts+ Marketplace 上提供的“Modernizr 視頻速成課程”高級教程。
塊引用>
工具：Webforms2
Webforms2 是 Weston Ruter 的 JavaScript 庫，它提供了 HTML5 表單“先前”版本（即“WHATWG Web Forms 2.0”規范）的跨瀏覽器實現。
我們將使用它來驗證和擴展當前元素的功能。
<script type="text/javascript" src="webforms2/webforms2-p.js"></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 的滑塊將無法工作。請注意，我們從輸入中獲取屬性，例如
min、max和step、，然后將它們用作滑塊的參數。這有助于我們的后備滑塊在功能上模仿真正的 HTML5 滑塊。接下來，我們將使用 Modernizr 來確定當前瀏覽器是否支持此輸入類型。 Modernizr 將類添加到文檔元素 (
html)，允許您在樣式表中定位特定的瀏覽器功能。它還創建一個自標題的全局 JavaScript 對象，其中包含每個功能的屬性：如果瀏覽器支持它，則該屬性將計算為true，如果不支持，它將為false。有了這些知識，為了檢測對輸入類型的支持，我們將使用
Modernizr.inputtypes[type]。if( !Modernizr.inputtypes.range ){ $(document).ready( initSlider ); };登錄后復制
如果不支持范圍輸入，我們將
initSlider函數附加到 jQuery 的document.ready，以在頁面加載后初始化我們的函數。這就是滑塊在沒有對范圍輸入的本機支持的瀏覽器中的外觀。
小部件：數字微調器
引用馬克·皮爾格林的話：
詢問電話號碼比詢問電子郵件地址或網址更棘手。
這就是為什么我們提供了一個專門處理數字的單獨表單控件：數字微調器，也稱為數字步進器。
<input type="number" value="2">登錄后復制
在撰寫本文時，它受到 Opera 和基于 Webkit 的瀏覽器的支持；這是 Opera 10.6 的快照。
因為 jQuery 不提供數字微調器，所以我們將使用 Brant Burnett 的 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，因此我們從字段中獲取屬性，并將它們用作初始化數字微調器插件的參數。我們的后備小部件如下所示：
小部件：日期選擇器
至少有六種輸入類型可用作日期選擇器。
date
月
一周
時間
日期時間和
和本地日期時間在撰寫本文時，唯一正確支持它們的瀏覽器是 Opera 9+ 版本。
<input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="datetime"> <input type="datetime-local">登錄后復制
目前，我們將僅使用 jQuery UI Datepicker 為
date輸入提供后備。請隨意使用任何其他插件來完全模仿您的實現中的 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的支持。因此，在他們趕上之前，他們都需要使用我們的后備技術。<input type="color">登錄后復制
我們將使用 Stefan Petre 的 ColorPicker jQuery 插件，因為 jQuery UI 尚未提供基礎包。
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); };登錄后復制
我們的結果：
輸入類型：搜索
新的
search輸入類型隱式用于語義，但將來可以提供許多有趣的功能。<input type="search">登錄后復制
目前，只有基于 Webkit 的瀏覽器提供對此功能的支持。該規范還支持
results屬性以在下拉列表中顯示多個搜索術語。在 OS X 上的 Safari 上，它應該如下所示：
其余瀏覽器將其顯示為標準文本字段，因此您可以放心地將其與標準標記一起使用。
輸入類型：URL 和電子郵件
這兩種輸入類型
url和<input type="email"> <input type="url">登錄后復制
這些輸入類型可以通過Webforms2在其他瀏覽器中實現。
您可以在新項目中自由使用這些類型，因為它們會回退到簡單的文本框。在您的手機上，如果您向輸入提供這些類型，您會發現鍵盤會相應變化。
屬性：必填字段
新規范引入了非常方便的
requiredattribute。現在我們可以輕松地使用此屬性，而不是使用花哨的 JavaScript 來處理我們的必填字段。<input type="email" required>登錄后復制
對于不支持該屬性的瀏覽器，我們可以再次使用Webforms2。因此，由于我們從一開始就將其包含在內，因此無需擔心。
注意：請務必將 a
name屬性分配給您的表單元素，否則 required 屬性將不會生效。
屬性：模式
pattern屬性用于字段驗證，并且僅當值與使用正則表達式定義的特定格式匹配時才接受值。如果輸入的值與模式不匹配，表單將不會提交。例如，要驗證電話號碼，我們必須使用以下
pattern或正則表達式：<input type="text" name="Tel" pattern="^0[1-689][0-9]{8}$">登錄后復制
pattern屬性可以通過使用 Webforms2 在不支持它的瀏覽器中實現。
屬性：自動對焦
autofocusattribute 正如它所說：自動聚焦我們的控件之一。目前基于 Webkit 的瀏覽器（Safari、Chrome 等）和 Opera 支持它。請記住：只有一個表單控件可以接收此屬性。<input type="email" autofocus>登錄后復制
Webforms2 負責在不支持的瀏覽器中實現。
屬性：占位符
placeholder屬性是我們多年來一直使用 JavaScript 做的事情。它添加了有關該字段的一條信息，例如簡短的描述，當該字段獲得焦點時該信息就會消失。<input name="name" placeholder="First Name">登錄后復制
最新的 Beta Firefox 和 Webkit 瀏覽器支持此屬性。
為了模仿舊版瀏覽器中的行為，我們將使用 Viget 設計實驗室提供的 Placehold jQuery 插件。
var initPlaceholder = function() { $('input[placeholder]').placehold(); }; if(!Modernizr.input.placeholder){ $(document).ready(initPlaceholder); };登錄后復制
屬性：最小值、最大值和步長
min、max和step輸入屬性指定某些表單控件的約束，例如日期選擇器、數字和范圍。您肯定可以從min和max的名稱中猜出它們的用途。step屬性指定每次單擊或“步驟”的多個范圍。例如，如果步長值為 2，則可接受的值可以是 0、2、4 等。<input type="range" name="slider" min="0" max="20" step="5" value="0">登錄后復制
這些屬性目前僅受 Opera 和 Webkit 瀏覽器支持，并由 Webforms2 實現，作為其他瀏覽器的后備。
結論
今天我們了解到，創建表單并為大多數新添加的內容提供后備是一項相當簡單的任務。如果今天人們仍然試圖嚇唬您不要使用 HTML5，請不要理會他們；立即開始使用您可以使用的出色工具！
請務必查看 Zoltan“Du Lac”Hawryluk 出色的 html5Widgets，它提供了類似的解決方案以及本機 JavaScript 小部件。
進一步閱讀
您必須了解的 28 個 HTML5 功能、提示和技術
HTML5 和 CSS3：您很快就會使用的技術 /a>Mark Pilgrim 的 Dive Into HTML5 的“表單”部分
Mozilla 開發者中心的 HTML5 表單
W3C HTML5 表單規范工作草案
維基百科上布局引擎 (HTML5) 的比較以上就是創建可在不同瀏覽器上運行的 HTML5 表單的詳細內容，更多請關注www.92cms.cn其它相關文章！
