HTML5表單輸入類型詳解及最佳實踐

核心要點

• HTML5表單引入了新的輸入類型，例如email、search、date、time、number、range、color等，這些類型提供了更符合數(shù)據(jù)類型的用戶界面元素和原生數(shù)據(jù)驗證功能。即使在舊版瀏覽器中，這些新輸入類型也能正常工作，只是會默認顯示為標準文本字段。
• search輸入類型(type="search") 提供了一個搜索字段，為用戶提供直觀的搜索站點提示。它通常帶有內(nèi)置的清除按鈕，並且可以樣式化以匹配瀏覽器或操作系統(tǒng)的搜索框。
• email輸入類型(type="email") 用於指定一個或多個電子郵件地址。它支持布爾型multiple屬性，用於多個逗號分隔的電子郵件地址。觸摸板設備通常會在該字段獲得焦點時顯示針對電子郵件輸入優(yōu)化的鍵盤，一些瀏覽器還會為無效的電子郵件輸入提供錯誤消息。
• url輸入類型(type="url") 用於指定網(wǎng)絡地址，與email輸入類型類似，它顯示為普通文本字段，但在觸摸屏上提供針對網(wǎng)絡地址輸入優(yōu)化的鍵盤?，F(xiàn)代瀏覽器使用此輸入類型驗證URL的一般協(xié)議格式。

(以下內(nèi)容摘自Alexis Goldstein、Louis Lazaris和Estelle Weyl合著的書籍《HTML5 & CSS3 for the Real World, 2nd Edition》。該書在全球各地的商店有售，您也可以在這裡購買電子書版本。)

您可能已經(jīng)熟悉input元素的type屬性。此屬性決定了將向用戶呈現(xiàn)哪種類型的表單輸入。如果省略此屬性——或者對於新輸入類型和舊版瀏覽器而言，如果瀏覽器不理解該類型——它仍然有效；輸入將默認為type="text"。這就是使HTML5表單在今天仍然可以使用的原因，即使您仍在支持舊版瀏覽器。如果您使用新的輸入類型，例如email或search，舊版瀏覽器只會向用戶顯示標準文本字段。

我們的註冊表單目前使用了您熟悉的十種輸入類型中的四種：checkbox、text、password和submit。以下是HTML5之前可用的所有類型列表：

• button
• checkbox
• file
• hidden
• image
• password
• radio
• reset
• submit
• text

HTML5規(guī)範為我們提供了九種新的輸入類型，它們提供了更符合數(shù)據(jù)類型的UI元素和原生數(shù)據(jù)驗證功能：

• search
• email
• url
• tel
• date
• time
• number
• range
• color

HTML5.1和WHATWG HTML Living Standard包含四種額外的日期輸入類型，其中三種在現(xiàn)代瀏覽器中得到了良好的支持：

• datetime-local
• month
• week
• datetime (任何瀏覽器都不支持)

讓我們詳細了解每種新類型，並了解如何使用它們。

搜索 (Search)

search輸入類型(type="search") 提供了一個搜索字段——一個單行文本輸入控件，用於輸入一個或多個搜索詞。規(guī)範指出：

文本狀態(tài)和搜索狀態(tài)之間的區(qū)別主要在於樣式：在搜索字段與普通文本字段有所區(qū)分的平臺上，搜索狀態(tài)可能會導致外觀與平臺的搜索字段一致，而不是像普通的文本字段。

許多瀏覽器以與瀏覽器或操作系統(tǒng)的搜索框一致的方式設置search輸入的樣式。目前，Chrome、Safari、Opera和IE都添加了在輸入文本後通過單擊鼠標提供×圖標來清除輸入的功能，如圖4.5所示。 date/time輸入類型在Chrome和Opera中也可以清除，IE11現(xiàn)在也包括一個×圖標來清除大多數(shù)輸入類型，包括type為text的輸入。

在Apple設備上，Chrome、Safari和Opera中的search字段默認情況下具有圓角，與設備的搜索字段外觀相匹配。在帶有動態(tài)鍵盤的觸摸板上，“go”按鈕會顯示為搜索圖標或單詞“search”，具體取決於設備。如果您包含非標準的results屬性，Chrome和Opera將在表單字段內(nèi)顯示放大鏡/查找圖標。

