外部按钮需同时设置form属性和type="submit"才能提交指定表单；form值须严格匹配目标form的id（大小写、符号敏感，不认name/class）；多按钮共用同一form时，点击按钮的name/value会作为字段提交；验证可用DevTools检查elements和FormData。
外部按钮能直接提交指定表单，不用把按钮塞进 <form> 里，也不用写 JS —— 关键就看 form 属性和 type="submit" 是否同时存在。
button 的 form 属性必须搭配 type="submit" 才生效
只写 form="target-id" 不够，浏览器会当它是普通按钮。必须显式声明 type="submit"，否则点击毫无反应。
-
<button type="submit" form="search-form">搜索</button>✅ 触发<form id="search-form">提交 -
<button form="search-form">搜索</button>❌ 等价于type="button"，不提交 -
<button type="reset" form="login-form">重置</button>⚠️ 只重置目标表单，不提交
form 属性值必须严格匹配目标 form 的 id
它只认 <form id="xxx"> 中的 id，大小写、连字符、下划线全部敏感，不接受 name 或 class。
-
form="user-login"对应<form id="user-login">✅ -
form="user_login"对应<form id="user-login">❌（下划线 ≠ 连字符） -
form="login"对应<form name="login">❌（name不生效） - 页面中若存在多个相同
id="search-form"，浏览器只绑定第一个，其余失效
多个 submit 按钮共用一个 form 时，name/value 会参与提交
点击哪个按钮，它的 name 和 value 就作为额外字段随表单数据一起发出，其他按钮字段不会出现。
立即学习“前端免费学习笔记（深入）”；
例如：
<form id="order-form" action="/api/order"> <input name="item_id" value="123"> </form> <button type="submit" form="order-form" name="action" value="buy">立即购买</button> <button type="submit" form="order-form" name="action" value="cart">加入购物车</button>
点击“立即购买”后，实际提交的是：item_id=123&action=buy；点击“加入购物车”则是：item_id=123&action=cart。
- 两个按钮用了相同
name但没设value→ 提交空字符串，后端可能误判 - 按钮在 DOM 中位置完全自由：可放在
<div class="toolbar">里，甚至模态框底部
验证关联是否成功，别靠猜
打开 DevTools 控制台，执行以下两行就能确认：
document.getElementById("search-form").elements
检查返回的集合里是否包含你用 form 关联进来的 <button>；
new FormData(document.getElementById("search-form"))
打印结果，看 action 字段是否存在、值是否正确。注意：如果按钮没写 name，它不会出现在 FormData 中 —— name 是提交字段名的唯一依据。
真正容易被忽略的是：DOM 结构看似正常，但 UI 框架（如 Ant Design）可能在渲染时剥离了原生 <button> 标签，或动态插入后目标 <form> 尚未挂载，此时 form 属性形同虚设，且浏览器不会报错。
