HTML 表單和輸入

時間 2019-11-09

標籤 html 表單輸入欄目 HTML 简体版

原文原文鏈接

HTML <form> 標籤javascript

定義和用法：html

<form> 標籤用於爲用戶輸入建立 HTML 表單。html5

表單可以包含 input 元素，好比文本字段、複選框、單選框、提交按鈕等等。java

表單還能夠包含 menus、textarea、fieldset、legend 和 label 元素。正則表達式

表單用於向服務器傳輸數據。瀏覽器

提示和註釋安全

註釋：form 元素是塊級元素，其先後會產生折行。服務器

屬性：網絡

1. accept-charset 屬性 語法：<form accept-charset="value">app

定義和用法：規定服務器用哪一種字符集處理表單數據。

值：服務器可處理的一個或多個字符集。如需規定一個以上的字符集，請使用逗號來分隔各字符集。

經常使用值：

UTF-8 - Unicode 字符編碼

ISO-8859-1 - 拉丁字母表的字符編碼

gb2312 - 簡體中文字符集

理論上講，可以使用任何字符編碼，但沒有瀏覽器能夠理解全部的編碼。字符編碼使用得越普遍，瀏覽器對其支持越好。

例子：

<form action="demo_form.asp" accept-charset="ISO-8859-1">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" value="Submit" />
</form>

2. action 屬性 語法：<form action="value">

定義和用法:必需的 action 屬性規定當提交表單時，向何處發送表單數據。

值：URL 向何處發送表單數據。

可能的值：

絕對 URL - 指向其餘站點（好比 src="www.example.com/example.htm"）
相對 URL - 指向站點內的文件（好比 src="example.htm"）

例子：

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

3. autocomplete 屬性 （ HTML5的新屬性 ）語法：<form autocomplete="on/off">

定義和用法:

autocomplete 屬性規定表單是否應該啓用自動完成功能。

自動完成容許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基於以前鍵入過的值，應該顯示出在字段中填寫的選項。

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

提示：在某些瀏覽器中，您可能須要手動啓用自動完成功能。

屬性值：

on 默認，規定啓用自動完成功能。

off 規定禁用自動完成功能。

例子：

<form action="/example/html5/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>

<p>請填寫並提交此表單，而後重載頁面，來查看自動完成功能是如何工做的。</p>
<p>請注意，表單的自動完成功能是打開的，而 e-mail 域是關閉的。</p>

4. enctype 屬性 語法：<form enctype="value">

定義和用法：

enctype 屬性規定在發送到服務器以前應該如何對錶單數據進行編碼。

默認地，表單數據會編碼爲 "application/x-www-form-urlencoded"。就是說，在發送到服務器以前，全部字符都會進行編碼（空格轉換爲 "+" 加號，特殊符號轉換爲 ASCII HEX 值）。

屬性值：

application/x-www-form-urlencoded 在發送前編碼全部字符（默認）

multipart/form-data 不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。

text/plain 空格轉換爲 "+" 加號，但不對特殊字符編碼。

例子:

<form action="/example/html/form_action.asp" method="get" enctype="text/plain">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" value="Submit" />
</form>

5. method 屬性 語法：<form method="get/post">

定義和用法：

method 屬性規定如何發送表單數據（表單數據發送到 action 屬性所規定的頁面）。

表單數據能夠做爲 URL 變量（method="get"）或者 HTTP post （method="post"）的方式來發送。

method 屬性

瀏覽器使用 method 屬性設置的方法將表單中的數據傳送給服務器進行處理。共有兩種方法：POST 方法和 GET 方法。

若是採用 POST 方法，瀏覽器將會按照下面兩步來發送數據。首先，瀏覽器將與 action 屬性中指定的表單處理服務器創建聯繫，一旦創建鏈接以後，瀏覽器就會按分段傳輸的方法將數據發送給服務器。

在服務器端，一旦 POST 樣式的應用程序開始執行時，就應該從一個標誌位置讀取參數，而一旦讀到參數，在應用程序可以使用這些表單值之前，必須對這些參數進行解碼。用戶特定的服務器會明確指定應用程序應該如何接受這些參數。

