51CTO推薦專題：HTML 5 下一代Web開發(fā)標(biāo)準(zhǔn)詳解
學(xué)習(xí)HTML 5半年有余了,雖然對(duì)它的離線存儲(chǔ)以及canvas等革新性技術(shù)還是一知半解,但我還是希望我現(xiàn)在所學(xué)到的能幫助更多的前端人學(xué)習(xí)這門毋庸置疑是新趨勢(shì)的技術(shù).本文我將詳細(xì)介紹一下HTML 5中對(duì)表單功能的更新.。
一、表單結(jié)構(gòu)更自由
XHTML中需要放在form之中的諸如inpu/button/select/textarea等標(biāo)簽元素,在HTML 5中完全可以放在頁面任何位置,然后通過新增的form屬性指向元素所屬表單的ID值,即可關(guān)聯(lián)起來.
比如:
<form id="iform"> <input type="text"> ... </form> <input value="我在id為iform的表單外" form="foo"> 二、多樣的輸入類型(大部分新類型目前并不為所有標(biāo)準(zhǔn)瀏覽器支持,請(qǐng)參見樣例演示中的提示)
email輸入類型
<input type="email" name="email"> 此類型要求輸入格式正確的email地址,否則瀏覽器是不允許提交的,并會(huì)有一個(gè)錯(cuò)誤信息提示.此類型在Opera中必須指定name值,否則無效果.
url輸入類型
<input type="url"> 上面代碼展示的文本域要求輸入格式正確的URL地址,Opera中會(huì)自動(dòng)在開始處添加http://. 日期時(shí)間相關(guān)輸入類型(這些個(gè)很牛X的)
這一系列是很酷的一個(gè)類型,完全解決了煩瑣的JS日歷控件問題.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一樣. number輸入類型
<input type="date"> <input type="time"> <input type="month"> <input type="week"> 這個(gè)不用多解釋了,要求輸入一個(gè)數(shù)字字符,若未輸入則會(huì)拋出一個(gè)錯(cuò)誤.
range輸入類型
<input type="number"> 此類型將顯示一個(gè)可拖動(dòng)的滑塊條,并可通過設(shè)定max/min/step值限定拖動(dòng)范圍.拖動(dòng)時(shí)會(huì)反饋給value一個(gè)值.
search輸入類型
<input type="search"> 此類型表示輸入的將是一個(gè)搜索關(guān)鍵字,通過results=s可顯示一個(gè)搜索小圖標(biāo).
tel輸入類型
<input type="tel"> 此類型要求輸入一個(gè)電話號(hào)碼,但實(shí)際上它并沒有特殊的驗(yàn)證,與text類型沒什么區(qū)別.
color輸入類型
<input type="color"> 此類型表單,可讓用戶通過顏色選擇器選擇一個(gè)顏色值,并反饋到value中.
三、新增的表單屬性
placeholder屬性
<input type="text" placeholder="點(diǎn)擊我會(huì)以清除"> 這是一個(gè)很實(shí)用的屬性,免去了用JS去實(shí)現(xiàn)點(diǎn)擊清除表單初始值.瀏覽器支持也還不錯(cuò),MS除了Firefox,其他標(biāo)準(zhǔn)瀏覽器都能很好的支持.
require/pattern屬性
<input type="text" name="require" required=""> <input type="text" name="require1" required="required"> <input type="text" name="require2" pattern="^[1-9]\d{5}$"> 表單驗(yàn)證屬性,require類型時(shí),若輸入值為空,則拒絕提交,并會(huì)有一個(gè)提示.上面兩種寫法都對(duì),這個(gè)很有用.并且可以用于textarea以及hidden/image/submit類型.pattern類型為正則驗(yàn)證,可以完成各種復(fù)雜的驗(yàn)證.這兩種類型在Opera中必須指定name值,否則無效果.
autofocus屬性
<input type="text" autofocus="true"> 默認(rèn)聚焦屬性,可在頁面加載時(shí)聚焦到一個(gè)表單控件,類似于JS的focus().
list屬性
<input type="text" list="ilist"> <datalist id="ilist"> <option label="a" value="a"> </option><option label="b" value="b"> </option><option label="c" value="c"> </option></datalist> 該屬性需要與datalist屬性共用,datalist是對(duì)選擇框的記憶,而list屬性可以為選擇框自定義記憶的內(nèi)容.
max/min/step屬性
<input type="range" max="100" min="1" step="20"> 限制值的輸入范圍,以及值的輸入漸進(jìn)程度,比如可在number設(shè)定輸入最大值最小值,或者在range中設(shè)定拖動(dòng)階梯.
autocomplete屬性
<input type="text" autocomplete="on"> 此屬性是為表單提供自動(dòng)完成功能.如果該屬性為打開狀態(tài)可很好地自動(dòng)完成.一般來說,此屬性必須啟動(dòng)瀏覽器的自動(dòng)完成功能.
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。