HTML5的Form表單輸入類型實例分析

本篇內容介紹了“HTML5的Form表單輸入類型實例分析”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

盡管瀏覽器不能識別，但仍可運行：input元素將默認為type=”text”。這就是如今HTML5表單便于使用的關鍵。如果您使用新的輸入類型，如email或search，舊版瀏覽器將簡單地呈現給用戶一個標準的文本字段。

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

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

    HTML5帶給我們的輸入類型提供了更多的數據特定相關的用戶界面元素以及自帶的數據驗證。HTML5共有13種新輸入類型：

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

    讓我們詳細看一下這些新類型，并學習如何使用它們。

search

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

    文本狀態與搜索狀態的區別主要是在格式上：搜索字段平臺與常規文本字段平臺的不同之處在于，搜索狀態可能導致外觀與平臺搜索字段一致，而不像一個常規的文本字段。

    許多瀏覽器在設置search輸入的樣式時，與瀏覽器或操作系統搜索框風格一致。一些瀏覽器添加了單擊鼠標清除輸入的功能。

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

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

  <input type='submit" value=Search >

</form>

email

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

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

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

    如果您使用iOS設備，變化就會很明濕。當您聚焦電子郵件字段時，iPhone、iPad和iPod都會顯示一個電子郵件輸入的鍵盤（有一個@符號的快捷鍵）。

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

自定義驗證信息

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

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

URL

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

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

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

    Opera、Firefox和WebKit支持url輸入類型，如果URL格式不正確，將會報告輸入無效。只有常規的URL格式才能通過駿證。因此，例如，q://example.xyz被認為是有效的，即使q://不是一個真正的協議以及.xyz不是一個真正的頂級網域名稱。同樣，如果您想使輸入的值符合更具體的格式，請在標簽（或占位符）提供信息以便使用戶了解，并且可以使用pattern屬性以確保正確。

tel

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

number

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

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

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

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

--</cite></label>

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

于瀏覽器。

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

range

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

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

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

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

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

color

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

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

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

列代碼：

<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>

日期和時間

    現在有一些新的Ej期和時間輸入類型，包括date、datetime、datetime-local、month、time和week。所有日期和時間輸入將接受符合IS09601標準的

數據格式&lsquo;。

Date

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

Month

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

Week

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

Time

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

Datetime

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

Datetime-local

    除了省略了時區，其他都與datetime 一樣。

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

    讓我們使用date輸入類型改進我們的認購開始日期字段：

<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表單輸入類型實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！