HTML5表單輸入類(lèi)型詳解及最佳實(shí)踐

核心要點(diǎn)

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

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

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

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

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

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

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

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

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

讓我們?cè)敿?xì)了解每種新類(lèi)型，并了解如何使用它們。

搜索 (Search)

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

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

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

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

雖然您仍然可以使用type="text"來(lái)創(chuàng)建搜索字段，但新的search類(lèi)型可以直觀地提示用戶(hù)在哪里搜索站點(diǎn)，并提供用戶(hù)習(xí)慣的界面。HTML5 Herald沒(méi)有搜索字段，但以下是如何使用它的示例：

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

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

電子郵件地址 (Email Addresses)

email類(lèi)型(type="email") 用于指定一個(gè)或多個(gè)電子郵件地址。它支持布爾型multiple屬性，允許使用多個(gè)逗號(hào)分隔（可選空格）的電子郵件地址。讓我們將表單更改為對(duì)注冊(cè)人的電子郵件地址使用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>

如果您將輸入類(lèi)型從text更改為email，正如我們?cè)谶@里所做的那樣，您將注意到用戶(hù)界面沒(méi)有明顯的變化；輸入仍然看起來(lái)像一個(gè)普通的文本字段。但是，幕后存在差異。

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

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

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

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

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

URL

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

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 {
      //如果有效，必須設(shè)置虛假值，否則將始終出錯(cuò)
      formControl.setCustomValidity('');
  }
}

URL 的驗(yàn)證

從Internet Explorer 10開(kāi)始的所有現(xiàn)代瀏覽器都支持url輸入類(lèi)型，如果值不以協(xié)議開(kāi)頭，則會(huì)報(bào)告輸入無(wú)效。只驗(yàn)證URL的一般協(xié)議格式，因此，例如，q://example.xyz將被認(rèn)為是有效的，即使q://不是真實(shí)的協(xié)議，.xyz也不是真實(shí)的頂級(jí)域名。如果您希望輸入的值符合更具體的格式，請(qǐng)?jiān)跇?biāo)簽（或占位符）中提供信息以告知用戶(hù)，并使用pattern屬性確保其正確性，如前所述。

電話號(hào)碼 (Telephone Numbers)

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

HTML5 表單輸入類(lèi)型的常見(jiàn)問(wèn)題解答 (FAQs)

HTML5 表單有哪些不同類(lèi)型的輸入類(lèi)型？

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

HTML5 中的“date”輸入類(lèi)型是如何工作的？

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

當(dāng)在舊版瀏覽器中查看 HTML5 表單輸入類(lèi)型時(shí)會(huì)發(fā)生什么？

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

如何驗(yàn)證 HTML5 表單中的用戶(hù)輸入？

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

HTML5 中的“range”輸入類(lèi)型是什么？

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

HTML5 中的“email”輸入類(lèi)型如何增強(qiáng)用戶(hù)體驗(yàn)？

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

HTML5 中“search”輸入類(lèi)型的用途是什么？

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

如何在 HTML5 中使用“number”輸入類(lèi)型？

HTML5 中的“number”輸入類(lèi)型允許用戶(hù)輸入數(shù)字輸入。您可以使用“min”和“max”屬性指定可接受的數(shù)字范圍，并使用“step”屬性指定步長(zhǎng)值。

HTML5 中的“tel”輸入類(lèi)型用于什么？

HTML5 中的“tel”輸入類(lèi)型用于應(yīng)包含電話號(hào)碼的輸入字段。但是，它不會(huì)驗(yàn)證輸入，因此您應(yīng)該使用 JavaScript 或類(lèi)似技術(shù)進(jìn)行驗(yàn)證。

HTML5 中的“url”輸入類(lèi)型是如何工作的？

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

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