3.2　新的Input類型

HTML5新增了多個輸入型表單控件，通過使用這些新增的表單輸入類型，可以實現更好的輸入控制和驗證。目前，Opera瀏覽器支持最好，但在所有主流瀏覽器中都可以使用，即使不被支持，仍然可以顯示為普通的文本框。

3.2.1　email——Email地址框

視頻講解

email類型的input元素是一種專門用于輸入Email地址的文本框，在提交表單的時候，會自動驗證Email輸入框的值。如果不是一個有效的電子郵件地址，則該輸入框不允許提交該表單。

【示例】下面是email類型的一個應用示例。

    <form action="demo_form.php" method="get">
    請輸入您的Email地址：<input type="email" name="user_email" /><br />
    <input type="submit" />
    </form>

以上代碼在Chrome瀏覽器中的運行結果如圖3.1所示。如果輸入了錯誤的Email地址格式，單擊“提交”按鈕時會出現如圖3.2所示的提示。

圖3.1　email類型的input元素示例

圖3.2　檢測到不是有效的Email地址

其中demo_form.php表示提交給服務器端的處理文件。對于不支持type="email"的瀏覽器來說，將會以type="text"來處理，所以并不妨礙舊版瀏覽器瀏覽采用HTML5中type="email"輸入框的網頁。

如果將email類型的input元素用在手機瀏覽器中，則會更加凸顯其優勢。例如，如果使用iPhone或iPod中的Safari瀏覽器瀏覽包含Email輸入框的網頁，Safari瀏覽器會通過改變觸摸屏鍵盤來配合該輸入框，在觸摸屏鍵盤中添加“@”和“.”鍵以方便用戶輸入，如圖3.3所示，而當瀏覽普通內容時則不會出現這兩個鍵。email類型的input元素這一新增功能雖然用戶不易察覺，但屏幕鍵盤的變化無疑會帶來很好的用戶體驗。

圖3.3　iPhone中的Safari瀏覽器觸摸屏鍵盤隨輸入域改變而改變

3.2.2　url——URL地址框

視頻講解

url類型的input元素提供用于輸入url地址的文本框。當提交表單時，如果所輸入的是url地址格式的字符串，則會提交服務器，如果不是，則不允許提交。

【示例】下面是url類型的一個應用示例。

    <form action="demo_form.php" method="get">
    請輸入網址：<input type="url" name="user_url" /><br/>
    <input type="submit" />
    </form>

以上代碼在Chrome瀏覽器中的運行結果如圖3.4所示。如果輸入了錯誤的url地址格式，單擊“提交”按鈕時會出現如圖3.5所示的“請輸入網址”提示。

圖3.4　url類型的input元素示例

圖3.5　檢測到不是有效的url地址

與前面介紹的email類型輸入框相同，對于不支持type="url"的瀏覽器，將會以type="text"來處理，所以并不妨礙舊版瀏覽器正常采用type="url"輸入框中的URL信息。

如果使用iPhone或iPad中的Safari瀏覽器瀏覽包含url輸入域的網頁，Safari瀏覽器會通過改變觸摸屏鍵盤來配合該輸入框，在觸摸屏鍵盤中添加“.”“/”“.com”鍵以方便用戶輸入，如圖3.6所示，而當瀏覽普通內容時則不會出現這3個鍵。

圖3.6　iPhone中的Safari瀏覽器觸摸屏鍵盤隨輸入域改變而改變

3.2.3　number——數字框

視頻講解

number類型的input元素提供用于輸入數值的文本框。用戶還可以設定對所接受的數字的限制，包括允許的最大值和最小值、合法的數字間隔或默認值等。如果所輸入的數字不在限定范圍之內，則會提示錯誤信息。

【示例】下面是number類型的一個應用示例。

    <form action="demo_form.php" method="get">
    請輸入數值：<input type="number" name="number1" min="1" max="20" step="4">
    <input type="submit" />
    </form>

以上代碼在Chrome瀏覽器中的運行結果如圖3.7所示。如果輸入了不在限定范圍之內的數字，單擊“提交”按鈕時會出現如圖3.8所示的提示。

圖3.7　number類型的input元素示例