雖然您仍然可以使用type="text"來創(chuàng)建搜索字段，但新的search類型可以直觀地提示用戶在哪裡搜索站點，並提供用戶習慣的界面。 HTML5 Herald沒有搜索字段，但以下是如何使用它的示例：

<form id="search" method="get">
  <label for="s">Search:</label>
  <input type="search" id="s" name="s"/>
  <input type="submit" value="Search"/>
</form>

由於search與所有新的輸入類型一樣，在不支持的瀏覽器中顯示為常規(guī)文本框，因此在適當?shù)臅r候沒有理由不使用它。

電子郵件地址 (Email Addresses)

email類型(type="email") 用於指定一個或多個電子郵件地址。它支持布爾型multiple屬性，允許使用多個逗號分隔（可選空格）的電子郵件地址。讓我們將表單更改為對註冊人的電子郵件地址使用type="email"：

<form id="search" method="get">
  <label for="s">Search:</label>
  <input type="search" id="s" name="s"/>
  <input type="submit" value="Search"/>
</form>

如果您將輸入類型從text更改為email，正如我們在這裡所做的那樣，您將注意到用戶界面沒有明顯的變化；輸入仍然看起來像一個普通的文本字段。但是，幕後存在差異。

如果您使用的是觸摸板設備，這種變化就會變得明顯。當您將焦點放在email字段上時，大多數(shù)觸摸板設備（例如運行Chromium的iPad或Android手機）都會顯示針對電子郵件輸入優(yōu)化的鍵盤，包括@符號、句點和空格按鈕，但不包括逗號，如圖4.6所示。

Firefox、Chrome、Opera和Internet Explorer 10還會為無效的電子郵件輸入提供錯誤消息：如果您嘗試提交內(nèi)容無法識別為一個或多個電子郵件地址的表單，瀏覽器會告訴您哪裡錯了。默認錯誤消息如圖4.7所示。

注意：自定義驗證消息不喜歡瀏覽器提供的默認錯誤消息？使用.setCustomValidity(errorMsg)設置您自己的消息。 setCustomValidity只接受一個參數(shù)，即您要提供的錯誤消息。如果您設置了自定義驗證消息，一旦該值變?yōu)橛行е?，您必須將驗證消息設置為空字符串（虛假值）才能啟用表單提交：

<label for="email">My email address is:</label>
<input type="email" id="email" name="email"/>

不幸的是，雖然您可以更改消息的內(nèi)容，但至少目前您仍然受其外觀的限制。

URL

url輸入(type="url") 用於指定網(wǎng)絡地址。與email非常相似，它將顯示為普通的文本字段。在許多觸摸屏上，顯示的屏幕鍵盤將針對網(wǎng)絡地址輸入進行優(yōu)化，帶有正斜杠(/)和“.com”快捷鍵。讓我們更新我們的註冊表單以使用url輸入類型：

function setErrorMessages(formControl) {
  var validityState_object = formControl.validity;
  if (validityState_object.valueMissing) {
      formControl.setCustomValidity('Please set an age (required)');  
  } else if (validityState_object.rangeUnderflow) {
      formControl.setCustomValidity('You\'re too young');
  } else if (validityState_object.rangeOverflow) {
      formControl.setCustomValidity('You\'re too old');
  } else if (validityState_object.stepMismatch) {
      formControl.setCustomValidity('Counting half birthdays?');
  } else {
      //如果有效，必須設置虛假值，否則將始終出錯
      formControl.setCustomValidity('');
  }
}

URL 的驗證

從Internet Explorer 10開始的所有現(xiàn)代瀏覽器都支持url輸入類型，如果值不以協(xié)議開頭，則會報告輸入無效。只驗證URL的一般協(xié)議格式，因此，例如，q://example.xyz將被認為是有效的，即使q://不是真實的協(xié)議，.xyz也不是真實的頂級域名。如果您希望輸入的值符合更具體的格式，請在標籤（或占位符）中提供信息以告知用戶，並使用pattern屬性確保其正確性，如前所述。

電話號碼 (Telephone Numbers)

