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

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

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

13.png

Tel
被設計為用來輸入電話號碼的專用文本框势誊，它沒有特殊的校驗規(guī)則，不強制輸入數(shù)字谣蠢，因為許多電話號碼通常都帶有其它文字粟耻，但開發(fā)者可以通過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元素是深受開發(fā)者喜愛的一種元素膛壹，以日歷的形式方便用戶輸入窑滞。
month類型的input元素是一種專門用來輸入月份的文本框，并且在提交時對輸入的月份格式進行有效檢查恢筝。
week類型的input元素是一種專門用來輸入周號的文本框哀卫，并且在提交時對輸入的周號格式進行有效檢查。它可能是一個簡單的輸入文本框撬槽，允許用戶輸入一個數(shù)字此改，也可能更復雜更精確。它的格式類型似于“2014-W10”侄柔，代表2014年第10周共啃。
time類型的input元素是一種專門用來輸入時間的文本框占调，并且在提交時對輸入的時間格式進行有效檢查。它的外觀取決于瀏覽器移剪，可能是簡單的文本框究珊， 只是提交時檢查是否在其中輸入了有效的時間，也可能以時鐘形式出現(xiàn)纵苛， 還可以攜帶時區(qū)剿涮。
datetime-local類型的input元素是一種專門用來輸入本地日期和時間的文本框，并且在提交時對輸入的日期和時間格式進行有效檢查攻人。

14.png

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

15.png

Range
是一種只允許輸入一段范圍內數(shù)值的文本框，它具有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

在開發(fā)階段我們可能想把表單臨時提交一下， 又不想讓它進行表單中所有元素內容的有效性檢查火欧，有兩種方法可以取消表單驗證棋电。一種是在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>