表单提交失效的核心原因是按钮未设type="submit"、formaction仅对type="submit"生效、表单结构非法（如自闭合或嵌套错误）、action路径错误或缺失、文件上传未设enctype="multipart/form-data"。
button没设type="submit"就根本不会提交
浏览器只认type="submit"的<button>或<input>为提交触发器。写成<button>提交</button>或<button type="button">提交</button>，点击后连submit事件都不会派发——不是卡住，是压根没启动表单机制。
-
type="submit"必须显式声明，不能依赖默认值（HTML里<button>默认是type="button"） -
<input type="button">同理无效；只有<input type="submit">或<input type="image">才行 - 如果用了
event.preventDefault()但没后续动作（比如form.submit()或fetch()），也会表现为“点了没反应”
formaction属性只对type="submit"生效
formaction不是万能补丁，它只在type="submit"的按钮上起作用。给<button type="button">加formaction完全被忽略——浏览器直接当普通按钮处理，不解析任何form-前缀属性。
- 正确写法：
<button type="submit" formaction="/api/save">保存草稿</button> - 若按钮在
<form>外部，必须用form="myform"显式绑定，否则formaction不生效 -
formaction会覆盖<form>的action，但仅限当前按钮；多个type="submit"可各自指定不同formaction
表单结构被破坏：空form标签或嵌套错误
最隐蔽的失效原因是HTML结构非法——比如写了<form action="xxx"></form>这种自闭合标签，导致后续所有控件（包括<input type="submit">）都落在<form>之外。浏览器按规范解析，认为按钮根本不属于任何表单，自然无响应。
- 检查DOM树：右键“检查元素”，确认
<input>或<button>是否真在<form>开始和结束标签之间 - Bootstrap模态框常见陷阱：整个
<div class="modal">被包在<a>里，点击优先触发锚点跳转，表单提交被拦截 - Vue/React项目中，若用
v-if或useState动态渲染表单，确保<form>完整挂载后再交互，否则DOM节点可能未就绪
action路径写错或留空，请求发到了错误地址
表单点了没反应？先打开Network面板看有没有请求发出。90%的情况是action写错：相对路径漏了./、绝对路径少开头/、跨域没写全协议域名，或者干脆留空——此时浏览器默认提交到当前URL（含query string和hash），后端通常没监听这个路径。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
action="./api/submit"（明确相对当前HTML目录）或action="/api/submit"（从域名根开始） - 避免
action="api/submit"：它依赖当前HTML所在目录，部署时容易失效 - 留空
action或写action=""：等效于提交到window.location.href，大概率405或刷新页面 - 含文件上传必须配
enctype="multipart/form-data"，否则后端收不到文件字段
type、formaction、action、嵌套关系，缺一不可。最容易被忽略的是：按钮是否真在表单内，以及路径是否和服务器实际路由完全一致。 
