HTML5新的表單屬性有哪些及怎么使用

本篇內(nèi)容主要講解“HTML5新的表單屬性有哪些及怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“HTML5新的表單屬性有哪些及怎么使用”吧!

網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù)團(tuán)隊是一支充滿著熱情的團(tuán)隊，執(zhí)著、敏銳、追求更好，是創(chuàng)新互聯(lián)的標(biāo)準(zhǔn)與要求，同時竭誠為客戶提供服務(wù)是我們的理念。創(chuàng)新互聯(lián)公司把每個網(wǎng)站當(dāng)做一個產(chǎn)品來開發(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)該擁有自動完成功能。

注釋：autocomplete 適用于 <form> 標(biāo)簽，以及以下類型的 <input> 標(biāo)簽：text, search, url, telephone, email, password, datepickers, range 以及 color。

當(dāng)用戶在自動完成域中開始輸入時，瀏覽器應(yīng)該在該域中顯示填寫的選項：

實例

<form action="demo_form.asp" method="get" autocomplete="on">

First name: <input type="text" name="fname" /><br />

Last name: <input type="text" name="lname" /><br />

E-mail: <input type="email" name="email" autocomplete="off" /><br />

<input type="submit" />

</form>

注釋：在某些瀏覽器中，您可能需要啟用自動完成功能，以使該屬性生效。

autofocus 屬性

autofocus 屬性規(guī)定在頁面加載時，域自動地獲得焦點。

注釋：autofocus 屬性適用于所有 <input> 標(biāo)簽的類型。

實例

User name: <input type="text" name="user_name"  autofocus="autofocus" />

form 屬性

form 屬性規(guī)定輸入域所屬的一個或多個表單。

注釋：form 屬性適用于所有 <input> 標(biāo)簽的類型。

form 屬性必須引用所屬表單的 id：

實例

<form action="demo_form.asp" method="get" id="user_form">

First name:<input type="text" name="fname" />

<input type="submit" />

</form>

Last name: <input type="text" name="lname" form="user_form" />

注釋：如需引用一個以上的表單，請使用空格分隔的列表。

表單重寫屬性

表單重寫屬性（form override attributes）允許您重寫 form 元素的某些屬性設(shè)定。

表單重寫屬性有：

formaction - 重寫表單的 action 屬性

formenctype - 重寫表單的 enctype 屬性

formmethod - 重寫表單的 method 屬性

formnovalidate - 重寫表單的 novalidate 屬性

formtarget - 重寫表單的 target 屬性

注釋：表單重寫屬性適用于以下類型的 <input> 標(biāo)簽：submit 和 image。

實例

<form action="demo_form.asp" method="get" id="user_form">

E-mail: <input type="email" name="userid" /><br />

<input type="submit" value="Submit" />

<br />

<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />

<br />

<input type="submit" formnovalidate="true" value="Submit without validation" />

<br />

</form>

注釋：這些屬性對于創(chuàng)建不同的提交按鈕很有幫助。

height 和 width 屬性

height 和 width 屬性規(guī)定用于 image 類型的 input 標(biāo)簽的圖像高度和寬度。

注釋：height 和 width 屬性只適用于 image 類型的 <input> 標(biāo)簽。

實例

<input type="image" src="img_submit.gif" width="99" height="99" />

list 屬性

list 屬性規(guī)定輸入域的 datalist。datalist 是輸入域的選項列表。

注釋：list 屬性適用于以下類型的 <input> 標(biāo)簽：text, search, url, telephone, email, date pickers, number, range 以及 color。

實例

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="W3Schools" value="http://www.w3school.com.cn" />

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

min、max 和 step 屬性

min、max 和 step 屬性用于為包含數(shù)字或日期的 input 類型規(guī)定限定（約束）。

max 屬性規(guī)定輸入域所允許的最大值。

min 屬性規(guī)定輸入域所允許的最小值。

step 屬性為輸入域規(guī)定合法的數(shù)字間隔（如果 step="3"，則合法的數(shù)是 -3,0,3,6 等）。

注釋：min、max 和 step 屬性適用于以下類型的 <input> 標(biāo)簽：date pickers、number 以及 range。

下面的例子顯示一個數(shù)字域，該域接受介于 0 到 10 之間的值，且步進(jìn)為 3（即合法的值為 0、3、6 和 9）：

實例

Points: <input type="number" name="points" min="0" max="10" step="3" />

multiple 屬性

multiple 屬性規(guī)定輸入域中可選擇多個值。

注釋：multiple 屬性適用于以下類型的 <input> 標(biāo)簽：email 和 file。

實例

Select images: <input type="file" name="img" multiple="multiple" />

novalidate 屬性

novalidate 屬性規(guī)定在提交表單時不應(yīng)該驗證 form 或 input 域。

注釋：novalidate 屬性適用于 <form> 以及以下類型的 <input> 標(biāo)簽：text, search, url, telephone, email, password, date pickers, range 以及 color.

實例

<form action="demo_form.asp" method="get" novalidate="true">

E-mail: <input type="email" name="user_email" />

<input type="submit" />

</form>

pattern 屬性

pattern 屬性規(guī)定用于驗證 input 域的模式（pattern）。

模式（pattern） 是正則表達(dá)式。

注釋：pattern 屬性適用于以下類型的 <input> 標(biāo)簽：text, search, url, telephone, email 以及 password。

下面的例子顯示了一個只能包含三個字母的文本域（不含數(shù)字及特殊字符）：

實例

Country code: <input type="text" name="country_code"

pattern="[A-z]{3}" title="Three letter country code" />

placeholder 屬性

placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。

注釋：placeholder 屬性適用于以下類型的 <input> 標(biāo)簽：text, search, url, telephone, email 以及 password。

提示（hint）會在輸入域為空時顯示出現(xiàn)，會在輸入域獲得焦點時消失：

實例

<input type="search" name="user_search"  placeholder="Search W3School" />

required 屬性

required 屬性規(guī)定必須在提交之前填寫輸入域（不能為空）。

注釋：required 屬性適用于以下類型的 <input> 標(biāo)簽：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

實例

Name: <input type="text" name="usr_name" required="required" />

到此，相信大家對“HTML5新的表單屬性有哪些及怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)站名稱：HTML5新的表單屬性有哪些及怎么使用
網(wǎng)站路徑：http://muchs.cn/article30/pgojso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、Google、自適應(yīng)網(wǎng)站、小程序開發(fā)、網(wǎng)站設(shè)計公司、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)