本篇內(nèi)容主要講解“HTML5新的表單屬性有哪些及怎么使用”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“HTML5新的表單屬性有哪些及怎么使用”吧!
網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù)團(tuán)隊(duì)是一支充滿(mǎn)著熱情的團(tuán)隊(duì),執(zhí)著、敏銳、追求更好,是創(chuàng)新互聯(lián)的標(biāo)準(zhǔn)與要求,同時(shí)竭誠(chéng)為客戶(hù)提供服務(wù)是我們的理念。創(chuàng)新互聯(lián)公司把每個(gè)網(wǎng)站當(dāng)做一個(gè)產(chǎn)品來(lái)開(kāi)發(fā),精雕細(xì)琢,追求一名工匠心中的細(xì)致,我們更用心!
新的 form 屬性:
autocomplete
novalidate
新的 input 屬性:
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required
瀏覽器支持
Input type IE Firefox Opera Chrome Safari
autocomplete 8.0 3.5 9.5 3.0 4.0
autofocus No No 10.0 3.0 4.0
form No No 9.5 No No
form overrides No No 10.5 No No
height and width 8.0 3.5 9.5 3.0 4.0
list No No 9.5 No No
min, max and step No No 9.5 3.0 No
multiple No 3.5 No 3.0 4.0
novalidate No No No No No
pattern No No 9.5 3.0 No
placeholder No No No 3.0 3.0
required No No 9.5 3.0 No
autocomplete 屬性
autocomplete 屬性規(guī)定 form 或 input 域應(yīng)該擁有自動(dòng)完成功能。
注釋?zhuān)篴utocomplete 適用于
注釋?zhuān)涸谀承g覽器中,您可能需要啟用自動(dòng)完成功能,以使該屬性生效。
autofocus 屬性
autofocus 屬性規(guī)定在頁(yè)面加載時(shí),域自動(dòng)地獲得焦點(diǎn)。
注釋?zhuān)篴utofocus 屬性適用于所有 標(biāo)簽的類(lèi)型。
實(shí)例
User name:
form 屬性
form 屬性規(guī)定輸入域所屬的一個(gè)或多個(gè)表單。
注釋?zhuān)篺orm 屬性適用于所有 標(biāo)簽的類(lèi)型。
form 屬性必須引用所屬表單的 id:
實(shí)例
Last name:
注釋?zhuān)喝缧枰靡粋€(gè)以上的表單,請(qǐng)使用空格分隔的列表。
表單重寫(xiě)屬性
表單重寫(xiě)屬性(form override attributes)允許您重寫(xiě) form 元素的某些屬性設(shè)定。
表單重寫(xiě)屬性有:
formaction - 重寫(xiě)表單的 action 屬性
formenctype - 重寫(xiě)表單的 enctype 屬性
formmethod - 重寫(xiě)表單的 method 屬性
formnovalidate - 重寫(xiě)表單的 novalidate 屬性
formtarget - 重寫(xiě)表單的 target 屬性
注釋?zhuān)罕韱沃貙?xiě)屬性適用于以下類(lèi)型的 標(biāo)簽:submit 和 image。
實(shí)例
注釋?zhuān)哼@些屬性對(duì)于創(chuàng)建不同的提交按鈕很有幫助。
height 和 width 屬性
height 和 width 屬性規(guī)定用于 image 類(lèi)型的 input 標(biāo)簽的圖像高度和寬度。
注釋?zhuān)篽eight 和 width 屬性只適用于 image 類(lèi)型的 標(biāo)簽。
實(shí)例
list 屬性
list 屬性規(guī)定輸入域的 datalist。datalist 是輸入域的選項(xiàng)列表。
注釋?zhuān)簂ist 屬性適用于以下類(lèi)型的 標(biāo)簽:text, search, url, telephone, email, date pickers, number, range 以及 color。
實(shí)例
Webpage:
min、max 和 step 屬性
min、max 和 step 屬性用于為包含數(shù)字或日期的 input 類(lèi)型規(guī)定限定(約束)。
max 屬性規(guī)定輸入域所允許的最大值。
min 屬性規(guī)定輸入域所允許的最小值。
step 屬性為輸入域規(guī)定合法的數(shù)字間隔(如果 step="3",則合法的數(shù)是 -3,0,3,6 等)。
注釋?zhuān)簃in、max 和 step 屬性適用于以下類(lèi)型的 標(biāo)簽:date pickers、number 以及 range。
下面的例子顯示一個(gè)數(shù)字域,該域接受介于 0 到 10 之間的值,且步進(jìn)為 3(即合法的值為 0、3、6 和 9):
實(shí)例
Points:
multiple 屬性
multiple 屬性規(guī)定輸入域中可選擇多個(gè)值。
注釋?zhuān)簃ultiple 屬性適用于以下類(lèi)型的 標(biāo)簽:email 和 file。
實(shí)例
Select images:
novalidate 屬性
novalidate 屬性規(guī)定在提交表單時(shí)不應(yīng)該驗(yàn)證 form 或 input 域。
注釋?zhuān)簄ovalidate 屬性適用于
pattern 屬性
pattern 屬性規(guī)定用于驗(yàn)證 input 域的模式(pattern)。
模式(pattern) 是正則表達(dá)式。
注釋?zhuān)簆attern 屬性適用于以下類(lèi)型的 標(biāo)簽:text, search, url, telephone, email 以及 password。
下面的例子顯示了一個(gè)只能包含三個(gè)字母的文本域(不含數(shù)字及特殊字符):
實(shí)例
Country code:
pattern="[A-z]{3}" title="Three letter country code" />
placeholder 屬性
placeholder 屬性提供一種提示(hint),描述輸入域所期待的值。
注釋?zhuān)簆laceholder 屬性適用于以下類(lèi)型的 標(biāo)簽:text, search, url, telephone, email 以及 password。
提示(hint)會(huì)在輸入域?yàn)榭諘r(shí)顯示出現(xiàn),會(huì)在輸入域獲得焦點(diǎn)時(shí)消失:
實(shí)例
required 屬性
required 屬性規(guī)定必須在提交之前填寫(xiě)輸入域(不能為空)。
注釋?zhuān)簉equired 屬性適用于以下類(lèi)型的 標(biāo)簽:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
實(shí)例
Name:
到此,相信大家對(duì)“HTML5新的表單屬性有哪些及怎么使用”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún),關(guān)注我們,繼續(xù)學(xué)習(xí)!