表单控件缺少name属性，数据根本不会发送——浏览器仅序列化带name的控件，id、class等无效；必须为每个input、textarea、select设置合法且大小写一致的name值。
表单控件没 name 属性，数据根本不会发出去
浏览器只序列化带 name 属性的控件——id、class、data- 属性全无效。你看到输入框里有内容，但后端收不到，大概率是漏写了 name。
实操建议：
-
<input type="text" name="username">✅；<input type="text" id="username">❌（提交时完全被忽略） -
<textarea name="message"></textarea>✅；<select name="category"></select>✅ - 多个
<input type="checkbox">要共用同一个name（如name="interests"），后端才能收到数组 - 大小写敏感：
email和Email是两个不同字段，前后端必须严格一致
submit 按钮类型不对或不在 form 内部
点按钮没反应，不是 JS 坏了，而是按钮语义失效了。常见错误包括：<button></button> 默认是 type="button"，不触发提交；或者按钮在 <form></form> 标签外（比如空 <form></form> 后再写按钮）。
实操建议：
- 显式写
<button type="submit">提交</button>，别依赖默认行为 - 用开发者工具检查 DOM：右键按钮 →「检查」→ 确认它是否嵌套在
<form></form>开始与结束标签之间 - 避免自闭合写法：
<form action="/api" method="post"></form>会立即关闭表单，后续所有控件都“失联” - 动态插入的表单（如 Vue/React 渲染），事件监听必须在节点挂载后执行，不能只在页面加载时绑一次
JavaScript 拦截了 submit 却没处理后续逻辑
加了 onsubmit="return false;" 或 addEventListener('submit', e => e.preventDefault()) 后，表单看起来“点了没反应”，其实是被静默拦住了——这是调试中最容易误判为“前端坏了”的情况。
实操建议：
-
e.preventDefault()必须放在事件回调第一行，否则浏览器已跳转，再拦也晚了 - 监听对象必须是
<form></form>元素，不是按钮：form.addEventListener('submit', handler)，而非button.addEventListener('click', ...) - 如果用
fetch提交，必须自己构造请求并处理响应；只拦住默认行为却不发请求，数据就永远卡在前端 - 临时调试可先注释掉 JS 绑定，确认原生提交是否正常，再逐步加回逻辑
文件上传或 FormData 提交时 enctype 和中间件不匹配
含 <input type="file"> 的表单，若没设 enctype="multipart/form-data"，文件字段会被完全忽略；而前端用 FormData 发送，后端没配对解析中间件（如 Express 缺 multer），req.body 就是空对象。
实操建议：
- 文件上传表单必须同时满足：
method="post"+enctype="multipart/form-data" - 用
FormData时，不要手动设置Content-Typeheader——浏览器会自动加上带boundary的 multipart 类型 - 后端需按数据格式启用对应中间件：Express 中
express.json()处理 JSON，multer()处理文件，二者不可互换 - 调试时打印
req.headers['content-type']和原始请求体，确认数据到底卡在哪一层
name 属性缺失和事件监听位置错位，是两类最隐蔽的问题：前者让字段“隐形”，后者让提交“哑火”。它们都不报错，也不警告，只安静地丢掉数据——检查时得从 DOM 结构和事件流两个维度交叉验证，不能只盯 JS 逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