另外一種狀況是採用 GET 方法，這時瀏覽器會與表單處理服務器創建鏈接，而後直接在一個傳輸步驟中發送全部的表單數據：瀏覽器會將數據直接附在表單的 action URL 以後。這二者之間用問號進行分隔。

通常瀏覽器經過上述任何一種方法均可以傳輸表單信息，而有些服務器只接受其中一種方法提供的數據。能夠在 <form> 標籤的 method （方法）屬性中指明表單處理服務器要用方法來處理數據，使 POST 仍是 GET。

POST 仍是 GET？

若是表單處理服務器既支持 POST 方法又支持 GET 方法，那麼你該選擇哪一種方法呢？下面是有關這方面的一些規律：

若是但願得到最佳表單傳輸性能，能夠採用 GET 方法發送只有少數簡短字段的小表單。
一些服務器操做系統在處理能夠當即傳遞給應用程序的命令行參數時，會限制其數目和長度，在這種狀況下，對那些有許多字段或是很長的文本域的表單來講，就應該採用 POST 方法來發送。
若是你在編寫服務器端的表單處理應用程序方面經驗不足，應該選擇 GET 方法。若是採用 POST 方法，就要在讀取和解碼方法作些額外的工做，也許這並不很難，可是也許你不太願意去處理這些問題。
若是安全性是個問題，那麼咱們建議選用 POST 方法。GET 方法將表單參數直接放在應用程序的 URL 中，這樣網絡窺探者能夠很輕鬆地捕獲它們，還能夠從服務器的日誌文件中進行摘錄。若是參數中包含了信用卡賬號這樣的敏感信息，就會在不知不覺中危及用戶的安全。而 POST 應用程序就沒有安全方面的漏洞，在將參數做爲單獨的事務傳輸給服務器進行處理時，至少還能夠採用加密的方法。
若是想在表單以外調用服務器端的應用程序，並且包括向其傳遞參數的過程，就要採用 GET 方法，由於該方法容許把表單這樣的參數包括進來做爲 URL 的一部分。而另外一方面，使用 POST 樣式的應用程序卻但願在 URL 後還能有一個來自瀏覽器額外的傳輸過程，其中傳輸的內容不能做爲傳統 <a> 標籤的內容。

例子：

1 <form action="form_action.asp" method="get">
2   <p>First name: <input type="text" name="fname" /></p>
3   <p>Last name: <input type="text" name="lname" /></p>
4   <input type="submit" value="Submit" />
5 </form>

6. name 屬性 語法：<form name="value">

定義和用法:

name 屬性規定表單的名稱。

form 元素的 name 屬性提供了一種在腳本中引用表單的方法。

屬性值：

name 表單的名稱

例子：

1 <form action="form_action.asp" method="get" name="myForm">
2   <p>First name: <input type="text" name="fname" /></p>
3   <p>Last name: <input type="text" name="lname" /></p>
4   <input type="button" onclick="formSubmit()" value="Send form data!" />
5 </form>

7. novalidate 屬性 （HTML5中的新屬性）語法：<form novalidate="novalidate">

定義和用法：

novalidate 屬性規定當提交表單時不對其進行驗證。

若是使用該屬性，則表單不會驗證表單的輸入。

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

例子：

1 <form action="demo_form.asp" novalidate="novalidate">
2   E-mail: <input type="email" name="user_email" />
3   <input type="submit" />
4 </form>

8. target 屬性 語法：<form target="value">

定義和用法：

target 屬性規定在何處打開 action URL。

兼容性註釋

在 HTML 4.01 中，不同意使用 form 元素的 target 屬性；在 XHTML 1.0 Strict DTD 中，不支持該屬性。

屬性值：

_blank 在新窗口中打開

_self 默認。在相同的框架中打開。

_parent 在父框架集中打開。

_top 在整個窗口中打開。

framename 在指定的框架中打開。

例子：

1 <form action="form_action.asp" method="get" target="_blank">
2   <p>First name: <input type="text" name="fname" /></p>
3   <p>Last name: <input type="text" name="lname" /></p>
4   <input type="submit" value="Submit" />
5 </form>

HTML <input> 標籤

定義和用法：

<input> 標籤用於蒐集用戶信息。

