HTML5 Input 類型,HTML5 表單元素,HTML5 表單屬性

HTML5 新的 Input 類型

HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。

本章全面介紹這些新的輸入類型：

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

浏覽器支援

Input type	IE	Firefox	Opera	Chrome	Safari
email	No	4.0	9.0	10.0	No
url	No	4.0	9.0	10.0	No
number	No	No	9.0	7.0	No
range	No	No	9.0	4.0	4.0
Date pickers	No	No	9.0	10.0	No
search	No	4.0	11.0	10.0	No
color	No	No	11.0	No	No

注釋：Opera 對新的輸入類型的支援最好。不過您已經可以在所有主流的浏覽器中使用它們了。即使不被支援，仍然可以顯示為正常的文本域。

Input 類型 - email

email 類型用于應該包含 e-mail 位址的輸入域。

在送出表單時，會自動驗證 email 域的值。

執行個體

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

​​親自試一試​​

提示：iPhone 中的 Safari 浏覽器支援 email 輸入類型，并通過改變觸摸屏鍵盤來配合它（添加 @ 和 .com 選項）。

Input 類型 - url

url 類型用于應該包含 URL 位址的輸入域。

在送出表單時，會自動驗證 url 域的值。

執行個體

Homepage: <input type="url" name="user_url" />      

​​親自試一試​​

提示：iPhone 中的 Safari 浏覽器支援 url 輸入類型，并通過改變觸摸屏鍵盤來配合它（添加 .com 選項）。

Input 類型 - number

number 類型用于應該包含數值的輸入域。

您還能夠設定對所接受的數字的限定：

執行個體

Points: <input type="number" name="points" min="1" max="10" />      

​​親自試一試​​

請使用下面的屬性來規定對數字類型的限定：

屬性	值	描述
max	number	規定允許的最大值
min	number	規定允許的最小值
step	number	規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等）
value	number	規定預設值

請試一下帶有所有限定屬性的例子：​​親自試一試​​

提示：iPhone 中的 Safari 浏覽器支援 number 輸入類型，并通過改變觸摸屏鍵盤來配合它（顯示數字）。

Input 類型 - range

range 類型用于應該包含一定範圍内數字值的輸入域。

range 類型顯示為滑動條。

您還能夠設定對所接受的數字的限定：

執行個體

<input type="range" name="points" min="1" max="10" />      

​​親自試一試​​

請使用下面的屬性來規定對數字類型的限定：

屬性	值	描述
max	number	規定允許的最大值
min	number	規定允許的最小值
step	number	規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等）
value	number	規定預設值

Input 類型 - Date Pickers（資料檢出器）

HTML5 擁有多個可供選取日期和時間的新輸入類型：

• date - 選取日、月、年
• month - 選取月、年
• week - 選取周和年
• time - 選取時間（小時和分鐘）
• datetime - 選取時間、日、月、年（UTC 時間）
• datetime-local - 選取時間、日、月、年（本地時間）

下面的例子允許您從月曆中選取一個日期：

執行個體

Date: <input type="date" name="user_date" />      

​​親自試一試​​

輸入類型 "month": ​​ 親自試一試​​

輸入類型 "week": ​​ 親自試一試​​

輸入類型 "time": ​​ 親自試一試​​

輸入類型 "datetime": ​​ 親自試一試​​

輸入類型 "datetime-local": ​​ 親自試一試​​

Input 類型 - search

search 類型用于搜尋域，比如站點搜尋或 Google 搜尋。

search 域顯示為正常的文本域。

-------------------------------------------------------------------

HTML5 的新的表單元素：

HTML5 擁有若幹涉及表單的元素和屬性。

本章介紹以下新的表單元素：

• datalist
• keygen
• output

浏覽器支援

Input type	IE	Firefox	Opera	Chrome	Safari
datalist	No	No	9.5	No	No
keygen	No	No	10.5	3.0	No
output	No	No	9.5	No	No

datalist 元素

datalist 元素規定輸入域的選項清單。

清單是通過 datalist 内的 option 元素建立的。

如需把 datalist 綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id：

執行個體

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>      

​​親自試一試​​

提示：option 元素永遠都要設定 value 屬性。

keygen 元素

keygen 元素的作用是提供一種驗證使用者的可靠方法。

keygen 元素是密鑰對生成器（key-pair generator）。當送出表單時，會生成兩個鍵，一個是私鑰，一個公鑰。

私鑰（private key）存儲于用戶端，公鑰（public key）則被發送到伺服器。公鑰可用于之後驗證使用者的用戶端證書（client certificate）。

目前，浏覽器對此元素的糟糕的支援度不足以使其成為一種有用的安全标準。

執行個體

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>      

​​親自試一試​​

output 元素

output 元素用于不同類型的輸出，比如計算或腳本輸出：

執行個體

<output id="result" onforminput="resCalc()"></output>

​​親自試一試​​

------------------------------------------------------------------------

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 屬性

執行個體

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