HTML5 擁有多個(gè)新的表單輸入類型。這些新特性提供了更好的輸入控制和驗(yàn)證。
介紹這些新的輸入類型:
EMAIL
在提交表單時(shí)會(huì)自動(dòng)驗(yàn)證email的格式,opera瀏覽器中必須有name屬性,否則不起作用
效果:
URL
效果:
NUMBER
可以限制輸入的數(shù)字,step為上一個(gè)數(shù)字與下一個(gè)數(shù)字的間隔
效果:
RANGE
滑動(dòng)條,能過(guò)選擇性的對(duì)限制范圍內(nèi)的數(shù)值進(jìn)行設(shè)置
效果:
HTML5 擁有多個(gè)可供選取日期和時(shí)間的新輸入類型:
This is how Opera renders <input type="date">
:
If you need a time to go with that date, Opera also supports <input type="datetime">
:
If you only need a month + year (perhaps a credit card expiration date), Opera can render a <input type="month">
:
Less common, but also available, is the ability to pick a specific week of a year with <input type="week">
:
Last but not least, you can pick a time with <input type="time">
:
其中圖片中顯示的UTC為世界統(tǒng)一時(shí)間
SEARCH
這里的datalist相當(dāng)于下拉列表,可以進(jìn)行選擇
效果:
TELEPHONE
可輸入一個(gè)電話號(hào)碼
效果:
COLOR
可以獲取顏色
效果:
以上個(gè)人圖片效果顯示均來(lái)自opera瀏覽器
下面圖片時(shí)各主流瀏覽器對(duì)input的支持情況:
Input type | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
No | No | 9.0 | No | No | |
url | No | No | 9.0 | No | No |
number | No | No | 9.0 | No | No |
range | No | No | 9.0 | 4.0 | 4.0 |
Date pickers | No | No | 9.0 | No | No |
search | No | No | No | No | No |
color | No | No | No | No | No |
input標(biāo)簽表單類型的顯示情況:
參考網(wǎng)站:A Form of Madness
聯(lián)系客服