form 的 action 属性是必填项，指定表单提交的目标 URL；不写或设为空字符串时，浏览器默认提交至当前页面完整 URL，易导致 404 或刷新白屏；需确保 action 与后端路由、协议同源，避免跨域或混合内容问题；动态设置时须使用可信地址，防止恶意跳转。
form 的 action 属性就是提交数据的目标 URL
它决定了用户点击提交按钮后，表单数据发往哪里。不是“可选”，而是必填（不写时浏览器默认提交到当前页面 URL）；但若没配对后端接口，提交必然失败或刷新白屏。
不写 action 或写成空字符串会发生什么
两种写法效果一致：action="" 或完全省略，浏览器会把数据 POST/GET 到当前页面的完整 URL（含查询参数和 hash）。比如你在 https://example.com/login?ref=home#top 页面提交，数据就发往这个地址——后端通常不处理这种 URL，结果是 404 或 200 返回原页面（无响应）。
- 常见错误现象：点提交没反应、页面刷新、控制台无报错但数据没收到
- 调试建议：打开浏览器开发者工具 → Network 标签页 → 点提交 → 查看第一条请求的
Request URL是不是你预期的地址 - 注意：HTML 解析时，
action值会被自动相对路径解析，action="api/login"实际发出的是https://example.com/api/login（基于当前页面 URL）
action 必须匹配后端路由和协议
如果后端 API 是 https://api.example.com/v1/users，那 action 就得写全（或确保同源），否则跨域请求会被浏览器拦截（CORS 错误），且表单提交不走 fetch/Axios，是传统同步导航，无法捕获 CORS 拒绝的详细提示。
- 同源最稳：前端页面在
https://admin.example.com，后端也部署在同一域名下（如/api/submit） - 非同源需后端配置
Access-Control-Allow-Origin，但表单提交本身不触发预检，所以跨域action多数情况只会跳转到对方页面（如果对方允许）或被拒绝 - 别混用协议：当前页是
http://，action写https://会导致现代浏览器直接阻止（Mixed Content）
动态设置 action 的安全注意事项
用 JS 改 form.action = url 是可行的，但必须在提交前完成，且 url 必须可信——否则可能被注入恶意地址（如指向钓鱼站）。
立即学习“前端免费学习笔记（深入）”；
<form id="myForm">
<input name="email">
<button type="submit">提交</button>
</form>
<script>
// ✅ 安全：从预定义列表取值
const endpoints = {
'login': '/auth/login',
'register': '/auth/register'
};
document.getElementById('myForm').action = endpoints['login'];
// ❌ 危险：拼接用户输入
// form.action = '/submit?target=' + userInput; // 可能变成 '/submit?target=https://evil.com'
</script>
复杂点在于：表单提交是原子操作，一旦触发，JS 无法中途取消（除非 event.preventDefault() 自己用 fetch 提交），所以 action 的值必须在点击瞬间就确定且可靠。
