HTML <form> 标签

在html中,表单是经常用到的,用来与用户交互并提交数据。而表单的<form>标签是使用来创建供用户输入的html表单,在网页中很常见,比如:注册和登录页面就是用表单实现的。


实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>form 元素用法</h1>
  5. <form action="/example/html/html_page.aspx">
  6. <label for="fname">姓氏:</label>
  7. <input type="text" id="fname" name="fname"><br><br>
  8. <label for="lname">名字:</label>
  9. <input type="text" id="lname" name="lname"><br><br>
  10. <input type="submit" value="提交">
  11. </form>
  12. <p>如果您点击提交,表单数据会被发送到名为 html_page.aspx 的页面。</p>
  13. </body>
  14. </html>

浏览器支持

元素
<form>YesYesYesYesYes

所有浏览器都支持 <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
  • on
  • off
规定是否启用表单的自动完成功能。
enctype 见说明 规定在发送表单数据之前如何对其进行编码。
method
  • get
  • post
规定用于发送 form-data 的 HTTP 方法。
name form_name 规定表单的名称。
novalidate 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 中的 事件属性


更多实例

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>Form 和 checkboxes 的用法</h1>
  5. <form action="/example/html/html_page.aspx" method="get">
  6. <input type="checkbox" name="vehicle1" value="自行车">
  7. <label for="vehicle1"> 我有一辆自行车</label><br>
  8. <input type="checkbox" name="vehicle2" value="汽车">
  9. <label for="vehicle2"> 我有一辆汽车</label><br>
  10. <input type="checkbox" name="vehicle3" value="小船" checked>
  11. <label for="vehicle3"> 我有一艘小船</label><br><br>
  12. <input type="submit" value="提交">
  13. </form>
  14. </body>
  15. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>Form 和 radio buttons 的用法</h1>
  5. <form action="/example/html/html_page.aspx" method="get">
  6. <input type="radio" id="male" name="gender" value="男士">
  7. <label for="male">Male</label><br>
  8. <input type="radio" id="female" name="gender" value="女士" checked="checked">
  9. <label for="female">Female</label><br>
  10. <input type="radio" id="other" name="gender" value="其他">
  11. <label for="other">Other</label><br><br>
  12. <input type="submit" value="提交">
  13. </form>
  14. </body>
  15. </html>