action属性必须是合法url（如/api/login或https://example.com/submit），禁用javascript:void(0)等无效值；空action等价于当前页url，含base标签时相对路径会被错误解析，需警惕404或跨域问题。
action 属性必须是相对路径或绝对 URL，不能是 JavaScript 代码
很多人误以为 action 可以写成 action="javascript:submitForm()" 或类似逻辑，这是无效的。浏览器只接受合法 URL（如 /api/login、https://example.com/submit），遇到非 URL 值会直接发起 GET 请求到该字符串字面量地址，通常 404。
常见错误现象：action="javascript:void(0)" 看似“阻止跳转”，实则提交时仍会向当前域名下 /javascript:void(0) 发起请求；action="#" 会导致页面刷新到顶部，且表单数据未发送。
- 正确做法：用
event.preventDefault()配合 JS 控制提交，而非靠action“伪装” - 如果真要无刷新提交，
action仍需设为真实后端接口地址，再用fetch或XMLHttpRequest拦截并手动处理 - 空
action（action=""）等价于当前页面 URL，适合“提交给自己”的场景，但要注意路由和方法匹配
GET 和 POST 提交对 action 地址的影响不同
method="GET" 时，action 地址会被拼接查询参数（如 action="/search?keyword=foo"），最终 URL 是 /search?keyword=foo&q=bar；而 method="POST" 时，action 仅决定目标端点，所有字段走请求体，URL 不变。
容易踩的坑：把含查询参数的 URL 写进 action，又用 GET 提交，导致参数重复或冲突。例如 action="/user?id=123" + name="id" 字段，最终 URL 可能变成 /user?id=123&id=456。
- 推荐：GET 表单的
action保持干净（如/search），让浏览器自动拼参 - POST 表单的
action可带路径变量（如/api/v1/users/123），但不要带查询参数 - 注意：某些后端框架（如 Express）对
req.query和req.body的解析依赖 method，错配会导致取不到数据
form 的 action 与 base 标签存在隐式冲突
如果页面中声明了 <base href="https://cdn.example.com/">，那么所有相对 action（如 action="submit.php"）都会被解析为 https://cdn.example.com/submit.php —— 这通常不是你想要的，CDN 域名大概率不处理表单提交。
这种问题在静态站点生成器或 CMS 中很常见，现象是表单始终 404 或跨域失败，但控制台不报 CORS 错误（因为请求发到了 CDN，而非你自己的后端）。
- 检查方式：右键查看页面源码，搜
<base>；或在控制台执行 <code>document.querySelector('base')?.href - 解决办法：改用绝对 URL（如
action="https://your-api.com/submit"），或移除<base>标签 - 注意：Vue/React 等 SPA 项目一般不用
<base>，但传统模板引擎（如 Twig、Jinja）可能默认注入
服务器返回 302 重定向时，action 地址决定重定向来源
当后端对 action="/login" 的 POST 返回 Location: /dashboard，浏览器跳转后地址栏显示的是 /dashboard，但历史记录里“上一页”仍是 /login —— 这会影响用户点击返回按钮的行为。
更关键的是：若后端重定向到另一个域名（如从 http://localhost:3000 到 https://prod.example.com），且未设置 Access-Control-Allow-Origin，前端 JS 就无法读取响应头或 body（即使状态码是 302）。
- 调试建议：打开 DevTools → Network → 找对应 form 请求，看 Initiator 是
form还是fetch，再确认 Response Headers - 避免意外重定向：确保
action指向明确处理该表单的 endpoint，而非通用路由入口 - 敏感操作（如支付）建议服务端返回 JSON 而非重定向，由前端决定后续跳转逻辑
action 看似简单，但和 base 标签、重定向策略、前后端协议约定都咬得很紧。一个没注意的斜杠、一个残留的 base 标签、一次没校验的重定向，都可能导致表单静默失败。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
