HTML5 針對 input 標籤擴充了數種不同類型的 type ,例如針對數字輸入的文字方塊設定如下:
其中的 type 屬性指定為 number ,如此一來這個欄位會針對數字型態的資料輸入提供必要的輔助,特別是在行動裝置上面,下表列舉幾種在行動裝置上影響輸入操作的設定:
以下依表列型態列舉輸入畫面,可以看到點擊不同的輸入欄位時,顯示的鍵盤均不同,按鍵以需要輸入的資料型態提供,例如電子郵件就會有一個特別的@符號等等。


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

如果想要看更多的裝置呈現效果,請參考 mobile input types : http://mobileinputtypes.com/
<input type="number" /></p>
其中的 type 屬性指定為 number ,如此一來這個欄位會針對數字型態的資料輸入提供必要的輔助,特別是在行動裝置上面,下表列舉幾種在行動裝置上影響輸入操作的設定:
type
|
說明
|
tel
|
電話
|
number
|
數字
|
email
|
電子郵件
|
url
|
網址列
|
text
|
文字輸入
|
date
|
日期
|
以下依表列型態列舉輸入畫面,可以看到點擊不同的輸入欄位時,顯示的鍵盤均不同,按鍵以需要輸入的資料型態提供,例如電子郵件就會有一個特別的@符號等等。





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



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