圖3.8　檢測到輸入了不在限定范圍之內的數字

圖3.8所示為輸入了大于規定的最大值時所出現的提示。同樣的，如果違反了其他限定，也會出現相關提示。例如，如果輸入數值15，則單擊“提交”按鈕時會出現如圖3.9所示的提示。這是因為限定了合法的數字間隔為4，在輸入時只能輸入4的倍數，如4、8、16等。又如，如果輸入數值-12，則會提示“值必須大于或等于1”，如圖3.10所示。

圖3.9　出現“值無效”的提示

圖3.10　提示“值必須大于或等于1”

number類型使用下面的屬性來規定對數字類型的限定，說明如表3.1所示。

表3.1　number類型的屬性

對于不同的瀏覽器，number類型的輸入框的外觀也可能會有所不同。而如果使用iPhone或iPod中的Safari瀏覽器瀏覽包含number輸入框的網頁，則Safari瀏覽器同樣會通過改變觸摸屏鍵盤來配合該輸入框，觸摸屏鍵盤會優化顯示數字以方便用戶輸入，如圖3.11所示。

圖3.11　iPhone中的Safari瀏覽器觸摸屏鍵盤顯示出數字與符號

3.2.4　range——范圍框

視頻講解

range類型的input元素提供用于輸入包含一定范圍內數字值的文本框，在網頁中顯示為滑動條。用戶可以設定對所接受的數字的限制，包括規定允許的最大值和最小值、合法的數字間隔或默認值等。如果所輸入的數字不在限定范圍之內，則會出現錯誤提示。

【示例】下面是range類型的一個應用示例。

    <form action="demo_form.php" method="get">
    請輸入數值： <input type="range" name="range1" min="1" max="30" />
    <input type="submit" />
    </form>

以上代碼在Chrome瀏覽器中的運行結果如圖3.12所示。range類型的input元素在不同瀏覽器中的外觀也不同，例如在Opera瀏覽器中的外觀如圖3.13所示，會在滑塊下方顯示出額外的數字間隔短線。

圖3.12　range類型的input元素示例

圖3.13　range類型的input元素在Opera瀏覽器中的外觀

range類型使用下面的屬性來規定對數字類型的限定，說明如表3.2所示。

表3.2　range類型的屬性

從表3.2中可以看出，range類型的屬性與number類型的屬性相同，這兩種類型的不同在于外觀表現上，支持range類型的瀏覽器都會將其顯示為滑塊的形式，而不支持range類型的瀏覽器則會將其顯示為普通的文本框，即以type="text"來處理。

3.2.5　date pickers——日期選擇器

視頻講解

日期選擇器（Date Pickers）是網頁中經常要用到的一種控件，在HTML5之前的版本中，并沒有提供任何形式的日期選擇器控件，多采用一些JavaScript框架來實現日期選擇器控件的功能，如jQuery UI、YUI等，在具體使用時會比較麻煩。

HTML5提供了多個可用于選取日期和時間的輸入類型，即6種日期選擇器控件，分別用于選擇以下日期格式：日期、月、星期、時間、日期＋時間、日期＋時間＋時區，如表3.3所示。

表3.3　日期選擇器類型

1．date類型

date類型的日期選擇器用于選取日、月、年，即選擇一個具體的日期，例如2018年8月8日，選擇后會以2018-08-08的形式顯示。

【示例1】下面是date類型的一個應用示例。

    <form action="demo_form.php" method="get">
    請輸入日期： <input type="date" name=" date1" />
    <input type="submit" />
    </form>

以上代碼在Chrome瀏覽器中的運行結果如圖3.14所示，在Opera瀏覽器中的運行結果如圖3.15所示。Chrome瀏覽器中顯示為右側帶有微調按鈕的數字輸入框，可見該瀏覽器并不支持日期選擇器控件。而Opera瀏覽器中單擊右側小箭頭時會顯示出日期控件，用戶可以使用控件來選擇具體日期。

圖3.14　在Chrome瀏覽器中的運行結果

圖3.15　在Opera瀏覽器中的運行結果

2．month類型

