正确做法是给模态框按钮设 type="submit" 并添加 form="register-form" 属性，使其触发目标表单原生验证与 submit 事件；多入口时用 formaction/formmethod 区分接口，并通过 event.submitter 识别来源。
form 属性怎么让注册页的“同意条款”按钮提交主表单
注册流程里常把用户协议弹窗单独抽成一个 <div> 或模态框，里面放个“我已阅读并同意”按钮——但它不在 <code><form id="register-form"></form> 内部。想点它就提交注册数据，不能靠 JS 调 form.submit()，否则跳过浏览器原生验证、不触发 submit 事件、event.submitter 也拿不到。
正确做法是给这个按钮加 form="register-form"，并确保它是 type="submit"：
<form id="register-form" action="/api/register" method="POST"> <input name="email" type="email" required> <input name="password" type="password" required> </form> <p><!-- 模态框里的按钮，物理位置完全独立 --> <div class="modal"> <p>请阅读以下条款...</p> <button type="submit" form="register-form">我已同意，立即注册</button> </div>
- 按钮必须有
type="submit"（不能是type="button"） -
form属性值必须严格等于目标<form></form>的id，大小写、连字符都不能错 - 点击后，浏览器会校验
register-form内所有required字段，再发请求 - 服务端收到的数据只含
register-form内控件，不含模态框里其他元素
多个提交入口共用同一表单时如何区分行为
注册页可能同时需要“保存为草稿”和“正式提交”两个按钮，都指向同一个 register-form，但要走不同后端接口（比如 /api/draft vs /api/register），且需在 JS 中识别来源。
立即学习“前端免费学习笔记（深入）”；
用 formaction 和 formmethod 覆盖表单默认属性，并靠 event.submitter 判断：
<form id="register-form"> <input name="email"> <input name="phone"> </form> <p><button type="submit" form="register-form" formaction="/api/draft" formmethod="POST"> 保存草稿 </button></p><p><button type="submit" form="register-form" formaction="/api/register" formmethod="POST"> 正式提交 </button>
-
formaction和formmethod只对该按钮生效，不影响表单本身定义 - 监听
register-form的submit事件时，event.submitter就是被点的那个按钮（Safari 15.4+ 支持） - 旧版 Safari 或需 fallback：给按钮加
data-action="draft"，在click事件里手动标记 - 注意：
formenctype也可覆盖编码类型，上传文件时必须设为multipart/form-data
为什么跨表单提交后页面跳转了却拿不到响应数据
这是注册流程中最容易误判的一点：你用了 form 属性成功提交，页面跳转到 /api/register 返回的 HTML，但你想在原页面用 JS 处理 JSON 响应——这根本做不到。
- HTML 表单提交本质是导航（navigation），不是 AJAX，所以无法读取响应体
- 如果后端返回的是
{"success":true}这种纯 JSON，浏览器会把它当文本显示，而不是执行 JS - 想异步处理响应，必须拦截默认行为，改用
fetch或axios手动构造请求 - 但那就不能再依赖
form属性自动收集数据；得用new FormData(formEl)手动提取
容易静默失败的三个细节
form 属性失效时浏览器不会报错，点了没反应，排查起来特别耗时间。
- 目标
<form></form>缺少id，或写了name="register-form"却误当成id用 - 按钮放在另一个
<form></form>内部，此时form属性会被忽略（父表单优先级更高） - 用了
<input type="button">或没写type属性——部分浏览器默认按submit处理，但行为不一致，务必显式声明type="submit"
真正关键的不是“能不能跨”，而是“浏览器是否真把它当提交动作”。只要 type、form、id 三者对齐，验证、事件、数据采集就全链路生效——这点比任何 JS 方案都稳。
