HTML <form> 标签
在html中,表单是经常用到的,用来与用户交互并提交数据。而表单的<form>标签是使用来创建供用户输入的html表单,在网页中很常见,比如:注册和登录页面就是用表单实现的。
实例
<!DOCTYPE html>
<html>
<body>
<h1>form 元素用法</h1>
<form action="/example/html/html_page.aspx">
<label for="fname">姓氏:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">名字:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="提交">
</form>
<p>如果您点击提交,表单数据会被发送到名为 html_page.aspx 的页面。</p>
</body>
</html>
浏览器支持
元素 | |||||
---|---|---|---|---|---|
<form> | Yes | Yes | Yes | Yes | Yes |
所有浏览器都支持 <form> 标签。
定义和用法
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 多种其他标签如:
- <input>
- <textarea>
- <button>
- <select>
- <option>
- <optgroup>
- <fieldset>
- <label>
- <output>
表单用于向服务器传输数据。
提示和注释
注释:form 元素是块级元素,其前后会产生换行。
HTML 与 XHTML 之间的差异
无
属性
HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
accept | MIME_type | HTML 5 中不支持。 |
accept-charset | charset_list | 规定服务器可处理的表单数据字符集。 |
action | URL | 规定当提交表单时向何处发送表单数据。 |
autocomplete |
| 规定是否启用表单的自动完成功能。 |
enctype | 见说明 | 规定在发送表单数据之前如何对其进行编码。 |
method |
| 规定用于发送 form-data 的 HTTP 方法。 |
name | form_name | 规定表单的名称。 |
novalidate | novalidate | 如果使用该属性,则提交表单时不进行验证。 |
rel |
| 规定链接资源和当前文档之间的关系。 |
target |
| 规定在何处打开 action URL。 |
说明
- enctype 属性可能的值:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
全局属性
<form> 标签支持 HTML 中的 全局属性。
事件属性
<form> 标签支持 HTML 中的 事件属性。
更多实例
<!DOCTYPE html>
<html>
<body>
<h1>Form 和 checkboxes 的用法</h1>
<form action="/example/html/html_page.aspx" method="get">
<input type="checkbox" name="vehicle1" value="自行车">
<label for="vehicle1"> 我有一辆自行车</label><br>
<input type="checkbox" name="vehicle2" value="汽车">
<label for="vehicle2"> 我有一辆汽车</label><br>
<input type="checkbox" name="vehicle3" value="小船" checked>
<label for="vehicle3"> 我有一艘小船</label><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>Form 和 radio buttons 的用法</h1>
<form action="/example/html/html_page.aspx" method="get">
<input type="radio" id="male" name="gender" value="男士">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="女士" checked="checked">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="其他">
<label for="other">Other</label><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>