month類型的日期選擇器用于選取月、年，即選擇一個具體的月份，例如2018年8月，選擇后會以2018-08的形式顯示。

【示例2】下面是month類型的一個應用示例。

    <form action="demo_form.php" method="get">
    請輸入月份： <input type="month" name=" month1" />
    <input type="submit" />
    </form>

以上代碼在Chrome瀏覽器中的運行結果如圖3.16所示，在Opera瀏覽器中的運行結果如圖3.17所示。Chrome瀏覽器中顯示為右側帶有微調按鈕的數字輸入框，輸入或微調時會只顯示到月份，而不會顯示日期。Opera瀏覽器中單擊右側小箭頭時會顯示出日期控件，用戶可以使用控件來選擇具體月份，但不能選擇具體日期。可以看到，整個月份中的日期都會以深灰色顯示，單擊該區域可以選擇整個月份。

圖3.16　在Chrome瀏覽器中的運行結果

圖3.17　在Opera瀏覽器中的運行結果

3．week類型

week類型的日期選擇器用于選取周和年，即選擇一個具體的哪一周，例如2017年10月第42周，選擇后會以“2017年第42周”的形式顯示。

【示例3】下面是week類型的一個應用示例。

    <form action="demo_form.php" method="get">
    請選擇年份和周數： <input type="week" name="week1" />
    <input type="submit" />
    </form>

以上代碼在Chrome瀏覽器中的運行結果如圖3.18所示，在Opera瀏覽器中的運行結果如圖3.19所示。Chrome瀏覽器中顯示為右側帶有微調按鈕的數字輸入框，輸入或微調時會顯示年份和周數，而不會顯示日期。Opera瀏覽器中單擊右側小箭頭時會顯示出日期控件，用戶可以使用控件來選擇具體的年份和周數，但不能選擇具體日期。可以看到，整個月份中的日期都會以深灰色按周數顯示，單擊該區域可以選擇某一周。

圖3.18　在Chrome瀏覽器中的運行結果

圖3.19　在Opera瀏覽器中的運行結果

4．time類型

time類型的日期選擇器用于選取時間，具體到小時和分鐘，例如，選擇后會以22:59的形式顯示。

【示例4】下面是time類型的一個應用示例。

    <form action="demo_form.php" method="get">
    請選擇或輸入時間： <input type="time" name="time1" />
    <input type="submit" />
    </form>

以上代碼在Chrome瀏覽器中的運行結果如圖3.20所示，在Opera瀏覽器中的運行結果如圖3.21所示。

圖3.20　在Chrome瀏覽器中的運行結果

圖3.21　在Opera瀏覽器中的運行結果

除了可以使用微調按鈕之外，還可以直接輸入時間值。如果輸入了錯誤的時間格式并單擊了“提交”按鈕，則在Chrome瀏覽器中會自動更正為最接近的合法值，而在IE 10瀏覽器中則以普通的文本框顯示，如圖3.22所示。

time類型支持使用一些屬性來限定時間的大小范圍或合法的時間間隔，如表3.4所示。

表3.4　time類型的屬性

【示例5】可以使用下列代碼來限定時間。

    <form action="demo_form.php" method="get">
    請選擇或輸入時間：<input type="time" name="time1" step="5" value="09:00">
    <input type="submit" />
    </form>

以上代碼在Chrome瀏覽器中的運行結果如圖3.23所示，可以看到，在輸入框中出現設置的默認值“09:00”，并且當單擊微調按鈕時，會以5秒鐘為單位遞增或遞減。當然，用戶還可以使用min和max屬性指定時間的范圍。

圖3.22　IE10不支持該類型輸入框

圖3.23　使用屬性值限定時間類型

在date類型、month類型、week類型中也支持使用上述屬性值。

5．datetime類型

datetime類型的日期選擇器用于選取時間、日、月、年，其中時間為UTC時間。

【示例6】下面是datetime類型的一個應用示例。

    <form action="demo_form.php" method="get">
    請選擇或輸入時間：<input type="datetime" name="datetime1" />
    <input type="submit" />
    </form>

以上代碼在Safari瀏覽器中的運行結果如圖3.24所示，在iPhone中的運行結果如圖3.25所示。

