HTML5移動開發中的input輸入框類型

HTML5規范引入了許多新的input輸入框類型

在HTML5移動開發中，通過這些新的輸入框類型來顯示定制後的鍵盤布局，用戶體驗更好，更容易填寫各種表單

本文中，實測手機為腎4S與米4

數字類型number

定義input類型為type="number"時，iOS顯示數字、標點及符號鍵盤，Android顯示撥號鍵盤。代碼如下所示

1 <input type="number" id="number" name="number" />

附圖：左圖iOS右圖Android

電話號碼類型tel

定義input類型為type="tel"時，iOS與Android都顯示撥號鍵盤。代碼如下所示

1 <input type="tel" id="tel" name="tel" />

附圖：左圖iOS右圖Android

電子郵件類型email

定義input類型為type="email"時，iOS與Android都顯示字母及電子郵件符號鍵盤。代碼如下所示

1 <input type="email" id="email" name="email" />

附圖：左圖iOS右圖Android

鏈接類型url

定義input類型為type="url"時，iOS與Android都顯示字母及鏈接符號鍵盤。代碼如下所示

1 <input type="url" id="url" name="url" />

附圖：左圖iOS右圖Android

日期類型date

定義input類型為type="date"時，iOS與Android都顯示日期拾取器，風格差異很大。代碼如下所示

1 <input type="date" id="date" name="date" />

附圖：左圖iOS右圖Android

時間類型time

定義input類型為type="time"時，iOS與Android都顯示時間拾取器，風格差異很大。代碼如下所示

1 <input type="time" id="time" name="time" />

附圖：左圖iOS右圖Android

日期時間類型datetime

定義input類型為type="datetime"時，iOS調用失敗，Android依次顯示日期時間拾取器。代碼如下所示

1 <input type="datetime" id="datetime" name="datetime" />

附圖：左圖iOS右圖Android

月份類型month

定義input類型為type="month"時，iOS顯示月份拾取器，Android顯示日期拾取器但是只記錄年份與月份。代碼如下所示

1 <input type="month" id="month" name="month" />

附圖：左圖iOS右圖Android

iOS鍵盤布局基本一致，Android不同手機鍵盤布局會有不小的出入

HTML5新增的標簽和廢除的標簽 http://www.linuxidc.com/Linux/2016-01/127516.htm

40 個重要的 HTML5 面試題及答案 http://www.linuxidc.com/Linux/2015-12/126824.htm

HTML5與CSS3基礎教程（第8版）中文高清版 PDF http://www.linuxidc.com/Linux/2015-12/125734.htm

HTML5 地理位置定位(HTML5 Geolocation)原理及應用 http://www.linuxidc.com/Linux/2012-07/65129.htm

HTML5移動開發即學即用(雙色) PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90351.htm

HTML5入門學習筆記 http://www.linuxidc.com/Linux/2013-09/90089.htm

HTML5移動Web開發筆記 http://www.linuxidc.com/Linux/2013-09/90088.htm

HTML5 開發中的本地存儲的安全風險 http://www.linuxidc.com/Linux/2013-06/86486.htm

《HTML5與CSS3權威指南》及相配套源碼 http://www.linuxidc.com/Linux/2013-02/79950.htm

關於 HTML5 令人激動的 10 項預測 http://www.linuxidc.com/Linux/2013-02/79917.htm

HTML5與CSS3實戰指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm