Input 類型
HTML5的Input 屬性多了許多新的表單輸入類型,提供了更好的控制跟驗證,好好把握好新增的屬性,應用在表單上會更方便喔!新增的屬性如下:
color:可以讓用戶從檢色器中選擇一個顏色
date:可以讓用戶選擇一個日期
datetime:可以讓用戶選擇一個日期(UTC 時間)。
datetime-local:可以讓用戶選擇一個日期(無時區)。
email:可用於信箱檢測。PS. iPhone中的Safari瀏覽器支持email輸入類型(添加@和.com選項)。
month:可以讓用戶選擇一個月份。
number:用於應該包含數值的輸入域。
使用下面的屬性來規定對數字類型的限定:
屬性 | 描述 |
---|---|
disabled | 規定禁止用詞 |
max | 規定允許的最大值 |
maxlength | 規定輸入欄位的最大字元長度 |
min | 規定允許的最小值 |
pattern | 規定用於驗證輸入欄位的模式 |
readonly | 規定輸入欄位的值無法修改 |
required | 規定輸入欄位的值是必需的 |
size | 規定輸入欄位中的可見字元數 |
step | 規定輸入欄位的合法數字間隔 |
value | 規定輸入欄位的默認值 |
range:用於輸入數字範圍,且顯示的方式唯一個滑動條
屬性 | 描述 |
---|---|
max | 規定禁止用詞 |
min | 規定允許的最小值 |
step | 規定欲規範的的數字間隔 |
value | 規定默認值 |
search:用於搜索,比如站點搜尋或Google搜尋。
tel:輸入電話號碼。
time:可以讓用戶選擇一個時間。
url:用於輸入連結,且提交表單時會自動驗證URL的值。
week:可以讓用戶選擇週和年。