圖3.24　在Safari瀏覽器中的運行結果

圖3.25　在iPhone中的運行結果

6．datetime-local類型

datetime-local類型的日期選擇器用于選取時間、日、月、年，其中時間為本地時間。

【示例7】下面是datetime-local類型的一個應用示例。

    <form action="demo_form.php" method="get">
    請選擇或輸入時間：<input type="datetime-local" name="datetime-local1" />
    <input type="submit" />
    </form>

以上代碼在Chrome瀏覽器中的運行結果如圖3.26所示，在Opera瀏覽器中的運行結果如圖3.27所示。

圖3.26　在Chrome瀏覽器中的運行結果

圖3.27　在Opera瀏覽器中的運行結果

3.2.6　search——搜索框

視頻講解

search類型的input元素提供用于輸入搜索關鍵詞的文本框。在外觀上看起來，search類型的input元素與普通的text類型的區別：當輸入內容時，右側會出現一個“×”圖標，單擊即可清除搜索框。

【示例】下面是search類型的一個應用示例。

    <form action="demo_form.php" method="get">
    請輸入搜索關鍵詞：<input type="search" name="search1" />
    <input type="submit" value="Go"/>
    </form>

以上代碼在Chrome瀏覽器中的運行結果如圖3.28所示。如果在搜索框中輸入要搜索的關鍵詞，在搜索框右側就會出現一個“×”按鈕。單擊該按鈕可以清除已經輸入的內容。在Windows系統中，新版的IE、Chrome、Opera瀏覽器支持“×”按鈕這一功能，Firefox瀏覽器則不支持，如圖3.29所示。

圖3.28　search類型的應用

圖3.29　Firefox沒有“×”按鈕

在Mac OS X或iOS系統中，Safari瀏覽器會將搜索框渲染成圓角，如圖3.30所示，而不是Windows系統中用戶常見到的方角。

圖3.30　iOS系統中的圓角搜索框

提示：在默認情況下，為Chrome、Safari和Mobile Safari等瀏覽器中的搜索框設置樣式是受到限制的。如果要消除這一約束，重新獲得CSS的控制權，可以使用專有的“-webkit-appearance: none；”聲明，例如：

3.2.7　tel——電話號碼框

視頻講解

tel類型的input元素提供專門用于輸入電話號碼的文本框。它并不限定只輸入數字，因為很多的電話號碼還包括其他字符，如“+”“-”“（”“）”等，例如86-0536-8888888。

【示例】下面是tel類型的一個應用示例。

    <form action="demo_form.php" method="get">
    請輸入電話號碼：<input type="tel" name="tel1" />
    <input type="submit" value="提交"/>
    </form>

以上代碼在Chrome瀏覽器中的運行結果如圖3.31所示。從某種程度上來說，所有的瀏覽器都支持tel類型的input元素，因為它們都會將其作為一個普通的文本框來顯示。HTML5規則并不需要瀏覽器執行任何特定的電話號碼語法或以任何特別的方式來顯示電話號碼。

iPhone或iPad中的瀏覽器遇到tel類型的input元素時，會自動變換觸摸屏幕鍵盤以方便用戶輸入，如圖3.32所示。

圖3.31　tel類型的應用

圖3.32　iPhone中的屏幕鍵盤變化

3.2.8　color——拾色器

視頻講解

color類型的input元素提供專門用于選擇顏色的文本框。當color類型文本框獲取焦點后，會自動調用系統的顏色窗口，包括蘋果系統也能彈出相應的系統色盤。

【示例】下面是color類型的一個應用示例。

    <form action="demo_form.php" method="get">
    請選擇一種顏色：<input type="color" name="color1" />
    <input type="submit" value="提交"/>
    </form>

以上代碼在Opera瀏覽器中的運行結果如圖3.33所示，單擊顏色文本框，會打開Windows系統的“顏色”對話框，如圖3.34所示，選擇一種顏色之后，單擊“確定”按鈕返回網頁，這時可以看到顏色文本框顯示對應顏色效果，如圖3.35所示。

圖3.33　color類型的應用

圖3.34　Windows系統中的“顏色”對話框

圖3.35　設置顏色后效果