表单提交失效主因是form标签被意外截断或嵌套、控件缺失name属性、submit按钮未正确归属表单；需用DevTools确认DOM结构完整性及FormData实际采集内容。
检查 form 标签是否被意外截断或嵌套
跨表单提交不是标准行为，所谓“跨表单”往往其实是 DOM 结构错乱导致的假象：一个 form 被提前闭合，后续字段看似在同一个逻辑表单里，实际已游离在外。浏览器只提交当前 form 子树内的控件，游离字段直接被忽略。
- 用 DevTools 的 Elements 面板右键点击任意疑似“该提交却没发”的
input或textarea，向上逐级查看父节点，确认它是否真在目标form开始与结束标签之间 - 搜索页面中所有
<form></form>和，尤其注意模态框（modal）、弹窗、动态插入内容里有没有孤立的<form></form>或自闭合<form></form>—— 它们会强制截断外层form - 避免
<form><table><tr><td><input name="x"></td></tr></table></form>这类结构：虽合法，但易因缩进/编辑失误造成form闭合位置偏移
验证 name 属性是否存在且拼写一致
参数缺失最常见原因不是网络或后端，而是字段压根没被浏览器采集——name 缺失、为空、大小写不匹配，都会让对应键值对从提交数据中彻底消失。
- 打开 Network 面板，触发提交，点开刚发出的请求 → 查看 Headers 下的 Form Data 或 Payload → 确认缺失字段名是否根本没出现（不是值为空，是整个 key 缺失）
- 检查所有控件：
<input>、<textarea></textarea>、<select></select>、<input type="checkbox">、<input type="radio">，每个都必须有非空name属性 - 大小写敏感：
email和Email是两个不同字段；嵌套名如user[profile][phone]在 PHP 中有效，但在 Express 默认urlencoded中需启用extended: true才能正确解析
确认 submit 触发源是否真正属于目标 form
按钮类型错误或 DOM 位置错位，会导致点击后“无任何请求发出”，看起来像参数缺失，实则是表单根本没启动。
- 检查按钮是否显式声明了
type="submit"：<button></button>默认是type="button"，不会触发表单提交 - 确认按钮节点在 HTML 源码中位于目标
form的开始与结束标签之间（哪怕隔着<div>、<code><table> 多层） <li>若表单由 JS 动态渲染（如 Vue <code>v-if、ReactuseState），确保事件监听器绑定在节点真实挂载到 DOM 后，而非仅在页面加载时执行一次 - 在
form.addEventListener('submit', e => { ... })中第一行加：console.log([...new FormData(e.target).entries()]) - 如果输出为空数组，说明
e.target不是预期的form，或所有子控件都缺name，或form结构断裂 - 如果某字段没出现在输出里，立刻定位该 DOM 节点，检查其
name值、父级form包裹关系、是否被disabled或display: none（后者不影响采集，前者会跳过）
用 FormData 在提交前做最终校验
别依赖肉眼检查或后端日志反推——在 submit 事件处理器开头，用原生 API 实时确认浏览器到底采集了什么。
立即学习“前端免费学习笔记（深入）”；
form 是否真实存在、按钮是否真能触发表单、以及那个关键字段有没有被赋予一个合法的 name。
