在最近的項目中，策划老是要求我們彈出各種類型的鍵盤，特別是在iOS下，例如輸入帳號的時候，不應該支持輸入中文，該輸入純數字的時候就應該談數字鍵盤等。
個人覺得這些都是我們平時開發很少意識到的，雖然有些刁鑽，但都是為了用戶體驗，為了我們的產品，於是便在網上找了一些資料，在此與各位朋友分享：
在過去的幾年里，在移動設備上瀏覽網頁已變得難以置信的受歡迎。 但是這些設備上的瀏覽體驗，有時遺留很多的有待改進。當涉及到填寫表單時，這一點尤為明顯。幸運的是，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類型
month 類型時將會顯示日期選擇器的簡化版本。
HTML規范還定義了一個week的input類型，然而，在我測試過的瀏覽器上，這好像並沒有實現。
<input type="month" name="month">
HTML5的input類型的瀏覽器兼容性
不支持這些新input類型的瀏覽器將只給用戶顯示一個簡單的文本input。 這意味着，你可以繼續前進，今天開始使用這些新的輸入類型吧！
在桌面瀏覽器中，能支持日期/時間的input類型的瀏覽器仍非常有限。Opera瀏覽器目前有着最好的實現，支持本篇文章中所有提到的類型。谷歌的Chrome瀏覽器支持 date 類型，但現在沒有其他東西。Safari瀏覽器有日期格式的文本字段，但不支持像Opera和Chrome上顯示的那樣的日歷小組件。
幸運的是，曾經忍受一個差體驗的瀏覽器的日子，在移動端已很快不再。利用HTML5引入的移動端友好的新特性的好處， 對我們所有的用戶而言，都肯定能夠享受愉快的體驗，無論他們是使用哪種設備。
有用的鏈接
本文轉載自：http://www.oschina.net/translate/using-html5-input-types-to-enhance-the-mobile-browsing-experience?cmp