根據不一樣的 type 屬性值，輸入字段擁有不少種形式。輸入字段能夠是文本字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等等。

屬性：

1. accept 屬性 語法：<input accept="value"/>

定義和用法：

accept 屬性只能與 <input type="file"> 配合使用。它規定可以經過文件上傳進行提交的文件類型。

提示：請避免使用該屬性。應該在服務器端驗證文件上傳。

屬性值：MIME_type 用逗號隔開的MIME類型列表。

例子：

<form action="demo_form.asp">
  <input type="file" name="pic" accept="image/*">
  <input type="submit">
</form>

<p><strong>註釋：</strong>Internet Explorer 9 以及更早的版本不支持 input 標籤的 accept 屬性。</p>

2. alt 屬性 語法：<input alt="value"/>

定義和用法：

alt 屬性只能與 <input type="image"> 配合使用。它爲圖像輸入規定替代文本。

alt 屬性爲用戶因爲某些緣由沒法查看圖像時提供了備選的信息。

註釋：即便 alt 屬性不是必需的屬性，可是當輸入類型爲 image 時，仍然應該設置該屬性。若是不使用該屬性，就有可能對文本瀏覽器或非可視的瀏覽器形成使用障礙。

瀏覽器支持

除了 Safari，全部主流的瀏覽器都支持 "alt" 屬性。

例子：

1 <form action="form_action.asp" method="get">
2   <p>First name: <input type="text" name="fname" /></p>
3   <p>Last name: <input type="text" name="lname" /></p>
4   <input type="image" src="submit.jpg" alt="Submit" align="right" />
5 </form>

3. autocomplete 屬性 （HTML5中的新屬性）語法：<input autocomplete="on/off"/>

定義和用法：

autocomplete 屬性規定輸入字段是否應該啓用自動完成功能。

自動完成容許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基於以前鍵入過的值，應該顯示出在字段中填寫的選項。

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

提示：在某些瀏覽器中，您可能須要手動啓用自動完成功能。

屬性值： on 默認。規定啓用自動完成功能。

off 規定禁用自動完成功能。

例子：

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

4. autofocus 屬性 （HTML5中的新屬性）語法：<input autofocus="autofocus"/>

定義和用法：

autofocus 屬性規定當頁面加載時 input 元素應該自動得到焦點。

若是使用該屬性，則 input 元素會得到焦點。

例子：

1 <form action="demo_form.asp">
2   First name:<input type="text" name="fname" autofocus="autofocus" /><br />
3   Last name: <input type="text" name="lname" /><br />
4   <input type="submit" />
5 </form>

5. checked 屬性 語法：<input checked="checked"/>

定義和用法：

checked 屬性規定在頁面加載時應該被預先選定的 input 元素。

checked 屬性與 <input type="checkbox"> 或 <input type="radio"> 配合使用。

checked 屬性也能夠在頁面加載後，經過 JavaScript 代碼進行設置。

例子：

1 <form action="form_action.asp" method="get">
2 <input type="checkbox" name="vehicle" value="Car" checked="checked" /> I have a car
3 </form>

6. disabled 屬性 語法：<input disabled=" disabled"/>

定義和用法:

disabled 屬性規定應該禁用 input 元素。

被禁用的 input 元素既不可用，也不可點擊。能夠設置 disabled 屬性，直到知足某些其餘的條件爲止（好比選擇了一個複選框等等）。而後，就須要經過 JavaScript 來刪除 disabled 值，將 input 元素的值切換爲可用。

註釋：disabled 屬性沒法與 <input type="hidden"> 一塊兒使用。

例子：

1 <form action="form_action.asp" method="get">
2   <p>First name: <input type="text" name="fname" /></p>
3   <p>Last name: <input type="text" name="lname" disabled="disabled" /></p>
4   <input type="submit" value="Submit" />
5 </form>

View Code

7.form 屬性（HTML5中的新屬性）語法：<input form="id"/>

定義和用法：

form 屬性規定 input 元素所屬的一個或多個表單。

form 屬性的值必須是其所屬表單的 id。

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

