上一章節講了21個語義化的標簽，這一節我們來講表單標簽，HTML5不僅僅給表單帶來了新的標簽，還給原來的標簽帶來了新的屬性，這一節我們會來介紹介紹它們。

?

到目前為止，我們對HTML5的學習還是停留在新概念和新標簽的學習，并沒有涉及到很復雜的編程邏輯，所以初學者不用擔心太難。我們會循環漸進，慢慢深入。

3個新的表單標簽

首先，我們來認識幾個新的表單標簽。

1

<datalist>標簽：規定了 <input> 元素可能的選項列表。

一般會被用來在為<input> 元素提供"自動完成"的特性。用戶能看到一個下拉列表，里邊的選項是預先定義好的，將作為用戶的輸入數據。

我們來演示一個案例，大家就知道怎么用了：

? ?<input type="text" list="demo">
? ?<datalist id="demo">
???? ? ? <option>javascript</option>
???? ? ? <option>css</option>
???? ? ? <option>html</option>
???? ? ? <option>reactjs</option>
???? ? ? <option>nodejs</option>
? ?</datalist>

上面這個小代碼，我們看得出，input標簽的list屬性值和datalist標簽的id是一樣的，沒錯，它們就是這樣來相互關聯起來的。當它們結合起來之后，不僅可以像select標簽一樣可以通過下拉來選擇已有的選項，還可以根據用戶輸入的字符，對選項進行匹配篩選。

效果圖如下：

（這是一個傲嬌的gif圖）

有了datalist標簽，我們實現這種效果起來十分簡單，不需要任何的JavaScript代碼也能輕松實現。

2

<output>標簽：標簽定義不同類型的輸出。比如腳本的輸出、一些加減乘除的運算結果，我們都可以使用這個標簽。

我們來舉個例子：輸入的數字乘以2后得到的結果，我們用output輸出顯示。

? ?<form οninput="b.value = parseInt(a.value)*2">
??? ? ? <input type="number" name="a">乘以2=
??? ? ? <output name="b"></output>
? ?</form>

我們用oninput屬性監聽著表單的變化，并把得到的結果賦值到output標簽的value。我們來看看效果圖：

（這是一個傲嬌的gif圖）

其中，output標簽是可以離開form表單標簽的，但是，如果你這樣做的話，必須給output標簽添加form屬性，其屬性值是與其相關聯form表單的id。

?

我們來將output移到form表單的外面試試：

<form id="demo" οninput="b.value = parseInt(a.value)*2">
??? <input type="number" name="a"> 乘以2=
</form>
<output form="demo" name="b" for="a"></output>

跟上面的代碼有幾處不同之處，form標簽多了一個id，值為“demo”，output標簽被移到了form標簽外面，不再是form標簽的子節點，變成了兄弟節點（當然你可以把它移到文檔的其他位置）。output標簽還多了一個form屬性，此時，它的值正好是form標簽的id值：“demo”。這種寫法，代碼同樣是奏效的。

下面這個標簽相信大家很少用到，但是也是為了學習，我們來了解一下就好。

3

<keygen>標簽：規定用于表單的密鑰對生成器字段。當提交表單時，私鑰存儲在本地，公鑰發送到服務器，這種機制是專為使用基于Web的證書管理系統。

我在MDN（Mozilla Developer Network）的網站上看到了關于它的一些介紹：

There iscurrently discussion among Web browser makers whether to keep this feature ornot. Until a decision is reached, it is better to continue to consider thisfeature as deprecated and going away.

大意是：目前各大瀏覽器廠商還在討論是否要保留它，在討論結束之前，你最好還是別用它。

?

而另一段話則是更加直接明了：

This featurehas been removed from the Web standards. Though some browsers may still supportit, it is in the process of being dropped. Do not use it in old or newprojects. Pages or Web apps using it may break at any time.

大意是：雖然有些瀏覽器還支持它，但是這個特性已經被移除出web標準了，以后別使用它了。

?

12個新的表單屬性

講了3個新的表單標簽，下面我們來介紹HTML5給表單帶來的新屬性。

1

autocomplete 屬性：可用在form標簽和input標簽，實現自動完成輸入功能。它的值為：on（開啟）/off（關閉）。

為了完成表單的快速輸入，提高網站的交互性，autocomplete=“on“，瀏覽器提供了自動補全的功能。在用戶輸入的內容被保存的情況下，如果用戶在表單再次輸入相同的或部分相同的字符時，瀏覽器會提示相關內容，從而讓你快速的完成表單的輸入。

我們來看一個例子，我們在form標簽就開啟autocomplete 屬性。然后在其中一個子節點input標簽關閉autocomplete 屬性。

