空字符串action属性使表单提交到当前页面完整URL(含查询参数但不含哈希),等效于省略action;file://协议下会拒绝提交;GET提交丢弃哈希导致前端路由状态丢失,需preventDefault实现静默提交。

action属性为空字符串时表单提交到当前页面URL
当 action 属性设为 ""(空字符串),浏览器会把表单提交到当前页面的完整URL,包括查询参数和哈希。比如当前地址是 https://example.com/search?q=js#results,提交后仍发往这个地址。
这不是“不提交”或“提交到首页”,而是明确按当前 window.location.href 提交。HTML规范里定义空字符串为“当前文档的地址”,不是相对路径解析意义上的“同目录”。
省略action属性和写成action=""效果一样
两种写法在行为上完全等价:
-
<form>(没写action) <form action="">
浏览器都会回退到当前URL。但注意:如果当前页是通过 file:// 协议打开的,多数现代浏览器会直接拒绝提交(报 net::ERR_FILE_NOT_FOUND 或类似错误),因为没有服务端可接收。
立即学习“前端免费学习笔记(深入)”;
容易踩的坑:URL中带#或?时后端收不到参数
表单默认用 GET 提交时,数据拼在URL查询字符串末尾;但哈希(#)后面的内容不会发送给服务器。例如:
当前页是 https://site.com/page.html#section2,提交 <form method="get"><input name="x" value="1"></form>,实际请求的是 https://site.com/page.html?x=1——#section2 被丢弃了。
这会导致前端路由(如 React Router 的 hash 模式)状态丢失,也可能让后端拿不到预期的完整上下文。
-
POST提交不受哈希影响,但查询参数(?后面)仍保留在目标URL中,可能干扰后端路由判断 - 如果当前页URL含编码字符(如
%20),提交时这些编码会被保留,但某些后端框架可能二次解码出错
真正想“不跳转”就别靠action控制
空 action 一定会触发页面刷新或导航。如果目标是纯前端处理(比如用 fetch 提交),必须显式阻止默认行为:
document.querySelector('form').addEventListener('submit', e => {
e.preventDefault();
// 手动 fetch 或其他逻辑
});
别指望删掉 action 就能静默提交——那是常见误解。只要没调 e.preventDefault(),浏览器就会按规则发起导航。
空 action 看似简单,但 URL 细节、协议限制、哈希截断、以及对默认行为的误判,才是实际项目里最常卡住人的地方。



















