HTML5 的新的表單屬性

linux_wuliqiang

本章講解涉及<form> 和<input> 元素的新屬性。
新的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> 標簽，以及以下類型的<input> 標簽：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> 標簽的類型。
實例
User name: <input type=”text” name=”user_name” autofocus=”autofocus” />
form 屬性
form 屬性規(guī)定輸入域所屬的一個或多個表單。
注釋：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 元素的某些屬性設(shè)定。
表單重寫屬性有：
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>
注釋：這些屬性對于創(chuàng)建不同的提交按鈕很有幫助。
height 和width 屬性
height 和width 屬性規(guī)定用于image 類型的input 標簽的圖像高度和寬度。
注釋：height 和width 屬性只適用于image 類型的<input> 標簽。
實例
<input type=”image” src=”img_submit.gif” width=”99″ height=”99″ />
list 屬性
list 屬性規(guī)定輸入域的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 屬性用于為包含數(shù)字或日期的input 類型規(guī)定限定（約束）。
max 屬性規(guī)定輸入域所允許的最大值。
min 屬性規(guī)定輸入域所允許的最小值。
step 屬性為輸入域規(guī)定合法的數(shù)字間隔（如果step=”3″，則合法的數(shù)是-3,0,3,6 等）。
注釋：min、max 和step 屬性適用于以下類型的<input> 標簽：date pickers、number 以及
range。
下面的例子顯示一個數(shù)字域，該域接受介于0 到10 之間的值，且步進為3（即合法的值
為0、3、6 和9）：
實例
Points: <input type=”number” name=”points” min=”0″ max=”10″ step=”3″ />
multiple 屬性
multiple 屬性規(guī)定輸入域中可選擇多個值。
注釋：multiple 屬性適用于以下類型的<input> 標簽：email 和file。
實例
Select images: <input type=”file” name=”img” multiple=”multiple” />
novalidate 屬性
novalidate 屬性規(guī)定在提交表單時不應(yīng)該驗證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 屬性規(guī)定用于驗證input 域的模式（pattern）。
模式（pattern） 是正則表達式。您可以在我們的JavaScript 教程中學(xué)習(xí)到有關(guān)正則表達式
的內(nèi)容。
注釋：pattern 屬性適用于以下類型的<input> 標簽：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> 標簽：text, search, url, telephone, email 以
及password。
提示（hint）會在輸入域為空時顯示出現(xiàn)，會在輸入域獲得焦點時消失：
實例
<input type=”search” name=”user_search” placeholder=”Search W3School” />
required 屬性
required 屬性規(guī)定必須在提交之前填寫輸入域（不能為空）。
注釋：required 屬性適用于以下類型的<input> 標簽：text, search, url, telephone, email,
password, date pickers, number, checkbox, radio 以及file。
實例
Name: <input type=”text” name=”usr_name” required=”required” />