例子：

 1 <body>
 2 
 3 <form action="/example/html5/demo_form.asp" method="get" id="form1">
 4 First name: <input type="text" name="fname" /><br />
 5 <input type="submit" value="提交" />
 6 </form>
 7 
 8 <p>下面的 "Last name" 字段位於 form 元素以外，但仍然是表單的一部分。</p>
 9 
10 Last name: <input type="text" name="lname" form="form1" />
11 
12 </body>

View Code

8. formaction 屬性 （HTML5中的新屬性）語法：<input formaction="URL"/>

定義和用法：

formaction 屬性覆蓋 form 元素的 action 屬性。

該屬性適用於 type="submit" 以及 type="image"。

例子：

1 <form action="/example/html5/demo_form.asp" method="get">
2 First name: <input type="text" name="fname" /><br />
3 Last name: <input type="text" name="lname" /><br />
4 <input type="submit" value="提交" /><br />
5 <input type="submit" formaction="/example/html5/demo_admin.asp" value="以管理員身份提交" />
6 </form>

View Code

9. formenctype 屬性 （HTML5中的新屬性）語法：<input formenctype="value"/>

定義和用法：

formenctype 屬性覆蓋 form 元素的 enctype 屬性。

該屬性與 type="submit" 和 type="image" 配合使用。

屬性值：

application/x-www-form-urlencoded 在發送前對全部字符進行編碼（默認）。

multipart/form-data 不對字符編碼。當使用有文件上傳控件的表單時，該值是必需的。

text/plain 將空格轉換爲 "+" 符號，但不編碼特殊字符。

例子：

1 <form action="demo_post_enctype.asp" method="post">
2   First name: <input type="text" name="fname" /><br />
3   <input type="submit" value="Submit" />
4   <input type="submit" formenctype="multipart/form-data" value="Submit" />
5 </form>

View Code

10. formmethod 屬性（HTML5中的新屬性）語法：<input formmethod="get|post"/>

定義和用法：

formmethod 屬性覆蓋 form 元素的 method 屬性。

能夠經過如下方式發送 form-data ：

以 URL 變量 (使用 method="get") 的形式來發送
以 HTTP post (使用 method="post") 的形式來發送

該屬性與 type="submit" 以及 type="image" 配合使用。

例子：

1 <form action="demo_form.asp" method="get">
2 First name: <input type="text" name="fname" /><br />
3 Last name: <input type="text" name="lname" /><br />
4 <input type="submit" value="Submit" />
5 <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" />
6 </form>

View Code

11. formnovalidate 屬性 （HTML5中的新屬性）語法：<input formnovalidate="formnovalidate"/>

定義和用法：

formnovalidate 屬性覆蓋 form 元素的 novalidate 屬性。

若是使用該屬性，則提交表單時按鈕不會執行驗證過程。

該屬性適用於 <form> 以及如下類型的 <input>：text, search, url, telephone, email, password, date pickers, range 以及 color。

例子：

1 <form action="demo_form.asp" method="get">
2 E-mail: <input type="email" name="userid" /><br />
3 <input type="submit" value="Submit" /><br />
4 <input type="submit" formnovalidate="formnovalidate" value="Submit" />
5 </form>

View Code

