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ì)彈出顏色選擇框供你選擇。
date
// 谷歌 歐鵬 蘋果支持
// 提供日期選擇
<input type="date" name="bday">
注意：?當(dāng)點(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默認(rèn)
<input type="number" name="quantity" min="1" max="5">
注意：右邊有兩增減圖標(biāo)。
range
// 高版本IE 谷歌 歐鵬 蘋果支持
// 隨機(jī)數(shù)字,滑塊控制
// 參數(shù)與number一樣
<input type="range" name="points" min="1" max="10">
search
// 谷歌 蘋果支持
// 搜索域
<input type="search" name="googlesearch">
tel
// 均不支持
<input type="tel" name="usrtel">
time
// 谷歌 蘋果 歐鵬支持
// 時(shí)間控制器
<input type="time" name="usr_time">
url
// 高版本IE 火狐 谷歌 歐鵬支持
// 提交時(shí)校驗(yàn)url
<input type="url" name="homepage">
week
// 谷歌 蘋果 歐鵬支持
// 定義周和年(無時(shí)區(qū))
<input type="week" name="week_year">
展示一個(gè)目前瀏覽器對(duì)這些? input? 的支持情況
input 種類 ? ?IE ? ?FF ? ?Opero ? ?Chrome ? ?
search ? ?不支持 ? ?不支持 ? ?不支持 ? ?不支持 ? ?
number ? ?不支持 ? ?不支持 ? ?9.0以上 ? ?不支持 ? ?
range ? ?不支持 ? ?不支持 ? ?9.0以上 ? ?4.0以上 ? ?
color ? ?不支持 ? ?不支持 ? ?不支持 ? ?不支持 ? ?
tel ? ?不支持 ? ?不支持 ? ?9.0以上 ? ?不支持 ? ?
url ? ?不支持 ? ?不支持 ? ?9.0以上 ? ?不支持 ? ?
email ? ?不支持 ? ?不支持 ? ?9.0以上 ? ?不支持 ? ?
時(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>
實(shí)例2：
<!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>
實(shí)例3：
<!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>
