action属性写相对路径时，浏览器解析它相对于当前页面url（地址栏显示的完整地址），而非html文件所在目录；例如当前页为https://example.com/admin/user/edit.html?id=123，则action="save"提交至https://example.com/admin/user/save。
action 属性写相对路径时，到底相对于谁
浏览器解析 action 的路径，是相对于当前页面的 URL（不是 HTML 文件所在目录），也就是地址栏里显示的那个地址。比如你访问的是 https://example.com/admin/user/edit.html?id=123，那么 <form action="save"></form> 会提交到 https://example.com/admin/user/save，而不是 /admin/save 或同目录下的 save 脚本。
常见踩坑：开发时本地用 file:// 打开 HTML，此时相对路径基本失效（浏览器限制 + 无 HTTP 上下文），表单根本发不出去——必须起一个本地服务（如 python -m http.server）才能正确测试。
- 推荐始终用以
/开头的绝对路径（站根路径），例如action="/api/submit"，避免依赖当前 URL 结构 - 如果后端接口在子路径下（如部署在
/myapp/下），前端需同步前缀，或由构建工具注入BASE_URL - 不要写成
action="./save.php"或action="save.php"，除非你确定所有入口页都在同一级目录且不会带查询参数
action 指向 API 接口时，必须注意协议和跨域
如果 action 写的是完整 URL，比如 action="https://api.example.com/v1/submit"，那它会发起一次**同步的表单提交跳转**，页面将离开当前页、加载响应内容。这不是 AJAX，也不走 CORS 控制——浏览器直接发 POST，服务端必须返回 HTML（或重定向），否则用户看到空白页或原始 JSON。
真正想做前后端分离式提交？别用 action，改用 JavaScript 拦截表单并 fetch：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
document.querySelector('form').addEventListener('submit', async e => {
e.preventDefault();
const res = await fetch('/api/submit', {
method: 'POST',
body: new FormData(e.target)
});
});
-
action值为外部域名时，若协议不一致（如页面是http://，action 是https://），现代浏览器会直接拒绝提交 - 即使协议域名一致，如果端口不同（如
:3000vs:8080），也视为跨域，action提交仍能发出去（因为不是 XHR），但服务端响应不能含敏感 header（如Set-Cookie）且无法被 JS 读取 - 表单提交天然不携带
Content-Type: application/json，传 JSON 必须用 JS 手动构造，action只支持application/x-www-form-urlencoded或multipart/form-data
PHP/Node.js 后端收不到 POST 数据？检查 enctype 和 method
表单默认 method="GET"，且 enctype 隐式为 application/x-www-form-urlencoded。一旦你加了 <input type="file">，就必须显式设 enctype="multipart/form-data"，否则后端（尤其是 PHP 的 $_POST）收不到任何字段值——文件和普通字段全丢失。
- 没上传文件时，保持默认
enctype即可；有文件必写enctype="multipart/form-data" - PHP 中，
$_FILES只在multipart/form-data下有效；$_POST在urlencoded和multipart下都有，但后者需配合正确解析逻辑 - Node.js 的
express默认不解析multipart，要用multer中间件；而urlencoded需启用express.urlencoded() - 不要写
method="post"（小写），HTML 规范要求大小写不敏感，但某些老旧环境或模板引擎可能出问题，统一用method="POST"
部署到子路径（如 /blog/）时 action 怎么写才不硬编码
硬写 action="/blog/api/submit" 会导致本地开发（根路径）和生产（子路径）环境行为不一致。更稳妥的方式是利用 HTML 的 <base> 标签或服务端模板动态插入路径前缀。
纯静态页可用 <base href="/blog/">（放在 中），之后所有相对 action 都自动补上前缀。但要注意：<base> 会影响页面内所有相对链接（包括 CSS、JS、图片），需全局评估。
- 更推荐在构建阶段替换占位符，如
action="__BASE__/api/submit"，再用 Webpack/Vite 替换为实际路径 - 服务端渲染时，直接输出带前缀的路径，比如 PHP 中
<form action="<?=%20%24base_url%20?>/api/submit"></form> - 千万别用 JavaScript 动态改
form.action，因为用户可能禁用 JS，且 SEO 和无障碍支持会变差
路径看似简单，但混着部署方式、协议、前端路由、CDN 缓存一起出现时，很容易漏掉一两个条件就 404 或 500。动手前先打开浏览器开发者工具的 Network 标签页，看实际发出的请求 URL 是什么，比猜靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
