轻松上手,快乐学习!

HTML <form> 标签



实例

包含两个输入字段和一个提交按钮的 HTML 表单:

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="提交">
</form>
亲自试一试 »

下面有更多实例。


定义和用法

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

<form> 元素可以包含以下一个或多个表单元素:


浏览器支持

元素
<form> Yes Yes Yes Yes Yes

属性

属性 描述
accept-charset character_set 规定服务器可处理的表单数据字符集。
action URL 规定当提交表单时向何处发送表单数据。
autocomplete on
off
规定是否启用表单的自动完成功能。
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain
规定在发送表单数据之前如何对其进行编码。
method get
post
规定用于发送 form-data 的 HTTP 方法。
name text 规定表单的名称。
novalidate novalidate 如果使用该属性,则提交表单时不进行验证。
rel external
help
license
next
nofollow
noopener
noreferrer
opener
prev
search
规定链接资源和当前文档之间的关系。
target _blank
_self
_parent
_top
规定在何处打开 action URL。

全局属性

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


事件属性

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


更多实例

实例

带有复选框的表单:

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="Bike">
  <label for="vehicle1"> 我有一辆自行车</label><br>
  <input type="checkbox" name="vehicle2" value="Car">
  <label for="vehicle2"> 我有一辆车</label><br>
  <input type="checkbox" name="vehicle3" value="Boat" checked>
  <label for="vehicle3"> 我有一条船</label><br><br>
  <input type="submit" value="提交">
</form>
亲自试一试 »

实例

带有单选按钮的表单:

<form action="/action_page.php" method="get">
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female" checked="checked">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label><br><br>
  <input type="submit" value="提交">
</form>
亲自试一试 »

相关页面

HTML 教程: HTML Forms 和 Input

HTML DOM 参考手册: Form 对象

CSS 教程: Styling Forms


默认CSS设置

大多数浏览器将使用以下默认值显示 <form> 元素:

实例

form {
  display: block;
  margin-top: 0em;
}
亲自试一试 »