5 HTML5中改良的input元素的種類（上）

在HTML5中，除了form表單元素增加了一些好用的屬性外，大幅度增加與改良input元素的種類，可以簡單地使用這些元素來實現HTML5之前需要使用JavaScript才能實現的許多功能。

對于不支持新增input元素的瀏覽器來說， 統一將這些input元素視為text類型，另外，HTML5中也沒有規定這些元素在各瀏覽中的外觀形式， 所以同樣的input元素在不同的瀏覽器中可能會有不同的外觀。

Search
search類型的input元素是一種專門用來輸入搜索關鍵詞的文本框。 Search類型與text類型僅僅在外觀上有區別，在Safari 4瀏覽器中， 它的外觀為操作系統默認的圓角矩形文本框， 但這個外觀可以用CSS 樣式進行改寫。在其他瀏覽中，它的外觀暫與text類型的文本框外觀相同，但可以用css樣式進行改寫。

13.png

Tel
被設計為用來輸入電話號碼的專用文本框，它沒有特殊的校驗規則，不強制輸入數字，因為許多電話號碼通常都帶有其它文字，但開發者可以通過pattern屬性來指定對于輸入的電話號碼格式的驗證。

url
是一種專門用來輸入url地址的文本框， 提交時如果該文本框中內容不是url地址格式的文字， 則不允許提交。

Email
是一種專門用來輸入email地址的文本框, 提交時如果該文本框中內容不是email地址格式的文字則不允許提交，但是它并不檢查該email地址是否存在，提交時該文本框可以為空，除非加了required屬性。Email類型的文本框還具有一個multiple 屬性，它允許在該文本框中輸入一個串以逗號分隔的email地址。當然并不強制要求用戶輸入該email地址列表。

Datetime, date, month, week, time, datetime-local
datetime類型的input元素是一種專門用來輸入UTC日期和時間的文本框， 并且在提交時對輸入的日期格式進行有效檢查。
date類型的input元素是深受開發者喜愛的一種元素，以日歷的形式方便用戶輸入。
month類型的input元素是一種專門用來輸入月份的文本框，并且在提交時對輸入的月份格式進行有效檢查。
week類型的input元素是一種專門用來輸入周號的文本框，并且在提交時對輸入的周號格式進行有效檢查。它可能是一個簡單的輸入文本框，允許用戶輸入一個數字，也可能更復雜更精確。它的格式類型似于“2014-W10”，代表2014年第10周。
time類型的input元素是一種專門用來輸入時間的文本框，并且在提交時對輸入的時間格式進行有效檢查。它的外觀取決于瀏覽器，可能是簡單的文本框， 只是提交時檢查是否在其中輸入了有效的時間，也可能以時鐘形式出現， 還可以攜帶時區。
datetime-local類型的input元素是一種專門用來輸入本地日期和時間的文本框，并且在提交時對輸入的日期和時間格式進行有效檢查。

14.png

Number
number類型的input元素是一種專門用來輸入數字的文本框，并且在提交時檢查輸入的內容是否為數字。它具有min、max與step屬性。

15.png

Range
是一種只允許輸入一段范圍內數值的文本框，它具有min、max與step屬性，默認范圍是0與100。

16.png

Color
用來選擇顏色，它提供了一個顏色選擇器。

File
文件選擇文本框， 與HTML4最大的不同是，可以通過指定multiple屬性，一次選擇多個文件， value屬性的值為用逗號分隔的一個或多個文件名。 同時，通過把MIME類型指定給accept屬性，可以限制選擇文件的種類。

在HTML5追加了新的output元素， 也增加了大量在提交時對表單與表單內新增元素進行內容有效性驗證的功能。其中output元素定義不同類型的輸出，比如計算結果或腳本的輸出。output元素必須從屬于某個表單， 寫在表單的內部，或者對它添加form屬性，目前，只被Opera 10瀏覽器支持。output結合range元素使用代碼如下：

17.png

在開發階段我們可能想把表單臨時提交一下， 又不想讓它進行表單中所有元素內容的有效性檢查，有兩種方法可以取消表單驗證。一種是在form元素中使用novalidate屬性， 讓整個表單驗證全都失效， 另一種是利用input元素中使用formnovalidate屬性，讓指定的單個input元素驗證失效。

from.html

<meta charset="utf-8">
<style>
    input[type="search"] {-webkit-appearance:textfield;}
</style>
<form action="demo.php">
    <input type="text" name="username"><br>
    
    <input type="search" name="ser"> <br>
    tel: <input type="tel" name="num" title="只能輸入10位數字" pattern="^((\+86)|(86))?(13)\d{9}$"><br>
    
    <br>
    <input type="submit" name="dosubmit" value="提交">
</form>