form 的 action 属性是表单提交的目标地址，必填且决定请求发送位置；空值提交至当前完整 URL，相对路径易 404，绝对路径和跨域需注意上下文与 CORS；method 和 enctype 共同影响数据发送方式；JS 拦截时仍应读取 form.action 保证一致性。
form 元素的 action 属性就是表单目标
HTML 表单提交到哪里，完全由 form 标签上的 action 属性决定。它不是可选配置，而是必填项（不写时浏览器会默认提交给当前 URL）。
常见错误现象：form 提交后页面刷新但没跳转、数据莫名发到错误路径、后端收不到请求——八成是 action 拼错、漏写或写了相对路径却没考虑当前 URL 上下文。
-
action值为空字符串（action=""）：提交到当前完整 URL（含 query 参数），容易意外重复提交参数 -
action="submit.php"：相对路径，依赖当前页面所在目录，嵌套路由下极易 404 -
action="/api/submit"：绝对路径，推荐用于前后端分离项目，不受当前页面位置影响 -
action="https://example.com/api/submit"：跨域提交，需后端显式允许 CORS，否则浏览器静默失败（控制台报Blocked by CORS policy）
不写 action 会发生什么
浏览器不会报错，但行为取决于当前页面 URL。比如访问 https://site.com/user/edit?id=123，不设 action 的表单会提交到这个完整地址，query 参数也会被带上——后端可能误解析 id=123 为表单字段。
更隐蔽的问题是：本地开发用 file:// 协议打开 HTML 文件时，不写 action 会导致提交失败（浏览器禁止 file 协议下的表单提交），控制台显示 net::ERR_FILE_NOT_FOUND。
立即学习“前端免费学习笔记（深入）”；
- 开发阶段务必显式写
action，哪怕只是action="#"（配合 JS 阻止默认提交） - 服务端渲染模板中，避免硬编码路径，优先用后端变量注入真实接口地址
- 静态站点生成器（如 Hugo、Jekyll）要注意
action是否随输出路径变化而失效
method 和 enctype 会影响目标执行方式
action 定义“发到哪”，但“怎么发”由 method 和 enctype 联合决定。三者不匹配，目标服务端可能根本收不到可用数据。
-
method="GET"：所有字段拼在 URL 后，action末尾自动追加?key=value；不适合传敏感信息或大数据 -
method="POST"+enctype="application/x-www-form-urlencoded"（默认）：键值对编码，后端常规解析 -
method="POST"+enctype="multipart/form-data"：必须用于文件上传；此时action对应的接口必须支持 multipart 解析，否则返回 400 或空 body -
method="POST"+enctype="text/plain"：极少用，仅调试场景；后端需按纯文本解析，不能依赖标准 form 解析器
前端 JS 拦截时，action 还重要吗
重要。即使你用 event.preventDefault() 阻止默认提交，action 仍是逻辑目标地址的唯一 HTML 来源。硬编码在 JS 里会破坏语义、增加维护成本、导致 SSR 不一致。
更可靠的做法是读取 DOM 属性：form.action，再传给 fetch() 或 axios。这样服务端渲染和客户端行为一致，也方便做 A/B 测试或灰度发布。
- 别在 JS 里写死 URL，比如
fetch("/api/submit")；应写fetch(form.action) - 如果
action是空或#，JS 中需主动 fallback，否则fetch("")会请求当前页面 HTML - 使用
URL构造函数校验action合法性：new URL(form.action, document.baseURI)可捕获相对路径解析错误
action 指向的可能是已被前端 router 拦截的路径，结果页面白屏或触发意料外的导航。 
