submit按钮的name属性决定后端路由分支：多个submit按钮共存时，需统一name（如action）和不同value（如save/preview），浏览器仅提交被点击按钮的name=value对，后端据此分发逻辑或跳转。
submit按钮的name属性决定后端路由分支
多个或能共存于同一表单，但必须通过name和value组合区分行为。浏览器只提交被点击按钮的name=value对，后端据此跳转或分发逻辑——这不是前端跳转，而是表单默认提交行为。
常见错误是给每个按钮设不同formaction却忽略后端接收逻辑，导致所有请求都打到同一接口；或误用onclick+window.location绕过表单验证和CSRF防护。
- 所有submit按钮必须在同一个
内，且不能同时设置formaction和依赖后端判断（二者选一） - 推荐统一用
name="action"，不同按钮设不同value，如value="save"、value="preview" - 后端需检查
request.form.get("action")（Python Flask）或$_POST["action"]（PHP）再决定重定向或处理路径
formaction属性可直接覆盖form的action（HTML5原生支持）
formaction是和的原生属性，优先级高于的action。点击该按钮时，表单会提交到formaction指定URL，完全绕过后端路由判断。
注意：IE10+才支持，旧版IE需降级方案；且无法携带自定义headers或改HTTP方法（始终为GET/POST，由form的method决定）。
- 按钮写法：
- 对应
时，提交仍是POST；若formaction指向GET接口，需确保后端接受POST转义或改用method="GET" - 多个
formaction按钮可混用，但不可与JavaScript提交逻辑（如event.preventDefault()）冲突
用JavaScript拦截并动态修改form.action（兼容性最强）
当需要更精细控制（如带参数跳转、条件校验、防止重复提交），直接改form.action比依赖formaction更可控。关键是在submit事件中读取触发按钮的value或dataset，再赋值给form.action。
容易踩的坑是绑定事件时没用event.submitter（仅Chrome/Firefox支持），导致IE或Safari下无法识别点击的是哪个按钮。
- 安全写法：给每个按钮加
data-target="/preview"，在submit事件里用event.submitter?.dataset.target || "default"回退 - 兼容方案：用
click事件给隐藏域赋值，再在submit里读取，例如 - 务必在修改
form.action后返回true，否则部分浏览器可能取消提交
后端必须校验submit来源，不能只信前端传的action
无论用name/value、formaction还是JS改action，所有数据都可被用户篡改。后端若仅靠action=delete就执行删库操作，等于裸奔。
真实项目中，这类多按钮表单往往对应不同权限或状态校验，比如“发布”按钮需检查用户是否有发布权限，“撤回”按钮需确认当前状态是否允许撤回。
- 每个按钮对应的后端端点应有独立权限控制，而非在单一接口里用if-else分支
- 敏感操作（如删除、支付）必须二次确认，且token需绑定到具体操作类型，不能复用表单CSRF token
- 如果用
formaction直跳，目标页面仍需做完整权限校验，不能假设“跳过去了就合法”
实际最难的不是让按钮发到不同地址，而是确保每个地址背后的服务边界清晰、权限隔离、错误反馈明确。很多人卡在点击后404或500，其实问题常出在后端没配好路由，或者前端拼错了formaction里的相对路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
