HTML5 新的 Input 類型
html表單一直都是web的核心技術(shù)之一,有了它才能在web上進(jìn)行各種各樣的應(yīng)用。 html5的input新增了許多新控制類型,方便我們對(duì)表單的驗(yàn)證。
opera對(duì)新屬性的支持性最好,ie10以下不支持,其他主流瀏覽器部分支持。
新的Input 類型
color
// 谷歌歐鵬支援
// 顯示顏色供選擇,提交值為8進(jìn)位
<input type="color" name="favcolor" />
#注意:當(dāng)點(diǎn)擊黑框時(shí),會(huì)彈出一個(gè)顏色選擇框供你選擇。
date
// 谷歌歐鵬蘋果支援
// 提供日期選擇
<input type="date" name="bday">
注意:?點(diǎn)擊黑色下三角符號(hào)時(shí)會(huì)彈出如下日起選擇框供你選擇日期,其他新增時(shí)間類型也採用此樣式。
datetime
// 歐鵬蘋果支援
// 提供時(shí)間與日期選擇
<input type="datetime" name="bdaytime">
datetime-local
// 谷歌歐鵬蘋果支援
// 無時(shí)區(qū)的日期與時(shí)間
<input type="datetime-local" name ="bdaytime">
// 火狐谷歌歐鵬支援
// 在提交市會(huì)自動(dòng)校驗(yàn),值是否合法
< input type="email" name="email">
#month
// 谷歌蘋果歐鵬支援
//無時(shí)區(qū)的日期
<input type="month" name="bdaymonth">
number
// 高版本IE 谷歌歐鵬蘋果支援
// 限制數(shù)字
// max 最大min最小step間隔value預(yù)設(shè)
<input type="number" name="quantity" min="1" max="5">
注意:右邊有兩幅增減圖示。
range
// 高版本IE 谷歌歐鵬蘋果支援
// 隨機(jī)數(shù)字,滑桿控制
// 參數(shù)與number一樣
< ;input type="range" name="points" min="1" max="10">
search
// 谷歌蘋果支援
// 搜尋領(lǐng)域
<input type="search" name="googlesearch">
tel
// 皆不支援
<input type="tel" name="usrtel">
time
// Google蘋果歐鵬支持
// 時(shí)間控制器
<input type="time" name="usr_time">
url
// 高版本IE 火狐谷歌歐鵬支援
// 提交時(shí)校驗(yàn)url
<input type="url" name="homepage">
// 定義週和年(無時(shí)區(qū))
<input type="week" name="week_year">
展示一個(gè)目前瀏覽器對(duì)這些瀏覽器對(duì)這些的支援情況
input不支援? ?number ? ?不支援? ?不支援? ?9.0以上? ?不支援? ?range ? ?不支援? ?不支援? ?不支援? ?##tel ? ?不支援? ?不支援? ?9.0以上? ?不支援? ?
url ? ?不支援? ?不支援? ?9.超過 「? ?
時(shí)間? ?不支援? ?不支援? ?9.0以上? ?不支援? ?
實(shí)例1:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action="demo-form.php" method="get"> Points: <input type="range" name="points" min="1" max="10"> <input type="submit"> </form> <p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action="demo-form.php"> 數(shù)量 ( 1 到 5 之間): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> <p><b>注意:</b>Internet Explorer 9 及更早IE版本不支持 type="number" 。</p> </body> </html>
## 從1f
<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action="demo-form.php"> 選擇周: <input type="week" name="year_week"> <input type="submit"> </form> </body> </html>######實(shí)例3:#########rrreee##########