submit按钮需同时设置name和value才能让后端区分操作，且必须置于同一form内；推荐监听submit事件并用e.submitter获取点击按钮，或使用formaction/formmethod实现多目标提交。
submit 按钮的 name 和 value 必须同时显式设置
后端区分用户点击了哪个按钮，唯一可靠依据就是提交时带上的 name=value 键值对。浏览器只在 type="submit" 的 <button> 或 <input> 元素拥有 name 属性时，才把它的 value 作为表单数据发送。
常见错误写法：<button type="submit">保存</button> 或 <input type="submit" value="删除"> —— 这两种都缺 name，后端收不到任何标识字段。
正确做法是共用一个 name、互斥设置 value：
<form action="/api/post" method="POST"> <input name="title" value="示例"> <button type="submit" name="action" value="save">保存草稿</button> <button type="submit" name="action" value="publish">立即发布</button> </form>
这样提交后，后端一定收到 action=save 或 action=publish，可直接做 if 分支处理。
立即学习“前端免费学习笔记（深入）”；
多个 submit 按钮必须放在同一 form 标签下才有效
单独写的 <input type="submit"> 或 <button type="submit"> 在页面上能渲染出来，但点击毫无反应——它没有所属的 <form>，也就没有提交目标和上下文。
验证方式很简单：打开 DevTools → 选中按钮 → 查看其父节点是否最终能向上找到 <form>。中间允许嵌套 <div>、<fieldset> 等，但不能断开层级链。
容易踩的坑：
- 误用
form属性（如<button form="myForm">）却忘了页面上有对应id="myForm"的表单 - Vue/React 中动态渲染按钮，但
form元素尚未挂载或被条件渲染移除 - JS 调用
form.submit()时传入的是 null 或未查到 DOM 节点，报错Uncaught TypeError: form.submit is not a function
避免 onclick + form.submit() 覆盖原生提交流程
给按钮加 onclick="doSubmit('publish')"，再手动收集数据发 fetch，会绕过表单原生能力：
- 丢失
required、pattern等 HTML5 表单校验 - 无法触发
submit事件，导致监听逻辑失效 - Enter 键提交失效（默认只触发第一个
type="submit"）
更稳妥的做法是监听表单的 submit 事件，从 e.submitter 获取被点击按钮：
document.querySelector('form').addEventListener('submit', function(e) {
const btn = e.submitter;
if (btn?.name === 'action') {
if (btn.value === 'preview') {
e.preventDefault();
renderPreview();
}
}
});
e.submitter 是标准属性（Chrome 69+ / Firefox 75+ / Safari 15.4+），比读取 FormData 更早、更准；IE 不支持，需降级为 click 事件临时标记变量。
formaction 和 formmethod 是多目标提交的关键参数
当一个表单需要支持不同目的地或不同 HTTP 方法（比如搜索走 GET、操作走 POST），不用写多份表单，直接用 formaction 和 formmethod：
-
formaction：覆盖整个表单的action，仅对type="submit"元素生效 -
formmethod：覆盖整个表单的method，值只能是get或post
例如百度搜索按钮：
<form> <input name="wd" placeholder="搜索关键词"> <button type="submit" formaction="https://www.baidu.com/s" formmethod="get">百度一下</button> </form>
注意：此时 input 的 name="wd" 必须与目标服务要求的参数名一致，否则搜索失败；多个按钮设不同 formaction 不会冲突，点击哪个就用哪个。
真正容易被忽略的是语义一致性——formaction 改变的是提交目标，但表单内其他字段（如隐藏域 <input type="hidden" name="token">）依然会随请求发出，后端需确认是否接受该组合。
