表单提交失败的根本原因是本地 file:// 协议下无 HTTP 服务接收请求，必须通过 http://localhost 运行（如 python3 -m http.server）；input 等控件需有 name 属性，form 需正确闭合且不嵌套错误，JS 中 preventDefault 后须手动 fetch 提交。
表单提交失败是因为没有后端接收
本地直接双击打开的 file:// 协议 HTML 文件，<form> 提交时浏览器会尝试发起 HTTP 请求，但本地文件系统不提供 HTTP 服务，所以 action="submit.php" 或 action="/api/submit" 一律失败——不是代码写错了，是根本没地方收。
常见错误现象：
点击提交后页面跳转到空白或显示 ERR_FILE_NOT_FOUND；控制台报 net::ERR_FILE_NOT_FOUND 或 Failed to load resource；表单数据完全没发出去。
- 必须用 HTTP 服务运行（哪怕最简）：
python3 -m http.server 8000、npx serve、VS Code Live Server 插件等 -
action值不能是相对路径指向本地 .php/.js 文件——那些文件不会被解释执行，只是被当静态资源下载 - 如果只是想验证前端逻辑（比如校验、序列化），可把
method改为get并设action=""，提交后 URL 会带上参数，方便观察
form 标签缺少必要属性或结构错误
即使开了本地服务器，表单仍不提交，大概率是 HTML 结构或属性漏了关键项。浏览器对 <form> 的容错有限，尤其在非标准嵌套或缺失 name 时。
常见错误现象：
点提交没反应；打开开发者工具 Network 面板看不到请求；后端收不到任何字段。
立即学习“前端免费学习笔记（深入）”；
-
<input>、<select>、<textarea>必须有name属性，否则不会随表单提交（id不起作用） -
<form>必须闭合，且不能嵌套在<p>、<div>等非块级容器里（虽然部分浏览器容忍，但易出问题） - 避免用
button而非input type="submit"且未设置type="submit"—— 默认是type="button"，不触发表单提交
JavaScript 阻止了默认提交但没手动处理
加了 onsubmit="return false;" 或用 addEventListener('submit', e => e.preventDefault()) 后，表单看起来“点了没反应”，其实是被静默拦截了。这是调试中最容易误判为“表单坏了”的情况。
使用场景：
需要 AJAX 提交、前端校验、防重复点击等。
- 只要用了
e.preventDefault()，就必须自己调fetch()或XMLHttpRequest发送数据 - 检查是否遗漏了
event.preventDefault()但又没写后续逻辑，导致“点不动” - 临时调试可先注释掉 JS 绑定，确认原生提交是否正常，再逐步加回逻辑
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault(); // 这行删掉就能看到原生提交效果
const data = new FormData(this);
fetch('/api/submit', { method: 'POST', body: data })
.then(r => r.json())
.then(console.log);
});
本地开发时用 fetch 提交但跨域或 MIME 类型报错
用 JS 提交时出现 Access to fetch at 'http://localhost:3000/api' from origin 'null' has been blocked 或 The request client is not a secure context，本质是浏览器安全策略限制：从 file:// 加载的页面无法发起跨域请求，且部分 API（如 navigator.geolocation）要求 HTTPS 或 localhost。
性能 / 兼容性影响：
Chrome 95+ 对 file:// 页面限制更严，连 fetch 本地 JSON 文件都会被拒。
- 唯一可靠解法：别用双击打开，改用
http://localhost:xxxx访问（哪怕只是 Python 内置服务器） - 若必须离线演示，可用
FormData+URLSearchParams拼接查询字符串，用location.href跳转模拟 GET 提交 - 不要试图用
chrome --unsafely-treat-insecure-origin-as-secure="file://"启动——仅限测试，且新版 Chrome 已禁用该 flag