? ?<form autocomplete="on">
??? ? ? <input type="text">
??? ? ? <input type="text" autocomplete="off">
? ?</form>

這種寫法的結果就是：第一個input標簽實現了開啟autocomplete，而第二個標簽因為自己重新設置了autocomplete屬性為off關閉，所以第二個輸入域沒有實現自動補全的效果。

2

novalidate屬性：在提交表單時不應該驗證 form 或 input 域。

如果表單中有一個輸入域的類型是email，那么在提交表單的時候，瀏覽器會驗證你輸入的字符格式是否合法，若非法（不符合郵件格式類型），就會提示錯誤，阻止提交表單。

我們來看這個例子：

? ?<form>
??? ? ? <input type="email">
??? ? ? <input type="submit" value="save">
? ?</form>

我們試著輸入一個非法的email郵箱地址，然后提交，如下圖：

瀏覽器會提示你郵箱地址格式不對，而novalidate屬性，就是為了讓表單可以忽略驗證，直接提交表單數據。

它的用法如下：

? ?<form novalidate>
??? ? ? <input type="email">
??? ? ? <input type="submit" value="save">
? ?</form>

3

autofocus 屬性：在頁面加載時，域自動地獲得焦點。

這個很好理解，用法也很簡單：

? ?<input type="text" autofocus>

設置了autofocus 屬性的輸入域，就會自動獲得焦點，如圖：

如果一個頁面存在多個設置了autofocus屬性的input標簽，則只有第一個input標簽才會獲得焦點，其它的失效。

?

4

form 屬性：規定input輸入是屬于哪個表單的。

這種情況，一般只會在當input標簽不是form標簽的子節點的情況下才會使用。如：

? ?<form id="demo">
??? ? ? <input type="text">
??? ? ? <input type="submit" value="save">
? ?</form>

? ?<input type="text"? form="demo">

代碼中一個input標簽輸入域放在了form表單的外面，但是表單提交的時候，也會帶上這個輸入域的數據。原因是因為外面的input標簽通過form屬性綁定了form表單的id。相當于對它說：“你提交數據的時候，別只顧著你的子節點啊，還記得帶上我啊。“

5

formaction 屬性：用于描述表單提交的URL地址。

咦，設置表單提交地址不是寫在form標簽的action屬性嗎？ 沒錯的確是這樣。

但是formaction 屬性可以讓你把提交地址也在了提交按鈕標簽上。

? ?<form action="a.php">
??? ? ? <input type="text">
?? ? ?? <!--兩個提交按鈕-->
??? ? ? <input type="submit" value="save1">
??? ? ? <input type="submit" value="save2" formaction="b.php">
? ?</form>

正如上面的案例，form表單有兩個submit類型的提交按鈕，而設置了formaction 屬性的提交按鈕，會把數據提交到指定的地址，而沒有設置formaction 屬性的標簽，就會提交到form表單action屬性指定的地址。

這也是formaction 屬性的適用場景：當一個表單有兩個提交地址的時候。

?

既然是2個獨立的提交地址，那么我們還可以設置它們的提交方式和數據編碼。

6-7

formenctype 屬性：描述了表單提交到服務器的數據編碼（只對post的數據使用）。

formmethod 屬性：定義了表單提交的方式。

? ?<input type="submit" value="save2" formenctype="multipart/form-data" formmethod="post"? formaction="b.php">

跟formaction 屬性一樣，也是設置于類型為submit的提交標簽內。

8

在前面我們講解過form表單的一個新屬性novalidate，規定表單提交的時候不用驗證數據。現在，同樣的功能，你可以利用formnovalidate屬性來實現，不同的是，formnovalidate 屬性是屬于input提交標簽的屬性，與input標簽一起使用的。

formnovalidate屬性：在表單提交時無需被驗證。

? ?<input type="submit" formnovalidate value="save2">

input標簽的formnovalidate 屬性，會覆蓋<form> 元素的novalidate屬性設置。

9

formtarget 屬性：規定表單數據提交后跳轉到的窗口。

這個屬性也是結合type=“submit“的input標簽一起使用的，我們可以讓表單數據提交之后跳轉到一個新窗口展示。只要我們設置formtarget屬性的值為”_blank”。

? ?<input formtarget="_blank"? type="submit"? value="save2">

是不是覺得和<a>標簽的target屬性很相似？

?

我們知道，如果input標簽的類型為email的時候，我們輸入的內容要符合郵箱地址的格式，才能通過驗證。那么，如果我們想瀏覽器幫我驗證自定義的規則，怎么辦呢？我們可以利用input的新屬性pattern屬性。

