码农教程 - 一技在手,衣食无忧! tools

HTML <form> 标签

❮上一节 完整的 HTML参考 下一节❯

示例

具有两个输入字段和一个提交按钮的 HTML 表单：

<form action="/action_page.html" 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="Submit">
</form>
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个<form>标签用于创建供用户输入的 HTML 表单。

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

浏览器支持

Element
<form> Yes Yes Yes Yes Yes

属性

Attribute Value Description
accept-charset character_set Specifies the character encodings that are to be used for the form submission
action URL Specifies where to send the form-data when a form is submitted
autocomplete on
off		 Specifies whether a form should have autocomplete on or off
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
method get
post		 Specifies the HTTP method to use when sending form-data
name text Specifies the name of a form
novalidate novalidate Specifies that the form should not be validated when submitted
rel external
help
license
next
nofollow
noopener
noreferrer
opener
prev
search		 Specifies the relationship between a linked resource and the current document
target _blank
_self
_parent
_top		 Specifies where to display the response that is received after submitting the form

全局属性

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

事件属性

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

更多示例

示例

带有复选框的 HTML 表单：

<form action="/action_page.html" method="get">
  <input type="checkbox" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" name="vehicle3" value="Boat" checked>
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
</form>
亲自试一试 »

示例

带有单选按钮的 HTML 表单：

<form action="/action_page.html" method="get">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS" checked="checked">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>
亲自试一试 »

相关页面

HTML 教程：HTML 表单和输入

HTML DOM 参考：表单对象

CSS 教程：CSS 表单

默认 CSS 设置

大多数浏览器都会显示<form>具有以下默认值的元素：

示例

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


❮上一节 完整的 HTML参考 下一节❯