HTML5的Form表單輸入類型實(shí)例分析

本篇內(nèi)容介紹了“HTML5的Form表單輸入類型實(shí)例分析”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

 您可能已經(jīng)熟悉input元素的type屬性。這是一個(gè)能夠決定何種表單輸入將呈現(xiàn)給用戶的屬性。如果它被省略——或者是在舊版瀏覽器中使用新的輸入類型，

盡管瀏覽器不能識(shí)別，但仍可運(yùn)行：input元素將默認(rèn)為type=”text”。這就是如今HTML5表單便于使用的關(guān)鍵。如果您使用新的輸入類型，如email或search，舊版瀏覽器將簡(jiǎn)單地呈現(xiàn)給用戶一個(gè)標(biāo)準(zhǔn)的文本字段。

    我們的注冊(cè)表單目前使用您比較熟悉的10種輸入類型中的4種：check-box、text、password和submit。在HTML5之前，所有類型的完整列表如下所示：

  button、checkbox、file、hidden、image、password、radio、reset 、submit、text。

    HTML5帶給我們的輸入類型提供了更多的數(shù)據(jù)特定相關(guān)的用戶界面元素以及自帶的數(shù)據(jù)驗(yàn)證。HTML5共有13種新輸入類型：

 search、email、url、tel 、datetime、date、month、week、time、datetime-local 、number、range、color。

    讓我們?cè)敿?xì)看一下這些新類型，并學(xué)習(xí)如何使用它們。

search

    search輸入類型(type=”search”)提供一個(gè)搜索字段，是一個(gè)一行的文本輸入控件，可以輸入一個(gè)或多個(gè)搜索術(shù)語。規(guī)范說明如下：

    文本狀態(tài)與搜索狀態(tài)的區(qū)別主要是在格式上：搜索字段平臺(tái)與常規(guī)文本字段平臺(tái)的不同之處在于，搜索狀態(tài)可能導(dǎo)致外觀與平臺(tái)搜索字段一致，而不像一個(gè)常規(guī)的文本字段。

    許多瀏覽器在設(shè)置search輸入的樣式時(shí)，與瀏覽器或操作系統(tǒng)搜索框風(fēng)格一致。一些瀏覽器添加了單擊鼠標(biāo)清除輸入的功能。

<form  id= " searchH  method='get">

  <input   type=' search '   id= " s "   name= " s '>

  <input type='submit" value=Search >

</form>

email

   指定一個(gè)或多個(gè)電郵件地址。它支持布爾硝multiple屬性，允許多個(gè)逗號(hào)分隔的電子郵件地址。

<label  for= " emaiI">My  email  address  is</label>

<input  type='"email"    id='email'   name=email">

    如果您使用iOS設(shè)備，變化就會(huì)很明濕。當(dāng)您聚焦電子郵件字段時(shí)，iPhone、iPad和iPod都會(huì)顯示一個(gè)電子郵件輸入的鍵盤（有一個(gè)@符號(hào)的快捷鍵）。

Firefox、Chrome和Opera還提供電子郵件輸入錯(cuò)誤信息。

自定義驗(yàn)證信息

    不喜歡提供的錯(cuò)誤信息嗎？在某些瀏覽器中，您可以使用．setCustomVal-idity (errorMsg)設(shè)置您自己的錯(cuò)誤信息。．setCustomValidity僅將您想提供的錯(cuò)誤信息當(dāng)作唯一的參數(shù)．如果您想完全刪除錯(cuò)誤信息，可向．setCustomValidity傳遞空字符串。

    不幸的是，盡管您可以改變信息的內(nèi)容，但您不能更改它的外觀，至少目前是這樣。

URL

    url 輸入類型(type=”url”)用于說明網(wǎng)站地址。

<label  for= " url" >My  website   is   located   at : </label>

<input type='url' id='url' name='url">

    Opera、Firefox和WebKit支持url輸入類型，如果URL格式不正確，將會(huì)報(bào)告輸入無效。只有常規(guī)的URL格式才能通過駿證。因此，例如，q://example.xyz被認(rèn)為是有效的，即使q://不是一個(gè)真正的協(xié)議以及.xyz不是一個(gè)真正的頂級(jí)網(wǎng)域名稱。同樣，如果您想使輸入的值符合更具體的格式，請(qǐng)?jiān)跇?biāo)簽（或占位符）提供信息以便使用戶了解，并且可以使用pattern屬性以確保正確。

