• 發行項

本文章是由機器翻譯。

建置 HTML5 向

以 HTML5 表單建立更完善的的 Web 表單

Brandon Satrom

下載程式碼範例

如果您是網頁開發人員，您可能已經建立 HTML 表單之前。事實上，您可能建立多個生日比您想要記住。您一定很熟悉傳統輸入型別就像文字、 密碼、 檔案、 隱藏、 核取方塊、 選項、 送出，然後] 按鈕，而且您可能使用大部分或所有不同時間的任何部份。

如果我要求您輸入何種類型-從上述清單，您使用多個其他，您可能會說 「 文字 」 一樣大多數人。文字輸入型別是傳統的 HTML 表單開發的 multitool。一方面，它就能夠適應您不妨做的話，幾乎任何工作，但是另一方面，它是中性的語意不相同，因此瀏覽器提供了在將這個項目轉換成實際的項目沒有說明。若要補償，開發人員和設計這些項目 (透過 Id 和類別名稱) 中加入自己的語意，需要依賴伺服器架構和 javascript 還可以處理驗證，並加入豐富的互動。

典型的範例收集在文字欄位之中的日期。[日期] 大多數情況下，您想要以增強欄位中使用某種類型的日期選擇器。通常這是與手上顯型 JavaScript 或像是 jQuery UI，而這增加可讓使用者從 widget 選取一個日期，並填入到原始欄位到該日期的互動行為的架構。

該模式是非常的有用-我們已經變得相當適合身為開發人員，就像這樣的模式和-重複經常無法協助但問，"為什麼不能瀏覽器立刻採取行動吧? 」

好消息是使用 HTML5 表單中，瀏覽器可以-而且會。除了文字和現有型別，我們發現多年來很多，HTML5 會新增 13 的輸入型別屬性，以及許多其他屬性，將會加速您的表單開發的新值。這個月，我會共用部分新輸入的型別與來自 HTML5 的表單，以及它們的實作狀態，在各種瀏覽器中的屬性。接下來，我將提供新的用戶端驗證功能的快速總覽，HTML5 表單。最後，我將介紹如何最新的更新看 Visual Studio 2010年和 Microsoft。NET Framework 4 啟用 HTML5 表單和 ASP。NET 網頁會形成播放密切合作。最新動態，我將討論如何您可以運用 HTML5 表單在應用程式中今日，同時提供舊瀏覽器的後援的解決方案。本篇文章示範各種-這可從線上--使用 WebMatrix，免費、 輕量級 Web 開發工具從 Microsoft 所建置。您可以嘗試 WebMatrix，為您自己在 aka.ms/webm。

在 HTML5 中新的輸入型別

什麼我們目前知道以 HTML5 形式或 HTML5 的 Web 表單啟動 Web 表單 2.0 中，由一組稱為 Web 超文字的應用程式技術工作群組或 WHATWG 所撰寫的 p e HTML5 規格。大部分的 WHATWG 的初始工作變得我們現在所謂 HTML5，起始點，Web 表單 2.0 投入比現在您可以讀取在正式 HTML5 規格的一部分 bit.ly/njrWvZ。規格中重要的部分專門用於新的型別和內容屬性輸入的項目，您會發現在 bit.ly/pEdWFs。

規格前面提過，介紹 13 使用於表單中新的輸入的類型: 搜尋時，電話、 url、 電子郵件、 日期時間、 日期、 月份、 週、 時間、 日期時間本機、 數字，範圍色彩。

使用這些新的型別非常簡單。假設我想要將新的 [電子郵件] 的 [訂單] 欄位放在表單。您可以看到在圖 1，我已經修改了一些額外的欄位，包括電子郵件與 WebMatrix 由於這家蛋糕店範本網站的 [順序] 頁面。


圖 1 範例訂購單

這種形式，電子郵件] 欄位會標示為最多就像這樣：

<input type="email" id="orderEmail" />

請注意 type 屬性等於"email"代替"text"。新的 HTML 輸入型別有關棒的是今天使用，以及它們在某些層級，在每一個單一的瀏覽器中運作。當瀏覽器遇到其中一項新的型別時，會發生下列任一步驟。

如果瀏覽器不支援新的輸入型別，則不會辨識型別宣告。在此情況下，瀏覽器會依正常程序會降低並視為項目類型 ="text"。您可以將這個項目放在表單上，並 Internet Explorer 9 F12 工具主控台輸入"document.getElementById('orderEmail').type"來這麼做。因此，您可以使用這些新的型別，而如果瀏覽器不支援指定的欄位，它仍可正常運作，就像一般文字欄位。

