Design Code 設計密碼

新的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

瀏覽器支持

autocomplete 屬性

autocomplete 屬性規定form 或input 域應該擁有自動完成功能。

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

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

實例

<form action="demo_form.asp" method="get" <code>autocomplete="on"</code> >
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" <code>autocomplete="off"</code> /><br />
<input type="submit" />
</form>
	

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

autofocus 屬性

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

註釋： autofocus屬性適用於所有<input>標籤的類型。

實例

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

form 屬性

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

註釋： form屬性適用於所有<input>標籤的類型。

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

實例

<form action="demo_form.asp" method="get" <span class="marked">id="user_form"</span> >
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" <code>form="user_form"</code> />
	

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

表單重寫屬性

表單重寫屬性（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" <code>formaction="demo_admin.asp"</code> value="Submit as admin" />
<br />
<input type="submit" <code>formnovalidate="true"</code> value="Submit without validation" />
<br />
</form>
	

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

height 和width 屬性

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

註釋： height和width屬性只適用於image類型的<input>標籤。

實例

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

list 屬性

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

註釋： list屬性適用於以下類型的<input>標籤：text, search, url, telephone, email, date pickers, number, range以及color。

實例

Webpage: <input type="url" <code>list="url_list"</code> name="link" />
<datalist <span class="marked">id="url_list"</span> >
<option label="Design Code" value="http://www.oodcoo.com"></option>
<option label="Google" value="http://www.google.com"></option>
<option label="Microsoft" value="http://www.microsoft.com"></option>
</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" <code>min="0" </code> <code>max="10" </code> <code>step="3"</code> />
	

multiple 屬性

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

註釋： multiple屬性適用於以下類型的<input>標籤：email和file。

實例

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

novalidate 屬性

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

註釋： novalidate屬性適用於<form>以及以下類型的<input>標籤：text, search, url, telephone, email, password, date pickers, range以及color.

實例

<form action="demo_form.asp" method="get" <code>novalidate="true"</code> >
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
	

pattern 屬性

pattern 屬性規定用於驗證input 域的模式（pattern）。

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

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

實例

Country code: <input type="text" name="country_code"
 <code>pattern="[Az]{3}"</code> title="Three letter country code" />
	

placeholder 屬性

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

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

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

實例

<input type="search" name="user_search"   <code>placeholder="Search Design Code"</code> />
	

required 屬性

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

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

實例

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