HTML 表單和輸入<form><input>

HTML 表單和輸入

本文轉載自查看原文 2016-07-08 11:54 11390 HTML

HTML <form> 標簽

定義和用法：

<form> 標簽用於為用戶輸入創建 HTML 表單。

表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。

表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。

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

提示和注釋

注釋：form 元素是塊級元素，其前后會產生折行。

屬性：

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

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

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

常用值：

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"，則合法數字應該是 -3、0、3、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>

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 常見form表單5種input輸入類型 html基礎-form表單、input輸入框、select選擇框與文本框(二) form表單中input輸入框的用法總結 HTML:form表單總結，input，select，option，textarea，label HTML 表單元素、輸入類型、Input 屬性 HTML——form表單 html之form表單 Html form表單大全（一） HTML的表單標簽 html--form表單