對於電話號碼，使用tel輸入類型(type="tel")。與url和email類型不同，tel類型不強制執(zhí)行特定的語法或模式。字母和數(shù)字——實際上，除了換行符或回車符之外的任何字符——都是有效的。這有一個很好的理由：在世界各地，各個國家都有各種長度和標點的有效電話號碼，因此不可能將單一格式指定為標準。例如，在美國， 1(415)555-1212與415.555.1212一樣容易理解，但公司也可能在電話號碼中使用字母，例如(800)CALL-NOW。您可以通過包含帶有正確語法的佔位符或輸入後的註釋以及示例來鼓勵特定格式。此外，您可以使用pattern屬性規(guī)定格式。在pattern屬性中包含一個title以提供工具提示並改進原生驗證錯誤消息的用戶體驗。您還可以使用setCustomValidity方法提供更具信息性的客戶端驗證。在使用tel輸入類型時，動態(tài)觸摸板通常會顯示電話鍵盤，包括星號和井號鍵。您可以將tel用於電話號碼以外的其他用途。例如，它可能是社會安全號碼表單輸入的最佳鍵盤。

HTML5 表單輸入類型的常見問題解答 (FAQs)

HTML5 表單有哪些不同類型的輸入類型？

HTML5 引入各種新的表單輸入類型。這些包括“color”、“date”、“datetime-local”、“email”、“month”、“number”、“range”、“search”、“tel”、“time”、“url”和“week ”。每種輸入類型都有其特定的用途，可以通過提供更合適和用戶友好的輸入字段來極大地增強網(wǎng)站的用戶體驗。

HTML5 中的“date”輸入類型是如何工作的？

HTML5 中的“date”輸入類型創(chuàng)建一個允許用戶輸入日期的輸入字段。日期格式根據(jù)用戶的瀏覽器語言環(huán)境進行格式化，並且通常會提供日期選擇器以方便用戶使用。但是，對這種輸入類型的支持在不同的瀏覽器之間有所不同。

當在舊版瀏覽器中查看 HTML5 表單輸入類型時會發(fā)生什麼？

如果在不支持它的舊版瀏覽器中查看 HTML5 表單輸入類型，瀏覽器將默認為標準“text”輸入字段。這意味著用戶仍然可以輸入信息，但 HTML5 輸入類型的特定功能（例如“date”輸入類型的日期選擇器）將不可用。

如何驗證 HTML5 表單中的用戶輸入？

HTML5 提供多個用於輸入驗證的屬性，包括“required”、“pattern”以及數(shù)值輸入類型的“min”/“max”。這些屬性可用於確保用戶輸入在表單提交前滿足特定條件。

HTML5 中的“range”輸入類型是什麼？

HTML5 中的“range”輸入類型創(chuàng)建一個滑塊，允許用戶在一個特定範圍內(nèi)選擇值。您可以使用“min”和“max”屬性指定範圍，並使用“value”屬性指定默認值。

HTML5 中的“email”輸入類型如何增強用戶體驗？

HTML5 中的“email”輸入類型為用戶輸入電子郵件地址提供了一種便捷的方式。它包含內(nèi)置驗證功能，用於檢查輸入的文本是否為電子郵件地址格式。某些瀏覽器還可能為此輸入類型提供自動完成功能。

HTML5 中“search”輸入類型的用途是什麼？

HTML5 中的“search”輸入類型專為搜索字段設計。此輸入類型可以提供特定於搜索的功能，例如單擊一下即可清除搜索框，或向用戶顯示最近的搜索結(jié)果。

如何在 HTML5 中使用“number”輸入類型？

HTML5 中的“number”輸入類型允許用戶輸入數(shù)字輸入。您可以使用“min”和“max”屬性指定可接受的數(shù)字範圍，並使用“step”屬性指定步長值。

HTML5 中的“tel”輸入類型用於什麼？

HTML5 中的“tel”輸入類型用於應包含電話號碼的輸入字段。但是，它不會驗證輸入，因此您應該使用 JavaScript 或類似技術(shù)進行驗證。

HTML5 中的“url”輸入類型是如何工作的？

HTML5 中的“url”輸入類型用於應包含 URL 的輸入字段。它包含內(nèi)置驗證功能，用於檢查輸入的文本是否為 URL 格式。某些瀏覽器還可能為此輸入類型提供自動完成功能。

以上是HTML5表格：輸入類型（第1部分） - 站點點的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！