HTML <form> 標簽 · W3School HTML 參考手冊

# HTML <form> 標簽 ## 例子 ``` <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> ``` ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有瀏覽器都支持 <form> 標簽。 ## 定義和用法 <form> 標簽用于為用戶輸入創建 HTML 表單。表單能夠包含 [input 元素](/tags/tag_input.asp "HTML <input> 標簽")，比如文本字段、復選框、單選框、提交按鈕等等。表單還可以包含 [menus](/tags/tag_menu.asp "HTML <menu> 標簽")、[textarea](/tags/tag_textarea.asp "HTML <textarea> 標簽")、[fieldset](/tags/tag_fieldset.asp "HTML <fieldset> 標簽")、[legend](/tags/tag_legend.asp "HTML <legend> 標簽") 和 [label 元素](/tags/tag_label.asp "HTML <label> 標簽")。表單用于向服務器傳輸數據。 ## 提示和注釋注釋：form 元素是塊級元素，其前后會產生折行。 ## HTML 與 XHTML 之間的差異 NONE ## 屬性 new : HTML5 中的新屬性。 | 屬性 | 值 | 描述 | | --- | --- | --- | | accept | *MIME_type* | HTML 5 中不支持。 | | [accept-charset](/tags/att_form_accept-charset.asp "HTML5 <form> accept-charset 屬性") | *charset_list* | 規定服務器可處理的表單數據字符集。 | | [action](/tags/att_form_action.asp "HTML5 <form> action 屬性") | _URL_ | 規定當提交表單時向何處發送表單數據。 | | [autocomplete](/tags/att_form_autocomplete.asp "HTML5 <form> autocomplete 屬性") | `on` `off` | 規定是否啟用表單的自動完成功能。 | | [enctype](/tags/att_form_enctype.asp "HTML5 <form> enctype 屬性") | 見說明 | 規定在發送表單數據之前如何對其進行編碼。 | | [method](/tags/att_form_method.asp "HTML5 <form> method 屬性") | `get` `post` | 規定用于發送 form-data 的 HTTP 方法。 | | [name](/tags/att_form_name.asp "HTML5 <form> name 屬性") | *form_name* | 規定表單的名稱。 | | [novalidate](/tags/att_form_novalidate.asp "HTML5 <form> novalidate 屬性") | novalidate | 如果使用該屬性，則提交表單時不進行驗證。 | | [target](/tags/att_form_target.asp "HTML5 <form> target 屬性") | `_blank` `_self` `_parent` `_top` `framename` | 規定在何處打開 action URL。 | ### 說明 enctype 屬性可能的值： * application/x-www-form-urlencoded * multipart/form-data * text/plain ## 全局屬性 <form> 標簽支持 [HTML 中的全局屬性](/tags/html_ref_standardattributes.asp)。 ## 事件屬性 <form> 標簽支持 [HTML 中的事件屬性](/tags/html_ref_eventattributes.asp)。 ## TIY 實例 [文本域(Text fields)](/tiy/t.asp?f=html_inputfields) 本例演示如何在HTML頁面創建文本域。用戶可以在文本域寫入文本。 ``` <html> <body> <form> 名： <input type="text" name="firstname"> <br /> 姓： <input type="text" name="lastname"> </form> </body> </html> ``` [密碼域](/tiy/t.asp?f=html_passwordfields) 本例演示如何創建HTML的密碼域。 ``` <html> <body> <form> 用戶： <input type="text" name="user"> <br /> 密碼： <input type="password" name="password"> </form> <p> 請注意，當您在密碼域中鍵入字符時，瀏覽器將使用項目符號來代替這些字符。 </p> </body> </html> ``` [復選框](/tiy/t.asp?f=html_checkboxes) 本例演示如何在HTML頁中創建文本框。用戶可以選中或取消選取復選框。 ``` <html> <body> <form> 我喜歡自行車： <input type="checkbox" name="Bike"> <br /> 我喜歡汽車： <input type="checkbox" name="Car"> </form> </body> </html> ``` [單選按鈕](/tiy/t.asp?f=html_radiobuttons) 本例演示如何在HTML中創建單選按鈕。 ``` <html> <body> <form> 男性： <input type="radio" checked="checked" name="Sex" value="male" /> <br /> 女性： <input type="radio" name="Sex" value="female" /> </form> <p>當用戶點擊一個單選按鈕時，該按鈕會變為選中狀態，其他所有按鈕會變為非選中狀態。</p> </body> </html> ``` [文本域(Textarea)](/tiy/t.asp?f=html_textarea) 本例演示如何創建一個文本域（多行文本輸入控制）。用戶可以在文本域中寫入文本。在文本域中，可寫入的字符字數不受限制。 ``` <html> <body> <p> This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea. </p> <textarea rows="10" cols="30"> The cat was playing in the garden. ``` [創建按鈕](/tiy/t.asp?f=html_button) 本例演示如何創建按鈕。你可以對按鈕上的文字進行自定義。 ``` <html> <body> <form> <input type="button" value="Hello world!"> </form> </body> </html> ``` [帶有輸入框和確認按鈕的表單](/tiy/t.asp?f=html_form_submit) 本例演示如何向頁面添加表單。此表單包含兩個輸入框和一個確認按鈕。 ``` <html> <body> <form action="/example/html/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> <p>請單擊確認按鈕，輸入會發送到服務器上名為 "form_action.asp" 的頁面。</p> </body> </html> ``` [帶有復選框的表單](/tiy/t.asp?f=html_form_checkbox) 此表單包含兩個復選框和一個確認按鈕。 ``` <html> <body> <form name="input" action="/html/html_form_action.asp" method="get"> I have a bike: <input type="checkbox" name="vehicle" value="Bike" checked="checked" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> <br /><br /> <input type="submit" value="Submit" /> </form> <p>如果您點擊 "Submit" 按鈕，您將把輸入傳送到名為 html_form_action.asp 的新頁面。</p> </body> </html> ``` [帶有單選按鈕的表單](/tiy/t.asp?f=html_form_radio) 此表單包含兩個單選框和一個確認按鈕。 ``` <html> <body> <form name="input" action="/html/html_form_action.asp" method="get"> Male: <input type="radio" name="Sex" value="Male" checked="checked"> <br /> Female: <input type="radio" name="Sex" value="Female"> <br /> <input type ="submit" value ="Submit"> </form> <p>如果您點擊 "Submit" 按鈕，您將把輸入傳送到名為 html_form_action.asp 的新頁面。</p> </body> </html> ``` [從表單發送電子郵件](/tiy/t.asp?f=html_form_mail) 此例演示如何從表單發送電子郵件。 ``` <html> <body> <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain"> <h3>這個表單會把電子郵件發送到 W3School。</h3> 姓名：<br /> <input type="text" name="name" value="yourname" size="20"> <br /> 電郵：<br /> <input type="text" name="mail" value="yourmail" size="20"> <br /> 內容：<br /> <input type="text" name="comment" value="yourcomment" size="40"> <br /><br /> <input type="submit" value="發送"> <input type="reset" value="重置"> </form> </body> </html> ``` ## 相關頁面 HTML DOM 參考手冊：[Form 對象](/jsref/dom_obj_form.asp "HTML DOM Form 對象")