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 对象")