12. formtarget 屬性 (HTML5中的新屬性）語法：<input formtarget="value"/>

定義和用法:

formtarget 屬性覆蓋 form 元素的 target 屬性。

該屬性與 type="submit" 以及 type="image" 配合使用。

註釋：HTML5 不支持框架和框架集。如今，parent, top 和 framename 值大多用於 iframe。

例子：

1 帶有兩個提交按鈕的表單，會提交到不一樣的目標窗口：
2 <form action="demo_form.asp" method="get">
3   First name: <input type="text" name="fname" /><br />
4   Last name: <input type="text" name="lname" /><br />
5 <input type="submit" value="Submit" />
6 <input type="submit" formtarget="_blank" value="Submit" />
7 </form>

View Code

13. height 屬性 （HTML5中的新屬性）語法：<input height="pixels|%"/>

定義和用法：

height 屬性只適用於 <input type="image">，它規定 image input 的高度。

提示：爲圖片指定高度和寬度是一個好習慣。若是設置了這些屬性，當頁面加載時會爲圖片預留須要的空間。而若是沒有這些屬性，則瀏覽器就沒法瞭解圖像的尺寸，也就沒法爲其預留合適的空間。狀況是當頁面和圖片加載時，頁面佈局會發生變化。

例子：

1 <form action="demo_form.asp" method="get">
2 First name: <input type="text" name="fname" /><br />
3 Last name: <input type="text" name="lname" /><br />
4 <input type="image" src="img_submit.gif" alt="Submit" width="128" height="128"/>
5 </form>

View Code

14. list 屬性 （HTML5中的新屬性）語法： <input list="datalist-id"/>

定義和用法：

list 屬性引用數據列表，其中包含輸入字段的預約義選項。

例子：

1 <form action="demo_form.asp">
2 Webpage: <input type="url" list="url_list" name="link" />
3 <datalist id="url_list">
4 <option label="W3Schools" value="http://www.w3schools.com" />
5 <option label="Google" value="http://www.google.com" />
6 <option label="Microsoft" value="http://www.microsoft.com" />
7 </datalist>
8 <input type="submit" />
9 </form>

View Code

15. max 屬性 （HTML5中的新屬性）語法：<input max="number|date"/>

定義和用法：

max 屬性規定輸入字段所容許的最大值。

提示：max 屬性與 min 屬性配合使用，可建立合法值範圍。

註釋：max 和 min 屬性適用於如下 <input> 類型：number, range, date, datetime, datetime-local, month, time 以及 week。

屬性值; number 數字值。規定輸入字段容許的最大值。

date 日期。規定輸入字段容許的最大值。

例子：

1 <form action="/example/html5/demo_form.asp" method="get">
2 Points: <input type="number" name="points" min="0" max="10" />
3 <input type="submit" />
4 </form>

View Code

16. maxlength 屬性 語法：<input maxlength="value"/>

定義和用法：

maxlength 屬性規定輸入字段的最大長度，以字符個數計。

maxlength 屬性與 <input type="text"> 或 <input type="password"> 配合使用。

例子：

1 <form action="form_action.asp" method="get">
2   <p>Name: <input type="text" name="fullname" maxlength="85" /></p>
3   <p>Email: <input type="text" name="email" maxlength="55" /></p>
4   <input type="submit" value="Submit" />
5 </form>

View Code

17. min 屬性 （HTML5中的新屬性）語法：<input min="number|date"/>

定義和用法：

min 屬性規定輸入字段所容許的最小值。

提示：min 屬性與 max 屬性配合使用，可建立合法值範圍。

註釋：max 和 min 屬性適用於如下 <input> 類型：number, range, date, datetime, datetime-local, month, time 以及 week。

例子：

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

View Code

18. multiple 屬性 （HTML5中的新屬性）語法:<input multiple="multiple"/>

定義和用法：

multiple 屬性規定輸入字段可選擇多個值。

若是使用該屬性，則字段可接受多個值。

註釋：multiple 屬性使用歐冠與如下 <input> 類型：email 和 file。

例子：

1 <form action="demo_form.asp" method="get">
2   Select images: <input type="file" name="img" multiple="multiple" />
3   <input type="submit" />
4 </form>
5 <p>請嘗試在瀏覽文件時選取一個以上的文件。</p>

View Code

19. name 屬性語法：<input name="value"/>

定義和用法：

name 屬性規定 input 元素的名稱。

name 屬性用於對提交到服務器後的表單數據進行標識，或者在客戶端經過 JavaScript 引用表單數據。

註釋：只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

例子：

1 <form action="/example/html/form_action.asp" method="get">
2   <p>Name: <input type="text" name="fullname" /></p>
3   <p>Email: <input type="text" name="email" /></p>
4   <input type="submit" value="Submit" />
5 </form>

View Code

20. pattern 屬性 （HTML5中的新屬性）語法：<input pattern="regexp"/>

定義和用法：

pattern 屬性規定用於驗證輸入字段的模式。

模式指的是正則表達式。您能夠在咱們的 JavaScript 教程中閱讀到這方面的內容。

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

提示：請使用標準的 "title" 屬性來描述模式。

例子：

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

View Code

21. placeholder 屬性 （HTML5中的新屬性）語法：<input placeholder="text"/>

定義和用法：

placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。

該提示會在輸入字段爲空時顯示，並會在字段得到焦點時消失。

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

例子：

1 <form action="demo_form.asp" method="get">
2   <input type="search" name="user_search" placeholder="Search W3School" />
3   <input type="submit" />
4 </form>

View Code

22. readonly 屬性語法：<input readonly="readonly"/>

定義和用法：

readonly 屬性規定輸入字段爲只讀。

只讀字段是不能修改的。不過，用戶仍然可使用 tab 鍵切換到該字段，還能夠選中或拷貝其文本。

readonly 屬性能夠防止用戶對值進行修改，直到知足某些條件爲止（好比選中了一個複選框）。而後，須要使用 JavaScript 消除 readonly 值，將輸入字段切換到可編輯狀態。

readonly 屬性可與 <input type="text"> 或 <input type="password"> 配合使用。

例子：

1 <form action="form_action.asp" method="get">
2   Name:<input type="text" name="email" />
3   Country:<input type="text" name="country" value="China" readonly="readonly" />
4   <input type="submit" value="Submit" />
5 </form>

View Code

23. required 屬性 （HTML5中的新屬性）語法：<input required="required"/>

定義和用法：

required 屬性規定必需在提交以前填寫輸入字段。

若是使用該屬性，則字段是必填（或必選）的。

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

例子：

1 <form action="/example/html5/demo_form.asp" method="get">
2 Name: <input type="text" name="usr_name" required="required" />
3 <input type="submit" value="提交" />
4 </form>

View Code

24. size 屬性 語法：<input size="value"/>

定義和用法：

size 屬性規定輸入字段的寬度。

對於 <input type="text"> 和 <input type="password">，size 屬性定義的是可見的字符數。而對於其餘類型，size 屬性定義的是以像素爲單位的輸入字段寬度。

兼容性提示

因爲 size 屬性是一個可視化的設計屬性，咱們推薦您使用 CSS 來代替它。

CSS 語法：<input style="width:100px" />

例子;

1 <form action="/example/html/form_action.asp" method="get">
2   <p>Email: <input type="text" name="email" style="width:150px" /></p>
3   <p>PIN: <input type="text" name="pin" maxlength="18" style="width:50px" /></p>
4   <input type="submit" value="Submit" />
5 </form>

View Code

25. src 屬性 語法：<input src="URL"/>

定義和用法：

src 屬性只能與 <input type="image"> 配合使用。它規定做爲提交按鈕顯示的圖像的 URL。

src 屬性必須與 <input type="image"> 同時使用。

例子：

1 <form action="form_action.asp" method="get">
2   <p>First name: <input type="text" name="fname" /></p>
3   <p>Last name: <input type="text" name="lname" /></p>
4   <input type="image" src="submit.jpg" alt="Submit" align="right" />
5 </form>

View Code

26. step 屬性 （HTML5中的新屬性）語法：<input step="number"/>

定義和用法:

step 屬性規定輸入字段的合法數字間隔（假如 step="3"，則合法數字應該是 -三、0、三、6，以此類推）。

提示：step 屬性能夠與 max 以及 min 屬性配合使用，以建立合法值的範圍。

註釋：step、max 以及 min 屬性適用於如下 <input> 類型：number, range, date, datetime, datetime-local, month, time 以及 week。

例子：

1 <form action="/example/html5/demo_form.asp" method="get">
2 <input type="number" name="points" step="3" />
3 <input type="submit" />
4 </form>

View Code

27. type 屬性語法：<input type="value">

定義和用法：

type 屬性規定 input 元素的類型。

屬性值：

button 定義可點擊按鈕（多數狀況下，用於經過 JavaScript 啓動腳本）。

例子：

 1 <script type="text/javascript">
 2   function msg()
 3   {
 4   alert("Hello world!");
 5   }
 6 </script>
 7 </head>
 8 <body>
 9 
10 <form>
11 <input type="button" value="Click me" onclick="msg()" />
12 </form>

View Code

checkbox 定義複選框。

例子：複選框容許用戶在必定數目的選擇中選取一個或多個選項。

1 <form action="/example/html/form_action.asp" method="get">
2 <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
3 <input type="checkbox" name="vehicle" value="Car" /> I have a car<br />
4 <input type="checkbox" name="vehicle" value="Airplane" /> I have an airplane<br />
5 <input type="submit" value="Submit" />
6 </form>

View Code

file 定義輸入字段和 "瀏覽"按鈕，供文件上傳。

例子：用於文件上傳。

1 <form>
2 <input type="file" name="pic" accept="image/gif" />
3 </form>
4 
5 <p><b>註釋：</b>出於安全方面的考慮，本例不容許用戶上傳文件。</p>

View Code

hidden 定義隱藏的輸入字段。

例子：隱藏字段對於用戶是不可見的。隱藏字段一般會存儲一個默認值，它們的值也能夠由 JavaScript 進行修改。

1 <form action="/example/html/form_action.asp" method="get">
2   Email: <input type="text" name="email" /><br />
3   <input type="hidden" name="country" value="China" />
4   <input type="submit" value="Submit" />
5 </form>

View Code

image 定義圖像形式的提交按鈕。

例子：必須把 src 屬性和 alt 屬性與 <input type="image"> 結合使用。

1 <form action="/example/html/form_action.asp" method="get">
2   <p>First name: <input type="text" name="fname" /></p>
3   <p>Last name: <input type="text" name="lname" /></p>
4   <input type="image" src="/i/eg_submit.jpg" alt="Submit" />
5 </form>

View Code

password 定義密碼字段。該字段中的字符被掩碼。

例子：密碼字段中的字符會被掩碼（顯示爲星號或原點）。

1 <form action="/example/html/form_action.asp" method="get">
2   Email: <input type="text" name="email" /><br />
3   Password: <input type="password" name="pwd" maxlength="8" /><br />
4   <input type="submit" value="Submit" />
5 </form>

View Code

radio 定義單選按鈕。

例子：單選按鈕容許用戶選取給定數目的選擇中的一個選項。

1 <form action="/example/html/form_action.asp" method="get">
2   <input type="radio" name="sex" value="male" /> Male<br />
3   <input type="radio" name="sex" value="female" /> Female<br />
4   <input type="submit" value="Submit" />
5 </form>

View Code

reset 定義重置按鈕。重置按鈕會清除表單中的全部數據。

例子：

1 <form action="/example/html/form_action.asp" method="get">
2   Email: <input type="text" name="email" /><br />
3   Pin: <input type="text" name="pin" maxlength="4" /><br />
4   <input type="reset" value="Reset" />
5   <input type="submit" value="Submit" />
6 </form>

View Code

submit 定義提交按鈕。提交按鈕會把表單數據發送到服務器。

例子：

1 <form action="/example/html/form_action.asp" method="get">
2   <p>Email: <input type="text" name="email" /></p>
3   <p>Pin: <input type="text" name="pin" maxlength="18" /></p>
4   <input type="submit" value="Submit" />
5 </form>

View Code

text 定義單行的輸入字段，用戶可在其中輸入文本。默認寬度爲 20 個字符。

1 <form action="/example/html/form_action.asp" method="get">
2   <p>Email: <input type="text" name="email" /></p>
3   <p>Pin: <input type="text" name="pin" maxlength="18" /></p>
4   <input type="submit" value="Submit" />
5 </form>

View Code

28. value 屬性 語法：<input value="value"/>

定義和用法：

value 屬性爲 input 元素設定值。

對於不一樣的輸入類型，value 屬性的用法也不一樣：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關聯的值

註釋：<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 屬性。

註釋：value 屬性沒法與 <input type="file"> 一同使用。

例子：

1 <form action="/example/html/form_action.asp" method="get">
2   First name: <input type="text" name="fname" value="George" /><br />
3   Last name: <input type="text" name="lname" value="Bush" /><br />
4   <input type="submit" value="Submit form" />
5 </form>

View Code

29. width 屬性 （HTML5中的新屬性）語法：<input width="pixels|%"/>

定義和用法：

width 屬性只適用於 <input type="image">，它規定 image input 的寬度。

例子：

1 <form action="demo_form.asp" method="get">
2 First name: <input type="text" name="fname" /><br />
3 Last name: <input type="text" name="lname" /><br />
4 <input type="image" src="img_submit.gif" alt="Submit" width="128" height="128"/>
5 </form>