浏览器会将被点击的的name和value作为表单数据发送，未点击的不发送；name需一致（如action），value需不同（如save/publish），后端据此分支逻辑并校验存在性与权限。
form 里多个 <button type="submit"></button> 怎么区分点击的是哪个
浏览器会把被点击的 <button type="submit"></button> 的 name 和 value 作为表单数据发送，没点的不会发。这是最可靠、无需 JS 的原生方案。
常见错误是只设 id 或 class，或者用 onclick 改隐藏域——这些在用户禁用 JS、按回车提交、或移动端快速连点时都可能失效。
-
name必须一致（比如都叫action），否则后端收不到可比较的字段 -
value必须不同（比如save/publish/draft），后端靠它分支逻辑 - 不要用
<input type="submit">混用：它不支持子元素，且部分老浏览器对name处理不一致
示例：
<form method="post"> <input name="title" /> <button type="submit" name="action" value="save">存草稿</button> <button type="submit" name="action" value="publish">立即发布</button> </form>
提交后，后端收到 action=save 或 action=publish，直接判断即可。
立即学习“前端免费学习笔记（深入）”；
后端怎么安全地解析多个 submit 按钮的值
关键不是“怎么取”，而是“怎么防缺失、防篡改、防空值”。action 字段不是必传项——如果用户手动构造 POST 请求，或表单校验失败重渲染时漏掉按钮，这个字段可能根本不存在。
- 永远检查该字段是否存在，而不是直接
if action == 'publish' - 明确设定默认行为（比如无
action时视为save，或直接返回 400） - 不要把
value当作权限标识（比如value="delete"就执行删库）——权限必须后端校验，不能依赖前端传的字符串 - Node.js/Express 中注意：
req.body.action可能是undefined或字符串；Python Flask 中request.form.get('action')返回None，不是空字符串
用 JS 拦截并动态改 submit 行为有哪些坑
只有当需要「点击按钮后先校验、再决定是否提交」，或「统一收集埋点」时才加 JS。纯区分动作，别绕路。
- 别用
event.preventDefault()后手动fetch()：这会绕过浏览器原生表单验证（required、type="email"等失效） - 如果真要用 JS，优先监听
form.addEventListener('submit', ...)，而不是每个按钮的click——否则回车提交会被漏掉 - 按钮
value被 JS 改过之后，若用户右键「重新提交表单」，浏览器可能发原始值，造成前后不一致
更稳妥的做法：JS 只做增强（比如加 loading 状态），提交逻辑仍交给原生 form。
为什么 <button name="x" value="y"></button> 在某些安卓 WebView 里不工作
极少数旧版 Android 系统（如 4.4 KitKat 的 WebView）对 <button></button> 的 name/value 提交支持不完整，表现为点击后该字段完全不出现在 POST 数据中。
- 不是 bug，是规范实现差异：HTML5 明确要求提交
name/value，但老 WebView 没跟上 - 临时解法：给每个按钮加
formaction属性，指向不同 endpoint（如formaction="/api/save"），但会增加路由复杂度 - 长期建议：检测 User-Agent，对已知问题 UA 回退到单按钮 + 隐藏域 + JS 设置方案，但仅限必须兼容的场景
大多数现代环境（Chrome、Safari、Edge、iOS WebView、Android Chrome）都没问题，别为 2% 的存量设备提前加一堆防御逻辑。