tel

    對(duì)于電話號(hào)碼，使用tel輸入類型(type=”tel”)。與url和email類型不同。tel類型不會(huì)強(qiáng)制執(zhí)行特定的語法或模式。字母和數(shù)字&mdash;&mdash;只要是不是新的一行或回車符的其他任何字符都是有效的。這里有一個(gè)很好的理由：世界上各個(gè)國(guó)家有許多不同類型的有效電話號(hào)碼，并具有不同的長(zhǎng)度和標(biāo)點(diǎn)符號(hào)，所以不可能指定唯一的格式作為標(biāo)準(zhǔn)。例如，在美國(guó)，+1(415)555-1212通常被理解為415.555.1212。您可以通過包含使用正確語法的占位符支持一種特殊格式，或紅輸入類型后用一個(gè)示例加以注釋。另外，您可以通過使用pattern屬性規(guī)定一種格式或使用setCustomValidity方法提供客戶端驗(yàn)證。

number

    number類型(type=”number”)提供了一個(gè)輸入數(shù)字的輸入類型。通常，這是一個(gè)“微調(diào)”框，在這里您可以輸入一個(gè)數(shù)字或單擊向上或向下的箭頭來選擇數(shù)字。

讓我們使用number輸入類型來更改數(shù)量字段：

<label for-"'quantity>l would like to receive <input type='nuiber'

lname="quantity" id-"'quantity '> copies of <cite>The HTML5 Herald

--</cite></label>

    數(shù)字輸入類型由min和max屬性來規(guī)定最人和最小允許值。我們強(qiáng)烈推薦您使用這些屬性，否則使用向上和向下箭頭可能會(huì)導(dǎo)致不同的值（非常奇怪），這取決

于瀏覽器。

    您也可以提供step屬性，這樣可以通過單擊上和下的箭頭使數(shù)值增加或減少。

range

    range輸入類型(type=”range”)在覽器中顯示一個(gè)滾動(dòng)控件。和數(shù)字類型一樣，它允許使用min、max和step屬性。根據(jù)規(guī)范，number和range的區(qū)別是：在range類型中所輸入的具體數(shù)

的精確值是不重要的。如果您想得到一個(gè)小精確的數(shù)字，這是一個(gè)理想的輸入類型。

<input  type=" range" min="1"  max="10"   name= "rating'   type= " range" >

    step屬性的默認(rèn)值是1，所以它不是必需的。range輸入類型的默認(rèn)值是滾軸的中間點(diǎn)&mdash;&mdash;換句話說，就是最小值和最大值之

間的中間值。規(guī)范規(guī)定：如果指定的最大值小于最小值，就允許使用反向滾動(dòng)軸（數(shù)值從右到左，而不足從左到右）。

color

    color輸入類型(type=”color”)為用戶提供了顏色選取器，顏色選取器會(huì)返回一個(gè)十六進(jìn)制的RGB顏色值，比如#FF3300。

    如果您想使用color輸入提供占位符文本，表明必須使用十六進(jìn)制RGB顏色格式，井使用pattern屬性對(duì)其進(jìn)行限制，只允許輸入有效的十六進(jìn)制顏包值，那么就必須等到完全支持這個(gè)輸入類型。

    我們不存表單中使用color輸入類型，但是，如果采用此輸入類型，應(yīng)使用下

列代碼：

<label  for= ' clr">Color:   </label>

<input id-"'clr' name-"'clr type="text' placeholder=-#FFFFFF"

-pattern= "#(? : [0-9A-Fa-f] {6}1 [0-9A-Fa-f] {3}) '   required>

日期和時(shí)間

    現(xiàn)在有一些新的Ej期和時(shí)間輸入類型，包括date、datetime、datetime-local、month、time和week。所有日期和時(shí)間輸入將接受符合IS09601標(biāo)準(zhǔn)的

數(shù)據(jù)格式&lsquo;。

Date

    它包括日期（年，月，日），但小包括時(shí)間。例如，2004-06-24。

Month

    儀包括年和月。例如．2012-12。

Week

    它包括年和周數(shù)（從l到52）。例如，2011-WOI或2012-W52。

Time

    一天的時(shí)間，使用軍用格式（以24小時(shí)記時(shí)）。例如，22:00代替10.00pm。

Datetime

    它包含日期和時(shí)間，由“T”分隔，在后面跟一個(gè)“Z”代表UTC (CoordinatedUniversal Time，世界標(biāo)準(zhǔn)時(shí)問)，或由a+或&middot;字符指定的時(shí)區(qū)。例如，“2010-03-17 T10:45-5:00”表示2011年3月l7日上午10點(diǎn)45分，UTC減去5個(gè)小時(shí)時(shí)區(qū)（美國(guó)東部標(biāo)準(zhǔn)時(shí)問）。

Datetime-local

    除了省略了時(shí)區(qū)，其他都與datetime 一樣。

    這些類型中最常用的是date。規(guī)范要求瀏覽器顯示日期控件。

    讓我們使用date輸入類型改進(jìn)我們的認(rèn)購(gòu)開始日期字段：

<input   type= "date"   min= ' 1904 -03 - 17'   max=' 1904 - 05- 17 " id= " startdate"   name= ' startdate "   required  aria- required= " true " placeholder="1911 -03-17">

“HTML5的Form表單輸入類型實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！