使用 HTML5 input 型別提升移動端輸入體驗

標籤：

在過去的幾年裡，在行動裝置上瀏覽網頁已變得難以置信的受歡迎。 但是這些裝置上的瀏覽體驗，有時遺留很多的有待改進。當涉及到填寫表單時，這一點尤為明顯。幸運的是，HTML5規範引入了許多新input類型，使得在行動裝置上，使用者更容易填寫的你的網頁表單。

這是一個相當棒的進展，行動瀏覽器廠商拿起新的HTML5 input類型，並使用它們來顯示定製過的鍵盤配置，使使用者更容易輸入資料。 

在本文中，你將學到8種已經在HTML5中引入的新input類型。

注意: 本文中，iOS的螢幕使用iPhone5和Safari截取。 Android螢幕則是在虛擬設備上運行Android4.1和其備有的網頁瀏覽器截取。

 

電子郵件input類型

IOS（左）和Android（右）的電子郵件input的鍵盤

email 類型，iOS和Android瀏覽器都顯示了輕度定製過的鍵盤。注意縮短的空格鍵的存在和iOS鍵盤的最底一行加入了@ 和句號（.）鍵。 而在Android上，標準逗號鍵將出現在空格鍵的左邊，已經被一個@鍵替換。

<input type="email" name="email">

URL input 類型

iOS的URL input鍵盤

url  input 類型可以用來協助使用者輸入網址。在iOS上，所有的空格鍵已被替換成句號（.）鍵和正斜杠（/）鍵，以及一個特殊的.com鍵。 

我的測試顯示，Android鍵盤沒有變化。

<input type="url" name="url">

電話號碼input類型

IOS（左）和Android（右）的電話input的鍵盤

使用 tel input 類型時，iOS和Android都是提示顯示鍵盤，而不是標準鍵盤。

<input type="tel" name="tel">

數字input類型

IOS（左）和Android（右）的數字input的鍵盤 

number input 類型促使iOS顯示數字和標點符號的鍵盤。Android瀏覽器將啟動一個類似顯示電話輸入的鍵盤。

<input type="number" name="number">

日期input類型

iOS日期拾取器

對於日期和時間，也有許多input類型可用。由於他們保證了你的資料是以一個標準的格式提供，所以這些可以是非常有用的。

在iOS上的 date input 類型會提示顯示一個日期選取器。不幸的是，Android瀏覽器還未支援任何datetime 的input類型。

<input type="date" name="date">

時間input類型

iOS時間拾取器

使用time類型時會提示iOS顯示一個簡單的拾取器來選擇小時和分鐘。

<input type="time" name="time">

日期和時間input類型

iOS日期時間拾取器

使用datetime類型時將顯示一個用於同時選擇日期和時間的拾取器。

雖然沒有顯式的選擇年的選項，但是拾取器會自動根據您選擇的日期和月份將年添加到你的input。

<input type="datetime" name="datetime">

月份input類型

iOS 月份拾取器

month 類型時將會顯示日期選取器的簡化版本。

HTML規範還定義了一個week的input類型，然而，在我測試過的瀏覽器上，這好像並沒有實現。

<input type="month" name="month">

HTML5的input類型的瀏覽器安全色性

不支援這些新input類型的瀏覽器將只給使用者顯示一個簡單的文本input。 這意味著，你可以繼續前進，今天開始使用這些新的輸入類型吧！

在案頭瀏覽器中，能支援日期/時間的input類型的瀏覽器仍非常有限。Opera瀏覽器目前有著最好的實現，支援本篇文章中所有提到的類型。Google的Chrome瀏覽器支援 date 類型，但現在沒有其他東西。Safari瀏覽器有日期格式的文字欄位，但不支援像Opera和Chrome上顯示的那樣的日曆小工具。

使用 HTML5 input 型別提升移動端輸入體驗