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

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

新的 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 屬性規定 form 或 input 域應該擁有自動完成功能。

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

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

實例

<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 屬性規定在頁面加載時，域自動地獲得焦點。

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

實例

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

form 屬性

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

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

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 元素的某些屬性設定。

表單重寫屬性有：

formaction - 重寫表單的 action 屬性

formenctype - 重寫表單的 enctype 屬性

formmethod - 重寫表單的 method 屬性

formnovalidate - 重寫表單的 novalidate 屬性

formtarget - 重寫表單的 target 屬性

注釋：表單重寫屬性適用于以下類型的 <input> 標簽：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>

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

height 和 width 屬性

height 和 width 屬性規定用于 image 類型的 input 標簽的圖像高度和寬度。

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

實例

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

list 屬性

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

注釋：list 屬性適用于以下類型的 <input> 標簽：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 屬性用于為包含數字或日期的 input 類型規定限定（約束）。

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

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

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

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

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

實例

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

multiple 屬性

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

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

實例

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

novalidate 屬性

novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。

注釋：novalidate 屬性適用于 <form> 以及以下類型的 <input> 標簽：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 屬性規定用于驗證 input 域的模式（pattern）。

模式（pattern） 是正則表達式。

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

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

實例

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

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

placeholder 屬性

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

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

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

實例

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

required 屬性

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

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

實例

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

到此，相信大家對“HTML5新的表單屬性有哪些及怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！