当一个按钮不在目标表单内部时，可通过 <button> 标签的 form 属性显式绑定其要提交的表单 ID，实现跨表单提交控制。
当一个按钮不在目标表单内部时，可通过 `
在标准 HTML 行为中，位于 <form> 内部的 <button type="submit"> 会自动提交其最近的祖先 <form> 元素。但若需打破这一默认关联（例如：一个按钮需提交页面中另一处、甚至完全不嵌套的表单），HTML 提供了原生、语义化且无需 JavaScript 的解决方案——form 属性。
该属性接受一个字符串值，必须严格匹配页面中某个 <form> 元素的 id。它既可用于表单内部的按钮以覆盖默认父表单，也可用于表单外部的按钮，使其“归属”到指定表单并触发其提交逻辑（包括验证、submit 事件及 FormData 构建）。
✅ 正确用法示例：
<form id="login-form" action="/login" method="POST"> <input name="username" required> <input name="password" type="password" required> </form> <form id="search-form" action="/search" method="GET"> <input name="q" placeholder="Search..."> <!-- 按钮在 search-form 内，但提交 login-form --> <button type="submit" form="login-form">登录（提交登录表单）</button> </form> <!-- 按钮完全独立于所有表单 --> <button type="submit" form="search-form">全局搜索</button>
? 注意事项：
立即学习“前端免费学习笔记（深入）”；
- form 属性仅对 type="submit" 或 type="image" 的 <button>（以及 <input type="submit">）生效；type="button" 不会触发表单提交。
- 目标 <form> 必须存在于同一文档中，且 id 值需唯一、无空格、符合 HTML ID 规范。
- 使用 form 属性后，按钮点击将触发目标表单的 submit 事件，并遵循其 action、method 和约束验证（如 required 字段）。
- 此方案兼容所有现代浏览器（Chrome 10+、Firefox 4+、Safari 5.1+、Edge 12+），无需额外 JS，语义清晰，可访问性友好（屏幕阅读器能正确识别关联关系）。
总结：优先使用原生 form 属性而非 JavaScript 手动调用 form.submit() —— 它更可靠（支持验证与事件流）、更简洁（零 JS）、更符合 HTML 设计意图。
