跨表单提交需严格匹配form属性与目标表单id，仅对type="submit"有效；按钮须显式关联、禁用状态手动同步，submit事件中用event.submitter区分入口，formaction可覆盖提交配置，提交后须重置表单并更新history。
跨表单提交在支付页面不是“能用就行”，而是极易引发状态错乱、重复扣款或数据采集遗漏——尤其是当确认页、金额输入框、提交按钮物理分离时，form 属性的微小偏差就会导致用户点了按钮却没传任何数据。
form 属性必须严格匹配目标表单的 id，且仅对 type="submit" 有效
支付页常见布局是：金额输入区在顶部（form id="amount-form"），提交按钮放在底部固定栏或弹窗里。此时必须用 button form="amount-form" type="submit" 关联。常见错误包括：
-
form值写成 class 名或 data-id（如form="payment-form"但实际id是pay-form），浏览器静默忽略，无控制台报错 - 按钮放在另一个
form内部（比如被套在搜索表单里），此时form属性直接失效，提交的是父表单 - 用了
type="button"或未声明type（部分旧版 Safari 会 fallback 为button而非submit）
跨表单提交时，disabled 控件不会被采集，但按钮自身状态需单独控制
支付流程中常需临时禁用金额输入框（比如锁定优惠后），这时它不会出现在提交数据里——但用户可能根本不知道自己改不了数。更关键的是：button 的 disabled 状态和表单无关，必须手动同步：
- 点击前检查目标表单是否通过
checkValidity()，不通过则button.disabled = true - 提交瞬间设
button.disabled = true+ 替换文案为“处理中…”，防止连点 - 不要依赖表单的
disabled属性来禁用按钮——它只影响表单内控件，不影响外部按钮
event.submitter 在 submit 事件里才能准确识别触发源
支付页常有多个提交入口：“立即支付”、“保存为草稿”、“使用优惠券后支付”，它们可能都指向同一个表单但走不同后端接口。靠 event.submitter 区分最可靠：
立即学习“前端免费学习笔记（深入）”；
- 必须监听
form的submit事件（不是按钮的click），否则event.submitter为null -
event.submitter在 Safari 15.4+ 才稳定支持；旧版本需退回到data-action+ 按钮click事件手动标记 - 若用
form.submit()触发（比如 JS 校验后自动提交），event.submitter一定为空，无法溯源
跨表单提交不改变表单默认 enctype 和 method，但 formaction 可覆盖
支付页若含文件（如上传身份证），必须用 enctype="multipart/form-data"。这个设置只对表单本身生效，跨表单按钮不会改变它——但你可以用 formaction 和 formmethod 单独指定：
-
<button form="pay-form" formaction="/api/submit" formmethod="POST"></button>会覆盖<form action="/old"></form>的配置 - 注意：
formenctype仅对POST有效，GET提交时该属性被忽略 - 如果目标表单已设
enctype="multipart/form-data"，而按钮又没显式声明formenctype，文件仍会被正确发送；但反之，若表单是默认application/x-www-form-urlencoded，按钮也无法凭空带上文件
最容易被忽略的是：跨表单提交后，目标表单的 DOM 并未重置，用户后退或刷新可能看到脏状态。支付确认页必须调用 form.reset()、移除监听器，并用 replaceState() 替换 history 条目——哪怕按钮物理上离表单很远，逻辑上它仍是那个表单的一次提交。
