HTML5 INPUT 標籤於行動裝置的呈現

HTML5 針對 input 標籤擴充了數種不同類型的 type ,例如針對數字輸入的文字方塊設定如下:

<input type="number" /></p>

其中的 type 屬性指定為 number ,如此一來這個欄位會針對數字型態的資料輸入提供必要的輔助,特別是在行動裝置上面,下表列舉幾種在行動裝置上影響輸入操作的設定:

type
說明
tel
電話
number
數字
email
電子郵件
url
網址列
text
文字輸入
date
日期

以下依表列型態列舉輸入畫面,可以看到點擊不同的輸入欄位時,顯示的鍵盤均不同,按鍵以需要輸入的資料型態提供,例如電子郵件就會有一個特別的@符號等等。

  

 

如果是設定為 date ,則行動裝置會提供日期資料的輸入工具:

  

如果想要看更多的裝置呈現效果,請參考 mobile input types : http://mobileinputtypes.com/


沒有留言: