表单提交后端拿不到值的主因是漏写name属性，浏览器仅提交带name的控件；radio/checkbox分组依赖name严格一致；name影响后端键名解析，需避免空格、点号等特殊字符。
没写 name 的 <input>，提交时就等于不存在——不是后端收不到，是浏览器压根不打包它。
为什么表单提交后后端拿不到值？
最常见的原因是漏写了 name 属性。浏览器只把带 name 的控件值放进提交数据（如 application/x-www-form-urlencoded 或 multipart/form-data），哪怕 id="email"、value="test@example.com" 都写了，只要没 name="email"，这个字段就不会出现在请求体里。
-
<input type="text" id="email" value="a@b.com">→ 提交时完全消失 -
<input type="text" name="email" value="a@b.com">→ 请求体中出现email=a%40b.com - 动态生成的控件（如 JS 插入）必须显式设置
el.name = "xxx"，不能只设el.id
radio 和 checkbox 为什么选不了/多选不了？
它们的分组逻辑完全依赖 name 值是否严格一致：大小写、空格、不可见字符都算不同。不是 JS 控制，是浏览器原生规则。
-
<input type="radio" name="color" value="red">和<input type="radio" name="Color" value="blue">→ 两组，可同时选中 -
<input type="checkbox" name="hobby" value="reading">和<input type="checkbox" name="hobby " value="coding">（末尾空格）→ 两组，无法批量提交 - 同一页面多个商品行都用
name="size"？那点第一行会取消最后一行的选中——得改成name="item_123_size"这类带上下文的写法
后端接收时 key 名不对或丢值？检查 name 的命名规范
name 值直接变成 HTTP 请求里的键名，但不是所有后端框架都无脑接受任意字符串。空格、点号、方括号这些字符容易引发静默丢弃或解析失败。
- ✅ 安全写法：
user_name、profile_image、hobby[]（明确需要数组时） - ❌ 高风险写法：
user name（空格）、user.name（点号，PHP/Go 可能跳过）、user[address]（方括号，Express 默认不解析） - 嵌套结构如
user[address][city]要确认后端是否支持——Laravel/Rails 默认行，Node.js Express 需配body-parser的 extended 选项
name 和 id 到底能不能一样？
可以，但没必要混用。两者职责完全不同：id 是 DOM 唯一标识（用于 document.getElementById()、<label for="xxx"></label>），name 是表单数据通道。写成一样只是图省事，一旦需要 JS 操作某组 radio 的状态，你还是得靠 name 查找，而不是 id。
-
<label for="gender_male">男</label><input type="radio" id="gender_male" name="gender" value="male">→for必须匹配id，和name无关 - JS 获取当前选中值：
document.querySelector('input[name="gender"]:checked')?.value，这里name定义组，:checked定位状态 - 后端永远只认
name对应的 key，根本看不到id是什么
真正容易被忽略的是：同名控件在提交时的行为差异——radio 只传一个值，checkbox 传多个，hidden 会被同名文本框覆盖。这不是 bug，是设计，但得你主动按这个逻辑去组织前端和后端代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
