在HTML5中新增了不少實用的東西，本文針對From input type新的類型作介紹，有甚麼不懂的部分可以在下面留言。
New Attribute:
先從屬性開始介紹，這樣下面再介紹類型時比較好了解。
autocomplete //瀏覽器自動完成
autofocus //自動矚目(用用看就知道了)
form //指定所屬表單
formaction ="?a=1&b=3" //單獨指定提交後執行動作(type=submit)
formmethod="post" //單獨指定傳送方式(type=submit)
formnovalidate //指定不驗證
formtarget="_blank" //指定視窗模式(type=submit)
height and width //高和寬
list //清單
min and max //最小值與最大值
step //數字間格
multiple //允許多個項
pattern = "[A-Z]{5}" //使用正規表示法驗證資料
placeholder = "Ex:xxx-xxxxxxx" //顯示提示文字
required //要求驗證資料New Type:
Browser Support
IE
|
Chrome
|
Firefox
|
Safari
|
Opera
| |
Number
|
❌
|
✔
|
❌
|
✔
|
✔
|
Date
|
❌
|
✔
|
❌
|
✔
|
✔
|
Month
|
❌
|
✔
|
❌
|
✔
|
✔
|
Week
|
❌
|
✔
|
❌
|
✔
|
✔
|
Time
|
❌
|
✔
|
❌
|
✔
|
✔
|
Datetime
|
❌
|
❌
|
❌
|
❌
|
❌
|
Datetime-local
|
❌
|
✔
|
❌
|
✔
|
✔
|
Email
|
✔
|
✔
|
✔
|
❌
|
✔
|
Search
|
❌
|
✔
|
❌
|
✔
|
❌
|
TEL
|
❌
|
❌
|
❌
|
✔
|
❌
|
URL
|
✔
|
✔
|
✔
|
❌
|
✔
|
Color
|
❌
|
✔
|
✔
|
❌
|
✔
|
Range
|
✔
|
✔
|
✔
|
✔
|
✔
|
Number
這個類型顧名思義就是只能輸入數字，還能加入一些限制例如最大值、最小值與間格。
<input type="number" min="1" max="5" step="3">
|
Date
這是一個可以輸入格式化日期的類型，還可以依照需求加上max、min、step。
<input type="date" step="2" min="2015-10-01" max="2015-10-31">
|
Month
選擇年份與月份用，依然可以加上限制。
<input type="month" max="2015-12" min="2015-05">
|
Week
選擇某年中的第幾周。
<input type="week" min="2015-W41" max="2015-W50" step="2">
|
Time
選擇一天之中某個時間，。
<input type="time" min="09:00" max="15:00">
|
Datetime
選擇日期與時間，因為目前五大瀏覽器都不支援....所以就不多說了。Datetime-local
跟上面那個類型是一樣功能....
<input type="datetime-local" min="2015-10-01T00:00" max="2015-10-31T00:00">
|
<input type="email">
|
Search
意義不明的類型，本以為按下去會自動去搜尋，結果沒有任何動作。
<input type="search">
|
TEL
專門輸入電話的Text，不過驗證需要自己打屬性喔。
<input type="tel" pattern="[0][9][0-9]{8}" placeholder="09xxxxxxxx">
|
URL
專門輸入網址用，會自動驗證是否為網址。
<input type="url" placeholder="http://it-life-wyx.blogspot.tw/">
|
Color
選擇顏色用
<input type="color" value="#FFEE00">
|
Range
在一個範圍中選擇一個數字
<input type="range" min="-10" max="10" step="2">
|
本文參考W3C撰寫，因資訊時常更新，如有異議請留言告知。
沒有留言:
張貼留言