不写 action 或写成 action="" 会导致表单提交到当前完整 url，易引发 404 或白屏；应优先使用以 / 开头的绝对路径，如 /api/login，并确保同源、与后端路由严格一致。
必须显式写 action，空值或不写等于主动制造 404 或刷新白屏。
不写 action 或写成 action="" 会发生什么
浏览器会把表单数据原样 POST/GET 到当前页面完整 URL（含 query string 和 hash），比如你在 https://site.com/admin/users/edit?id=123#form 页面点提交，请求就发往这个地址。后端几乎不可能配这个路由，结果不是 404 就是返回空白页或原样刷新——看着像没反应，其实是发出去了，只是没人接。
常见误操作：
-
action="."或action="./"：部分浏览器解析成https://site.com/./，路径错误 - 在 Vue Router / React Router 的 history 模式下留空
action：请求能发出，但响应可能被 JS 拦截、跳转失败或触发意外重定向 - 本地开发时直接双击 HTML 文件（
file://协议）：表单提交完全失效，必须起本地 server
action 该用相对路径还是以 / 开头的绝对路径
优先用以 / 开头的绝对路径，比如 action="/api/login"。它从域名根开始解析，和当前 HTML 文件位置无关，可预测、不易出错。
相对路径（如 action="login" 或 action="../api/login"）在嵌套路由下极易翻车：当前 URL 是 /admin/user/123/edit，action="save" 就会拼成 /admin/user/123/save，而非你想要的 /admin/save。
注意：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 不用加
.php、.jsp等后缀，现代框架（Spring Boot、Express、Django）都是无后缀路由，action必须与后端定义的 endpoint 完全一致 - 如果 Nginx 配了
location /api/ { proxy_pass http://backend; }，那action就必须是/api/xxx，否则请求根本到不了后端
formaction 覆盖 action 的真实用法
formaction 是 <button type="submit"></button> 或 <input type="submit"> 的原生属性，优先级高于 <form></form> 的 action，点击即生效，无需 JS。
典型场景：
- 同一表单两个按钮：
<button type="submit" formaction="/draft">保存草稿</button>和<button type="submit" formaction="/submit">正式提交</button> - 管理后台中“导出 CSV”和“删除选中”共用表单结构，但目标 URL 不同
注意：
- 别写成
action（漏掉form-前缀），那是无效的 -
formaction只改地址，不改请求方法；如需不同method或enctype，得额外加formmethod或formenctype - 如果按钮绑了
onclick并调用了form.submit()，会绕过formaction，强行走默认地址
JS 拦截提交时 action 还有没有用
完全没用——只要你调了 event.preventDefault()，action 和 method 就彻底失效。后续请求由 fetch、axios 或其他方式手动发起，action 值只是个摆设。
但要注意：如果保留原生提交（例如为 SEO 或降级考虑），action 就必须指向真实可用的后端入口，且和服务端路由严格对齐；Vite/Next.js 开发环境下，action="/api/login" 是否被代理成功，得看开发服务器的 proxy 配置是否生效。
最容易被忽略的一点：action 的 URL 必须与当前页面同源，否则浏览器直接阻止提交（跨域限制），而这个错误不会出现在控制台里——调试时先右键「查看网页源代码」，确认渲染出来的 action 值到底是什么，再比对 Network 请求的真实 URL。