10

pattern 屬性：描述一個正則表達式用于驗證 <input> 元素的值。

我們來編寫一個簡單的正則：[0-9]{3}。（3個0-9的數字）

? ?<input type="text" pattern="[0-9]{3}">

如果我們在輸入域輸入的字符不符合這個匹配規則，就會阻止表單數據的提交。如下圖：

由于上面我們輸入的字符不是3個數字，自然就會提示格式錯誤了。

11

此外，如果你想某個輸入域是必填的，你可以利用pattern屬性編寫對應的正則來驗證，但是，現在你大可不必這么干，HTML5給input標簽帶來了一個專門干這事的新屬性：required。

required 屬性：規定必須在提交之前填寫輸入域（不能為空）。

用法很簡單，如下：

? ?<input type="text" required>

如果在提交的時候，輸入域為空，瀏覽器就會提示：

有了這個屬性，你再也不用寫JavaScript和正則來判斷是否為空了。

12

placeholder 屬性：提示用戶輸入域所期待的值。

這是個最常用的屬性了，同學們一定沒少用吧。

? ?<input type="text" placeholder="請輸入用戶名">

效果圖如下：

?（這是一個傲嬌的gif圖）

13個新的input類型

除了新增了表單這些屬性外，HTML5還單獨給input標簽帶來了不同的類型type，方便又實用。我們一起來看看！

1

color 類型：用在input字段主要用于選取顏色。

? ?<input type="color">

效果如下：

所選擇的顏色值可以能通過獲取input標簽的value值得到。

2

email 類型：包含 e-mail 地址的輸入域。

前面也有介紹過，相信你也不會陌生這個類型。

? ?<input type="email">

外觀跟普通的輸入域的外觀沒啥兩樣，但是，在提交表單數據的時候會進行內容格式驗證，不符合郵箱地址格式的內容，會被阻止提交，并提示錯誤，如下圖：

3

number 類型：用于應該包含數值的輸入域。

? ?<input type="number">

我們還可以通過min屬性和max屬性來設置它數值范圍：

? ?<input type="number" min="0" max="5">

我們把數值的范圍設置在0~5之間，效果圖如下：

?（這是一個傲嬌的gif圖）

我們每改變一下數值，它的增量幅度都為1，我們通過step屬性來控制增量幅度。還可以設置value來規定默認值。

如果number類型使用在手機上，當輸入域獲得焦點打開手機鍵盤的時候，會默認打開數字鍵盤，方便用戶使用。

4

range 類型：包含一定范圍內數字值的滑動組件。

? ?<input type="range" min="0" max="5">

這樣，就規定了這個組件的可選值的范圍為：0~5。

效果：

?

5

?search 類型：用于搜索域。

? ?<input type="search">

外觀效果和普通輸入域類似。

?

6

tel 類型：用于電話號碼輸入域。

? ?<input type="tel">

外觀效果和普通輸入域一樣，不同的是在手機端使用，獲得焦點的時候會自動調出系統的數字鍵盤，方便用戶輸入，跟number類型一樣。

7

url 類型：用于包含 URL 地址的輸入域。

? ?<input type="url">

在提交表單時，會自動驗證 url 域的值。如果，不符合url的格式，會阻止表單數據提交，并提示錯誤，如圖：

?

8

date 類型：定義一個日期選擇器。

? ?<input? type="date">

效果如下：

（這是一個傲嬌的gif圖）

9

datetime 類型：選擇一個日期和時間（世界統一時間）。

? ?<input type="datetime">

目前瀏覽器對此類型的支持并不完善，主流瀏覽器幾乎都不支持，慎用！

10

datetime-local類型：選擇一個日期和時間 (無時區)。

? ?<input type="datetime-local">

效果圖如下：

如果是移動端使用，會調用系統默認的日期時間選擇組件，十分方便。

11

month 類型：選擇一個月份。

? ?<input type="month">

效果圖如下：

?

12

time 類型：選擇一個時間。

? ?<input type="time">

效果圖：

13

week 類型：選擇周和年。

? ?<input type="week">

效果圖如下：

用戶可以選擇某一年的第幾個周。

?

很多同學會發現，在日常的開發中，我們會使用第三方插件來完成日期時間選擇。但這些新增的input類型，更多地是為了更好的服務移動端的開發者和用戶。

本節收獲

學完本節，你應該學會了：

新增的3個表單標簽

新增的12個新表單屬性

新增的13個新input類型

總結

以上是生活随笔為你收集整理的第四节：HTML5给表单带来的新标签、新属性、新类型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。