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

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

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

13.png

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

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

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

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

14.png

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

15.png

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

16.png

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

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

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

17.png

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

from.html

<meta charset="utf-8">

<form action="demo.php">
    <input type="text" name="username"><br>
    
    search: <input type="search" name="ser"> <br>
    tel: <input type="tel" name="num" title="只能輸入10位數(shù)字" pattern="^((\+86)|(86))?(13)\d{9}$"><br>
    <br>
    url: <input type="url" required name="url"><br>
    
    email:<input type="email" required name="email"><br>
    
    Datetime:<input type="datetime" name="datetime"><br>
    date<input type="date" name="date" value="2015-01-22"><br>
    month<input type="month" name="month" value="2015-02"><br>
    week <input type="week" name="week" value="2015-W10"><br>
    time <input type="time" name="time" value="11:11"><br>
    datetime-local<input type="datetime-local" value="2015-01-10 11:11:11" name="local"><br>

    <br>
    <input type="submit" name="dosubmit" value="提交">
</form>