formaction属性允许同一表单中不同submit按钮指定独立提交地址，覆盖form的action，如“保存草稿”指向/api/draft、“正式提交”指向/api/publish，无需JS即可实现多目标提交。
用 formaction 属性为不同按钮指定独立提交地址
同一个表单里有“保存草稿”和“正式提交”两个动作？别写两套表单，也别全靠 JS 拼 URL。HTML5 原生支持用 formaction 让每个 type="submit" 按钮走不同的后端接口。
这个属性会覆盖 <form> 的 action，只对当前按钮生效：
<form action="/api/default" method="POST"> <input name="title"> <button type="submit" formaction="/api/draft">存为草稿</button> <button type="submit" formaction="/api/publish">发布文章</button> </form>
注意点：
-
formaction只作用于<button type="submit">或<input type="submit">，type="button"不触发提交 - 浏览器不校验该 URL 是否存在，404 错误要等提交后才暴露
- 若同时设了
formmethod，它也会覆盖表单的method，比如formmethod="PUT"
用 name + value 区分后端收到的提交意图
后端怎么知道用户点的是“删除”还是“复制”？光靠 URL 不够可靠——URL 可能被篡改，且 GET 请求长度受限。更稳的方式是让按钮自己带标识字段：
立即学习“前端免费学习笔记（深入）”；
<form action="/api/items/123" method="POST"> <input name="id" value="123" type="hidden"> <button type="submit" name="action" value="delete">删除</button> <button type="submit" name="action" value="duplicate">复制</button> </form>
提交后，后端收到的表单数据里就会有 action=delete 或 action=duplicate。关键约束：
- 所有按钮必须有相同的
name，否则后端只能收到一个字段（浏览器只提交被点击的那个） - 不要用
id传操作语义，id不参与表单序列化，服务器收不到 - 如果用
<input type="submit">，它的value会同时作为按钮文案和提交值，容易混淆；推荐用<button>显式控制文案与值
用 onsubmit + event.submitter 在 JS 中动态识别
需要在提交前做差异化处理（比如弹确认框、加 loading、埋点）？现代浏览器提供 event.submitter，能直接拿到被点击的提交按钮元素：
<form onsubmit="return handleFormSubmit(event)">
<button type="submit" name="cmd" value="export">导出 CSV</button>
<button type="submit" name="cmd" value="print">打印预览</button>
</form>
<script>
function handleFormSubmit(e) {
const btn = e.submitter;
if (btn.value === 'export') {
showLoading();
} else if (btn.value === 'print') {
window.print();
e.preventDefault(); // 阻止真实提交
}
}
</script>
这个 API 兼容性要注意：
- Chrome 69+、Firefox 72+、Safari 15.4+ 支持；Edge 79+（即 Chromium 版）没问题
- 旧版 Safari 和 IE 完全不支持，需 fallback 到给按钮加 click 监听器 + 手动标记状态
-
e.submitter在通过form.submit()调用时为null，仅响应用户真实点击
为什么不用 onclick 替代 onsubmit？
很多人想给每个按钮加 onclick，然后手动调用 fetch。这看似灵活，但绕过了表单原生机制，容易漏掉几个关键点：
- 回车键触发表单提交时，
onclick不会触发，导致“键盘党”无法使用快捷操作 - 表单控件（如
required、pattern）的原生校验只在submit流程中运行，onclick里得自己重写一遍 - 禁用按钮后，
onclick仍可能被脚本意外调用，而原生disabled会彻底阻断提交流程 - 无障碍场景下，屏幕阅读器依赖
type="submit"语义识别可提交操作，onclick按钮需额外加role="button"和键盘事件支持
真正需要 JS 控制时，优先用 onsubmit 拦截，再根据 event.submitter 分支处理——既保原生行为，又留扩展空间。
