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>
亲自试一试 »
<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>
亲自试一试 »
<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>
亲自试一试 »
<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> 元素:
