submit按钮的name和value必须显式设置，否则后端无法区分用户点击了哪个按钮；应共用name、互斥value，通过e.submitter获取点击按钮，并注意后端需判空处理。
submit 按钮的 name 和 value 必须显式设置
浏览器只会在点击的 <button type="submit"></button> 或 <input type="submit"> 有 name 属性时，才把它的 value 作为表单数据发送。如果漏掉 name，后端根本收不到区分依据。
常见错误是只写 <button type="submit">保存</button>，结果所有按钮提交的数据完全一样，后端无法判断用户点了哪个。
正确做法：
这样提交后，后端收到的表单数据里一定包含 action=save、action=publish 或 action=preview，可据此分支处理。
避免用 onclick + form.submit() 覆盖原生行为
有人习惯给按钮加 onclick="handleSubmit('publish')"，再在 JS 里手动收集数据、发 fetch。这会绕过表单原生校验（如 required、pattern），也丢失了 submit 事件的默认行为控制权。
更稳妥的方式是监听 submit 事件，从 event.submitter 获取被点击的按钮：
document.querySelector('form').addEventListener('submit', function(e) {
const btn = e.submitter;
if (btn?.name === 'action') {
if (btn.value === 'preview') {
e.preventDefault(); // 预览不发 POST，改走 JS 渲染
renderPreview();
}
}
});
e.submitter 是标准属性（Chrome 69+、Firefox 75+、Safari 15.4+ 支持），比读取 FormData 更早、更可靠；IE 不支持，需降级用 click 事件标记临时变量。
多个 submit 按钮共用 name 时 value 值必须互斥
如果多个按钮的 name 相同（推荐做法），它们的 value 必须不重复，否则后端无法准确识别意图。例如下面这种写法会导致歧义：
<button type="submit" name="action" value="submit">提交</button> <button type="submit" name="action" value="submit">确认提交</button>
两个按钮都发 action=submit，后端无法区分语义。应改为：
-
value="submit_draft"和value="submit_final" - 或更直白的
value="draft"/value="final"
另外注意：不要用空格、中文、特殊符号做 value，URL 编码后易出错；优先选小写 ASCII 字符组合。
后端接收时注意 value 的原始字符串匹配
Node.js（Express）中，req.body.action 是字符串，不是布尔或枚举。别写 if (req.body.action === true) 这类逻辑。
Python（Flask）中，request.form.get('action') 返回 None 当按钮未被点击，不能直接用 if request.form['action']，会抛 KeyError。
PHP 中，$_POST['action'] 在没点任何 submit 按钮时不存在，需先 isset($_POST['action']) 判断。
核心原则：所有后端语言里，这个值都是「可选的字符串字段」，不是必传字段，也不是结构化类型——它只在用户点击对应按钮时才存在。
实际部署时最容易被忽略的是：没点按钮就直接回车提交，此时浏览器会按 HTML 规范提交第一个 type="submit" 按钮的 value。所以第一个按钮的 value 要设计成默认安全动作（比如 save），而不是危险操作（比如 delete）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
