DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> HTML5的表單屬性簡介
HTML5的表單屬性簡介
編輯:HTML5教程     

HTML5 的新的表單屬性

本章講解涉及 <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 屬性規定 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) 是正則表達式。您可以在我們的 JavaScript 教程中學習到有關正則表達式的內容。

注釋: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" />
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved