TML5引入了十三種新的表單輸入，大大增加了Web設(shè)計(jì)人員和開發(fā)人員可以添加到表單中的不同字段的數(shù)量。這些新類型都需要瀏覽器來支持它們，并且吸收速度比我們所希望的要慢。2019年我們可能使用這些特性功能更為廣泛的有哪些呢？

對(duì)于許多設(shè)計(jì)人員和開發(fā)人員來說，HTML5的一個(gè)突出的標(biāo)題功能是添加了許多可以使用的新類型的表單輸入。多年來，我們一直局限于使用單行文本輸入（type="text"）并使用JavaScript和用戶指令來嘗試通過一個(gè)簡(jiǎn)單的字段準(zhǔn)確地捕獲不同類型的有效數(shù)據(jù)。

HTML5帶來了type屬性的新值，使我們能夠更加具體地了解我們需要通過該字段捕獲的數(shù)據(jù)類型，并承諾瀏覽器將提供強(qiáng)制用戶進(jìn)入所需的接口和驗(yàn)證。準(zhǔn)確地完成該領(lǐng)域。

從URL到電子郵件，從搜索字段到日期，希望不是需要編寫繁瑣的JavaScript來嘗試驗(yàn)證這些字段，我們可以將它留給瀏覽器為我們做哪些艱苦的工作。更重要的是，通過添加它對(duì)用戶上下文（設(shè)備類型，交互類型，時(shí)區(qū)等）的了解，瀏覽器可以更好地定制界面以滿足用戶的需求。

1.搜索字段

該type="search"輸入旨在用于搜索字段。在功能上，這些與基本文本字段非常相似，但具有專用類型使瀏覽器能夠應(yīng)用不同的樣式。如果用戶的操作系統(tǒng)具有搜索字段的設(shè)置樣式，則此功能特別有用，因?yàn)檫@使瀏覽器可以設(shè)置網(wǎng)頁上的搜索字段的樣式以匹配。規(guī)范說search和之間的差異text純粹是風(fēng)格的，所以如果你打算用CSS重新設(shè)置字段，最好避免這種情況。它的使用似乎沒有語義上的優(yōu)勢(shì)。

2.電話號(hào)碼字段

該type="tel"輸入用于輸入電話號(hào)碼。這些就像Whatsapp使用的唯一用戶名。如果你不確定，請(qǐng)問你的祖父母。在國(guó)際上，出于技術(shù)和本地化原因，電話號(hào)碼采用了許多不同的格式。因此，tel輸入不會(huì)嘗試驗(yàn)證電話號(hào)碼的格式?？梢允褂藐P(guān)聯(lián)的驗(yàn)證工具（如pattern標(biāo)記上的屬性）或setCustomValidity() JavaScript方法來強(qiáng)制執(zhí)行格式。

在桌面瀏覽器上，電話領(lǐng)域的使用似乎影響不大，但是，在具有虛擬鍵盤的設(shè)備上，它們非常有用。例如，在iOS上，在電話領(lǐng)域上的聚焦輸入會(huì)打開一個(gè)數(shù)字小鍵盤，準(zhǔn)備用于鍵入數(shù)字。此外，設(shè)備的自動(dòng)完成機(jī)制啟動(dòng)并建議可以通過單擊自動(dòng)填充的電話號(hào)碼。

3. URL字段

該type="url"字段可用于捕獲URL。例如，當(dāng)要求用戶輸入其商業(yè)目錄的網(wǎng)站地址時(shí)，您可以使用此方法。關(guān)于URL字段的奇怪之處在于它只需要完整的絕對(duì)URL。例如，沒有選項(xiàng)只能捕獲域名或路徑，這確實(shí)限制了它在某些方面的實(shí)用性，因?yàn)镃MS和Web應(yīng)用程序開發(fā)人員會(huì)發(fā)現(xiàn)許多用于接受和驗(yàn)證相對(duì)路徑的字段。

4.電子郵件字段

可能最常用的新選項(xiàng)之一是type="email"電子郵件地址，就像我們看到的電話號(hào)碼和URL一樣，帶有虛擬鍵盤的設(shè)備可以自定義鍵（包括@按鈕之類的東西）并從其聯(lián)系人數(shù)據(jù)庫(kù)啟用自動(dòng)填充功能。

電子郵件地址通常看起來像是一種非常簡(jiǎn)單的格式，但這些變化實(shí)際上使它們非常復(fù)雜。驗(yàn)證電子郵件地址的天真嘗試可能會(huì)導(dǎo)致將完美的地址標(biāo)記為無效，因此能夠依靠瀏覽器更復(fù)雜且經(jīng)過良好測(cè)試的驗(yàn)證方法來檢查格式是非常棒的。有用的是，multiple可以將該屬性添加到電子郵件字段以收集電子郵件地址列表。在這種情況下，列表中的每個(gè)電子郵件地址都是單獨(dú)驗(yàn)證的。

5.數(shù)字字段

該type="number"字段是專為數(shù)值，瀏覽器支持很廣泛，虛擬鍵盤通常默認(rèn)為數(shù)字輸入模式以鍵入值。

使用type="number"任何浮點(diǎn)數(shù)，因?yàn)樗膹V泛的支持，可以幫助防止意外輸入。

6.范圍字段

type="range"可以被認(rèn)為是type="number"用戶不關(guān)心確切值的替代方案的范圍字段取，會(huì)經(jīng)常使用，同樣的min，max和step屬性作為多個(gè)字段，和瀏覽器幾乎普遍地展示本作為圖形滑塊，用戶不一定能夠看到他們?cè)O(shè)置的確切值。type="range"用途可能有點(diǎn)小，但支持很好，滑塊提供了一個(gè)用戶友好的輸入方法。

7.色域

該type="color"字段設(shè)計(jì)用于以十六進(jìn)制表示法捕獲RGB顏色，例如#aabbcc。HTML規(guī)范將其稱為“顏色控制”，其目的是瀏覽器應(yīng)提供某種用戶友好的顏色選擇器。

有些瀏覽器確實(shí)提供了這一功能，特別是Chrome和Firefox都提供了通過小色塊訪問系統(tǒng)顏色選擇器的功能。

8.日期字段

HTML5引入了許多不同的type值來創(chuàng)建日期和時(shí)間的輸入。這些措施包括date，time，datetime-local，month和week。

Firefox有一個(gè)非常出色的日期選擇器，Chrome和Edge也有相當(dāng)不錯(cuò)的界面。然而，在舊的IE中沒有支持，在Safari中沒有支持。

自HTML5規(guī)范成為推薦以來的四年中，瀏覽器領(lǐng)域發(fā)生了很大變化。對(duì)新型輸入的支持相當(dāng)強(qiáng)勁 - 特別是在具有平板電腦和手機(jī)等虛擬鍵盤的移動(dòng)設(shè)備中。在大多數(shù)情況下，這些輸入可以安全使用，并為用戶提供一些額外的實(shí)用程序。

有一些值得注意的例外，其中最糟糕的是日期和時(shí)間字段，他們不僅缺乏實(shí)用性，而且還有更多不完整瀏覽器支持功能。當(dāng)支持不可用時(shí)，這些字段的后備模式很差。在這些情況下，最好堅(jiān)持使用基于JavaScript的解決方案來逐步增強(qiáng)基本type="text"輸入字段。

?