当页面存在多个表单时，可通过 <button> 标签的 form 属性显式指定其关联的表单 ID，从而实现一个按钮提交非父级表单的功能，无需 JavaScript。

当页面存在多个表单时，可通过 `` 标签的 `form` 属性显式指定其关联的表单 id，从而实现一个按钮提交非父级表单的功能，无需 javascript。

在标准 HTML 行为中，位于 <form> 内部的 <button type="submit"> 默认提交其最近的祖先 <form> 元素。但若需打破这一层级限制——例如让某个按钮提交页面中任意位置的另一表单（只要在同一文档内）——HTML 提供了原生、语义化的解决方案：form 属性。

该属性接受一个字符串值，必须严格匹配目标 <form> 元素的 id。它不仅支持“跨容器”提交（即按钮不在目标表单内部），还能覆盖默认的祖先查找逻辑。

✅ 正确用法示例：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<form id="search-form" action="/search" method="GET">
  <input name="q" placeholder="Search...">
</form>

<form id="login-form" action="/login" method="POST">
  <input name="username" required>
  <input name="password" type="password" required>
  <!-- 此按钮将提交 search-form，而非 login-form -->
  <button type="submit" form="search-form">全局搜索</button>
</form>

<!-- 按钮甚至可以完全脱离任何 form 标签 -->
<button type="submit" form="login-form">立即登录</button>

⚠️ 注意事项：

立即学习“前端免费学习笔记（深入）”；

• form 属性仅对 <button> 和 <input type="submit|image"> 生效，<input type="button"> 或 <a> 不适用；
• 目标 form 元素必须存在于同一 HTML 文档中，且 id 值需唯一、无空格、不以数字开头；
• 若同时设置 form 属性与 onclick 事件，JavaScript 中调用 event.preventDefault() 可阻止表单提交，实现自定义逻辑；
• 该特性被所有现代浏览器（Chrome、Firefox、Safari、Edge）完整支持，兼容性良好（IE 不支持，但 IE 已停止维护）。

总结：无需依赖 JavaScript 绑定事件或手动调用 form.submit()，纯 HTML 的 form 属性即可安全、语义化、可访问地实现多表单场景下的精准提交控制，是构建清晰表单交互的推荐实践。