<form>: 表单标签

最后更新：2026-10-13

<form>表单标签

<form>（表单）元素是收集和提交用户数据的容器。它包裹各种表单控件（<input>、<select>、<textarea> 等），通过 action 指定提交地址、method 指定提交方式。

分类	表单
内容模型	流式内容（不含 `<form>`）
允许的父元素	接受流式内容的元素
闭合标签	需要 `</form>` 标签
状态	标准

📝 语法

<form action="提交地址" method="post">
  表单控件
  <input type="submit" value="提交">
</form>

⚙️ 属性

该元素支持全局属性及以下专有属性：

属性	值	描述
`action`	URL	表单数据提交的地址。默认值: `当前页 URL`
`method`	关键字	提交方式（HTTP 方法）。 `get` — 数据拼接到 URL 查询串提交（默认）。 `post` — 数据放在请求体提交。
`name`	文本	表单名称，供 JavaScript 引用。
`autocomplete`	关键字	是否启用浏览器的自动填充。 `on` — 启用浏览器自动填充（默认）。 `off` — 关闭自动填充。
`novalidate`	布尔	提交时不进行 HTML5 表单校验。
`target`	关键字	提交结果在哪个窗口/框架中显示。默认值: `_self`

查看所有全局属性 → 查看所有事件属性 →

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
<form>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： 表单控件要配合 <label> 使用，提升可访问性并扩大点击区域。

❓ 常见问题

Qform 的 method 用 get 还是 post？

AGET 把数据拼在 URL 上、可收藏、有长度限制，适合搜索、筛选等只读操作；POST 把数据放请求体，适合注册、登录、支付等会修改数据的操作。涉及密码或敏感信息一律 POST。

Qform 里必须有 submit 按钮吗？

A不一定。按 Enter 键在多数浏览器也能提交单输入框表单；也可以用 JS 调用 form.requestSubmit() 或 form.submit()。但为了可用性和无障碍，显式的提交按钮始终是最佳实践。

Qaction 属性可以省略吗？

A可以，省略时提交到当前页面 URL（HTML5 行为）。单页应用里 form 还常配合 preventDefault() 拦截默认提交、改用 fetch 发送数据，action 写不写都不影响拦截。

<form> — forms 教程

📚 相关教程

HTML Forms HTML Input Types Reference

HTML 表单教程

学习表单的完整用法。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。