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

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

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

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

 

數字類型number

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

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

附圖：左圖iOS右圖Android

 

電話號碼類型tel

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

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

附圖：左圖iOS右圖Android

 

電子郵件類型email

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

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

附圖：左圖iOS右圖Android

 

連接類型url

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

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

附圖：左圖iOS右圖Android

 

日期類型date

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

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

附圖：左圖iOS右圖Android

 

時間類型time

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

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

附圖：左圖iOS右圖Android

 

日期時間類型datetime

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

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

附圖：左圖iOS右圖Android

 

月份類型month

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

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

附圖：左圖iOS右圖Android

 

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