如果瀏覽器不會辨識型別，然而，您就可以藉某些即時的優點使用它。對於可辨認的型別，瀏覽器會新增一些特定型別的內建的行為。電子郵件的情況下輸入時，Internet 總管 10 平台預覽 2 (PP2) 和稍後將自動驗證任何輸入，並使用者呈現錯誤訊息如果提供的值不是有效的電子郵件地址中所示圖 2。


[圖 2 的電子郵件的 [輸入] 類型的自動瀏覽器驗證

很容易地推斷的目的和其型別，每個元素的行為，因此我們在表單中，輕易地取得語意的豐富功能的另一個層級。此外，某些這些新的輸入型別可讓瀏覽器現成的使用者提供更豐富的互動。比方說，如果我置於表單中的下列項目，然後在瀏覽器完全支援日期輸入型別中開啟該表單就比一般的舊文字方塊更豐富的預設互動：

<input type="date" id="deliveryDate" />

圖 3 型別可提供在 [作業] 11.5 中會顯示。 的日期棒的是我只想要取得此互動是指定類型 = 「 日期 」，瀏覽器花了我先前必須做 javascript 還可以提供這種等級的功能中的所有手動作業處理。


[圖 3 在 [作業] 11.5 日期輸入型別

請務必注意 HTML5 規格並不會呈現瀏覽器應該如何進行聽寫這些新的型別，或輸入方式應該面臨驗證錯誤，所以您可以預期看到微妙的瀏覽器之間的主要差異。中所示，色彩 13 比方說，會微調控制項呈現的日期，而不是日期選擇器， 圖 4 (，不用多說，可能已經變更時您閱讀本文)。此外，您還應該知道沒有進行中的討論區中 「 全球資訊網協會 」，或瀏覽器樣式設定和當地語系化的日期時間，例如項目周圍的 W3C，日期和色彩。。瀏覽器不所有同意，請在出現，如何實作這些型別，並沒有目前的自訂機制內 
existing 實作類似您會發現與 UI。 jQuery您可以選擇實作，或嘗試使用這些新的型別，永遠是確定提供完整的後援解決方案。此外，如果對使用者很重要的呈現方式和行為的一致性，您可能要套用自訂樣式、 覆寫預設行為，這些控制項或使用指令碼為基礎的解決方案。


圖 4 所日期輸入型別，在 [色彩 13

我稍早所述這些欄位仍會為一般文字欄位，這是很棒的一種瀏覽器會提供對我們的非失誤性降低。但實作為純文字] 的 [日期] 方塊中的欄位是笨重，並廣泛地視為缺少使用者體驗。使用 Modernizr 和 jQuery UI 同伴的協助，不過，您可以提供不錯的後援解決與混合的 HTML5 表單的最佳的解決方案。

您記得我上一篇文章從 (msdn.microsoft.com/magazine/hh394148) 的 Modernizr (modernizr.com) 是 JavaScript 文件庫，可協助您偵測瀏覽器中的 HTML5 功能的支援。這個範例中，我要使用 Modernizr 來協助偵測 HTML5 日期的輸入類型的支援，與不受支援，如果使用 jQuery UI (jqueryui.com)，以提供相似的使用者經驗的日期 widget。我已下載，並將參考加入 Modernizr、 jquery 也和 jQuery UI，我可以新增 「 我的日期項目，在短短幾行程式碼後援的支援：。

if (!Modernizr.inputtypes.date) {
  $("input[type=date]").datepicker();
}

結果，如下所示，在 Internet Explorer 10 PP2，描繪於圖 5。


[圖 5 日期欄位支援 jQuery UI

輸入內容中的新屬性 HTML5

除了新的輸入型別，HTML5 還提供一些好用的內容新屬性可以在輸入欄位上用來提供驗證支援和增強的功能。這些新的屬性之一是 「 預留位置 」，其中，根據規格中，"…represents 短提示 (單字或片語) 用來幫助使用者與資料輸入 」 (強調屬於他們的東西)。比方說，我可以從我們的訂購單採取數個欄位，並將保留位置新增 ="文字" 對每個欄位，這樣會顯示在圖 6：

<input type="email" id="orderEmail" placeholder="ex.
name@domain.com" />
<input type="url" id="orderWebsite" placeholder="ex.
http://www.domain.com" />


[圖 6 輸入欄位中使用的版面配置區屬性

預留位置文字是以彩色比一般的文字，更亮，我將焦點放在每個欄位時，如果文字都不見了，好讓我 
enter，我自己的值。

與新輸入的型別，如版面配置區支援的屬性不是在較舊的瀏覽器中。錯誤會發生在使用者造訪網頁使用方式、 執行任何動作，所以考慮使用它們今日，即使您不能加入較舊的瀏覽器的支援。如果您想要"polyfill"的版面配置區支援，可以幫助 Modernizr。如同我在我上一篇文章所提到的好 Modernizr 傢伙嘗試使每個 polyfill 的執行清單，而且後援無法可能想指定的 [HTML5] 功能。您可以取出該清單中，在 bit.ly/nZW85d。

這個範例中，我們將使用 HTML5 版面配置區建立的 jQuery Mike Taylor，您可以從下載的 bit.ly/pp9V4s。一旦您完成後，將下列加入您的網頁所參考的指令碼區塊：

Modernizr.load({
    test: Modernizr.input.placeholder,
    nope: "../js/html5placeholder.jquery.min.js",
    callback: function() {
      $('input[placeholder]').placeholder();
    }
  });

在這裡，Modernizr 會測試是否版面配置區屬性支援，而且如果沒有，請載入 html5placeholder.jquery.min.js。 jQuery 然後選取每個屬性值的元素版面配置區，並加入每個外掛程式的支援。 如果您試試看 Internet Explorer 9 中，您會注意到最後的結果看起來非常類似於 Internet Explorer 10 PP2 中所提供的原生的瀏覽器支援。

另一個有趣的新屬性為"autofocus"它的確，可讓您指定要載入網頁時，自動接收焦點的單一表單欄位。 只有一個欄位，每一頁應該保留這個屬性。如果多個項目以 autofocus 標示，與該宣告的第一個可以得到把重點放在頁面載入。 [名稱] 我的訂單表單中，我想要接收焦點，因此我將這個屬性的欄位就像這樣：

<input type="text" class="field" id="orderName" autofocus />

Autofocus 屬性可以用在任何表單控制項，且未許多 Web 開發人員在過去，有英勇與指令碼架構的表單為主的策略一個絕佳替代方式。

HTML5 表單驗證

我足夠的篇幅來涵蓋所有的有趣新表單相關屬性，但我會花幾分鐘的時間，說 「 必要，「 模式 」，"novalidate"和"formnovalidate，「 全部都可以讓用戶端表單驗證嵌入式管理單元。。

支援的瀏覽器，「 必要 」 的屬性會告訴瀏覽器無法在不含值送出此表單。 比方說，我加入 「 必要 」 的 [我的訂購表單的 [名稱] 欄位：

<input type="text" class="field" id="orderName" required />

當我瀏覽本頁中 Internet Explorer 10 PP2，並嘗試送出表單時，我會看到類似] 所示圖 7。使用單一屬性，瀏覽器會知道足以樣式的項目以紅色框線，並顯示訊息，指出欄位必要的使用者。


[圖 7 必要的屬性欄位上使用表單

更早版本， 圖 2 顯示 「 瀏覽器，可以如何自動驗證，請在某些型別，例如 「 電子郵件 」 和 「 url 」，而不需另外輸入的使用者。以 「 模式 」 屬性，您可以輸入型別提供您自己的驗證測試。根據 「 HTML5 」 規格來 「 模式 」 [擁有者] 必須是規則運算式，用來驗證欄位中的瀏覽器。

我的訂購表單包含電話 (類型 ="電話 2") 欄位，並可指定驗證模式，就像這樣：

<input type="tel" id="orderTelephone" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d" title="(xxx) xxx-xxxx" />

這個 (不會有相當的複雜) 的規則運算式會告訴瀏覽器預期七位數數字以括弧區碼和一橫線，在 [電話號碼。輸入其他項目中所顯示的訊息會導致圖 8。請注意這封郵件含有對如何格式化輸入使用者的指示： 」 (xxx) xxx xxxx。"這部分的訊息來自 title 屬性相同的項目，所以有可能控制最少部份透過標記驗證訊息。還有一件事来注意，以驗證，不過使用標題時。[其他] 根據規格中，瀏覽器可能會選擇標題顯示在下，非錯誤的情況下，所以不要信任這個屬性為位置，以讓錯誤發音的文字。


[圖 8 若要指定為驗證運算式中使用模式屬性的

自動瀏覽器的驗證很不錯，但兩種即時發問會想到。首先，伺服器驗證 」 或 「 用戶端驗證指令碼怎麼產生的 [我的伺服器架構 (ASP。。NET MVC，例如)？第二個，又有什麼預期的位置，才能將表單儲存為正在進行中工作，而不需驗證使用者的情況下嗎？第一，不幸的是，範圍以外的這份文件，但是我所發表 asp 的此一主題中的部落格文章。NET MVC，您可以在找到 bit.ly/HTML5FormsAndMVC。

相反地，第二個問題，很容易。例如，假設您有表單，使用者將會花一段時間再送出，或許甚至儲存多次，最後將它張貼到您的伺服器之前。這種情況下，將想要讓使用者送出表單，以在不使用驗證的情況下，有兩個屬性，您可以使用："formnovalidate"放在輸入欄位的型別 「 提交 」，這和"novalidate"這位於開頭會形成標記。我在這裡放置兩個送出欄位在表單中，就像這樣：

<input type="submit" value="Place Order" />
<input type="submit" formnovalidate value="Save for Later" id="saveForLater" />

第二個按鈕的"formnovalidate"屬性將關閉驗證，並送出表單，讓使用者正在進行的工作儲存在 [我的資料庫，或甚至是在用戶端使用像是 localStorage 或 IndexedDB 的新 HTML5 儲存技術。

HTML5 表單和 ASP。NET 網頁表單

我包裝這份文件之前，我要分享一些額外的位元的 asp 與 HTML5 表單相關的資訊。NET 網頁會形成開發人員。如果您計劃與 ASP 的 HTML5 表單開發。NET Web Form，是個好消息： 許多 HTML5 相關的更新。NET 及 Visual Studio 時發生發行的超出範圍，所以您無需等到下一步的架構版本，可以立即使用這些功能。

若要開始使用 ASP 與 HTML5 表單。NET 網頁會形成中，您必須擷取數個更新。請先確認您有 Visual Studio 2010 SP1 (bit.ly/nQzsld)。除了將加入新的 HTML5 輸入型別和屬性的支援，service 封包也會提供一些更新，可讓您使用 [文字方塊] 伺服器控制項上的 [新 HTML5 的輸入型別。沒有此更新，您會看到編譯時期錯誤，使用新的型別時。

您也要抓取的 Microsoft。NET Framework 4 可靠性更新 1 (bit.ly/qOG7Ni)。此更新程式是設計用來修復很多有關使用新的 HTML5 輸入型別與 ASP 的的問題。NET 網頁會形成中。陳俊銘獵人涵蓋其中幾個-UpdatePanel，驗證控制項和回呼-在從 8 月初部落格文章，您可以簽出 bit.ly/qE7jLz。

加入到 HTML5 的瀏覽器的 Web 表單支援是件好事無所不在的 Web 開發人員。不僅有一組語意的輸入型別，可充分利用我們的應用程式中，而且我們也可以使用這些輸入的型別現在與較舊的瀏覽器中，在任何不良效果取得增強的功能時，包括自動用戶端驗證-在新的。藉著使用這些新欄位立即擁有即時的優點，在行動裝置應用程式空間，其中使用型別，例如 「 url 」 和 「 email 」 將會提示為使用者提供螢幕小鍵盤選項的行動裝置調整該輸入的型別。當您將這些新功能與 Modernizr，而是一個很好的 polyfilling 選項時，您會有您要現在將 HTML5 表單採用在應用程式中的所有工具。

如需有關在 Internet Explorer 10 PP2 的 HTML5 表單支援的詳細資訊，請移至 ietestdrive.com，並確定簽出 Internet Explorer 的開發人員中心的開發人員手冊 》 (bit.ly/r5xKhN)。為了深入 HTML5 表單一般情況下，建議"A 表單的行徑，"標記朝聖者通訊錄中的 「 HTML5： 向上及執行 」 (O'Reilly 媒體，2010年)，以及 W3C HTML5 規格的 [表單] 區域 (bit.ly/nIKxfE)。

Brandon Satrom* 為美國德州奧斯丁之外的 microsoft 開發人員編輯的運作方式。他的部落格，在 userinexperience.com ，才可以在以 @ BrandonSatrom 的 Twitter。*

因為有到下列的技術專家來檢閱這份文件：Box, John Hrvatin, Scott Hunter 和Clark Sell