HTML <form> 标签

例子

  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>

浏览器支持

元素 Chrome Internet Explorer / Edge Firefox Safari Opera
<form> Yes Yes Yes Yes Yes

所有浏览器都支持 <form> 标签。

定义和用法

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menu、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

提示和注释

注释：form 元素是块级元素，其前后会产生折行。

HTML 与 XHTML 之间的差异

NONE

属性

form - 图6 New : HTML5 中的新属性。

属性 值 描述
accept MIME_type HTML 5 中不支持。
accept-charset charset_list 规定服务器可处理的表单数据字符集。
action URL 规定当提交表单时向何处发送表单数据。
autocomplete form - 图7 on
off		 规定是否启用表单的自动完成功能。
enctype 见说明 规定在发送表单数据之前如何对其进行编码。
method get
post		 规定用于发送 form-data 的 HTTP 方法。
name form_name 规定表单的名称。
novalidate form - 图8 novalidate 如果使用该属性，则提交表单时不进行验证。
rel external
help
license
next
nofollow
noopener
noreferrer
opener
prev
search		 规定链接资源和当前文档之间的关系。
target _blank
_self
_parent
_top
framename		 规定在何处打开 action URL。

说明

enctype 属性可能的值：

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

全局属性

<form> 标签支持 HTML 中的全局属性。

事件属性

<form> 标签支持 HTML 中的事件属性。

TIY 实例

文本域(Text fields)

本例演示如何在HTML页面创建文本域。用户可以在文本域写入文本。

  1. <form>
  2. 名：
  3. <input type="text" name="firstname">
  4. <br />
  5. 姓：
  6. <input type="text" name="lastname">
  7. </form>

密码域

本例演示如何创建HTML的密码域。

  1. <form>
  2. 用户：
  3. <input type="text" name="user">
  4. <br />
  5. 密码：
  6. <input type="password" name="password">
  7. </form>
  8. <p>
  9. 请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。
  10. </p>

复选框

本例演示如何在HTML页中创建文本框。用户可以选中或取消选取复选框。

  1. <form>
  2. 我喜欢自行车：
  3. <input type="checkbox" name="Bike">
  4. <br />
  5. 我喜欢汽车：
  6. <input type="checkbox" name="Car">
  7. </form>

单选按钮

本例演示如何在HTML中创建单选按钮。

  1. <form>
  2. 男性：
  3. <input type="radio" checked="checked" name="Sex" value="male" />
  4. <br />
  5. 女性：
  6. <input type="radio" name="Sex" value="female" />
  7. </form>
  9. <p>当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。</p>

简单的下拉列表

本例演示如何在HTML页面中创建简单的下拉列表框。下拉列表框是一个可选列表。

  1. <form>
  2. <select name="cars">
  3. <option value="volvo">Volvo</option>
  4. <option value="saab">Saab</option>
  5. <option value="fiat">Fiat</option>
  6. <option value="audi">Audi</option>
  7. </select>
  8. </form>

另一个下拉列表

本例演示如何创建一个简单的带有预选值的下拉列表。（注：预选值指预先指定的首选项。）

  1. <form>
  2. <select name="cars">
  3. <option value="volvo">Volvo</option>
  4. <option value="saab">Saab</option>
  5. <option value="fiat" selected="selected">Fiat</option>
  6. <option value="audi">Audi</option>
  7. </select>
  8. </form>

文本域(Textarea)

本例演示如何创建一个文本域（多行文本输入控制）。用户可以在文本域中写入文本。在文本域中，可写入的字符字数不受限制。

  1. <p>
  2. This example cannot be edited
  3. because our editor uses a textarea
  4. for input,
  5. and your browser does not allow
  6. a textarea inside a textarea.
  7. </p>
  9. <textarea rows="10" cols="30">
  10. The cat was playing in the garden.

创建按钮

本例演示如何创建按钮。你可以对按钮上的文字进行自定义。

  1. <form>
  2. <input type="button" value="Hello world!">
  3. </form>

围绕数据的Fieldset

本例演示如何在数据周围绘制一个带标题的框。

  1. <form>
  2.   <fieldset>
  3.     <legend>健康信息</legend>
  4.     身高：<input type="text" />
  5.     体重：<input type="text" />
  6.   </fieldset>
  7. </form>
  9. <p>如果表单周围没有边框，说明您的浏览器太老了。</p>

带有输入框和确认按钮的表单

本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。

  1. <form action="/demo/demo_form.asp">
  2. First name:<br>
  3. <input type="text" name="firstname" value="Mickey">
  4. <br>
  5. Last name:<br>
  6. <input type="text" name="lastname" value="Mouse">
  7. <br><br>
  8. <input type="submit" value="Submit">
  9. </form> 
  11. <p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

带有复选框的表单

此表单包含两个复选框和一个确认按钮。

  1. <form name="input" action="/html/html_form_action.asp" method="get">
  2. I have a bike:
  3. <input type="checkbox" name="vehicle" value="Bike" checked="checked" />
  4. <br />
  5. I have a car: 
  6. <input type="checkbox" name="vehicle" value="Car" />
  7. <br />
  8. I have an airplane: 
  9. <input type="checkbox" name="vehicle" value="Airplane" />
  10. <br /><br />
  11. <input type="submit" value="Submit" />
  12. </form> 
  14. <p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p>

带有单选按钮的表单

此表单包含两个单选框和一个确认按钮。

  1. <form>
  2. <input type="radio" name="sex" value="male" checked>Male
  3. <br>
  4. <input type="radio" name="sex" value="female">Female
  5. </form>

从表单发送电子邮件

此例演示如何从表单发送电子邮件。

  1. <form action="MAILTO:someone@mail.com" method="post" enctype="text/plain">
  3. <h3>这个表单会把电子邮件发送到 mail.com。</h3>
  4. 姓名：<br />
  5. <input type="text" name="name" value="yourname" size="20">
  6. <br />
  7. 电邮：<br />
  8. <input type="text" name="mail" value="yourmail" size="20">
  9. <br />
  10. 内容：<br />
  11. <input type="text" name="comment" value="yourcomment" size="40">
  12. <br /><br />
  13. <input type="submit" value="发送">
  14. <input type="reset" value="重置">
  16. </form>

相关页面

HTML DOM 参考手册：Form 对象