服务器收不到带id但无name的表单字段，因html规范规定仅name属性的控件值才会被提交；id仅用于前端交互与样式，name才是数据提交的唯一标识符。
表单提交时，name 属性是服务器能接收到数据的唯一依据；没有 name，哪怕有 id，字段值也根本不会发出去。
为什么服务器收不到带 id 但没 name 的表单字段
浏览器只把带有 name 属性的表单控件（input、select、textarea、button 等）的值打包进请求体。这个行为由 HTML 规范强制约定，与 JavaScript 是否能读取该元素无关。
常见错误现象：
- 写了
<input id="username" type="text">，后端用request.form.get("username")拿不到值 - 用
document.getElementById("username").value在前端能读到内容，但提交后服务端为空
原因很简单：提交逻辑不看 id，只扫描 name。即使你用 JS 手动拼接 FormData，也得显式传 name 作为键名。
radio 和 checkbox 必须靠 name 分组
name 是实现单选/多选语义的底层机制。同一组 radio 要互斥，必须共享相同的 name 值；checkbox 提交多个同名值时，后端才能按数组或逗号分隔方式接收。
关键点：
-
<input type="radio" name="gender" value="male">和<input type="radio" name="gender" value="female">才算一组 - 如果两个
radio的name不同，它们就互不影响，也无法被当做一个字段处理 -
id只用于绑定<label for="xxx"></label>或 CSS/JS 定位，对分组毫无作用
JavaScript 中 name 和 id 的获取方式完全不同
id 是 DOM 元素的唯一锚点，而 name 是表单域的“提交标识符”，二者在脚本中不可混用。
典型操作对比：
- 通过
id获取单个元素：document.getElementById("email") - 通过
name获取元素集合（尤其适用于多值场景）：document.getElementsByName("hobby")→ 返回 NodeList，需遍历取.value - 表单内快捷访问（仅限传统写法）：
document.myForm.email.value中的myForm和email都是name，不是id
注意：getElementsByName 返回的是类数组，不是单个元素；若页面中有多个同名 name（如多个 hobby 复选框），不手动遍历会出错。
label 的 for 属性和 CSS 选择器只认 id，不认 name
这是最容易混淆的边界：虽然 name 决定能否提交，但很多前端交互依赖 id。
必须用 id 的场景：
-
<label for="pwd">Password</label> <input id="pwd" type="password">——for属性只接受id字符串 - CSS 中用
#pwd选中该元素，不能写[name="pwd"]（虽可行但非标准且性能差） - 现代框架或无障碍工具依赖
id做焦点管理、ARIA 关联等
所以一个健壮的表单字段通常要同时写 id 和 name，但目的截然不同：一个为交互与样式服务，一个为数据流转服务。
最常被忽略的一点是：动态生成表单时，用 element.setAttribute("name", "xxx") 是安全的，但直接赋值 element.name = "xxx" 在某些旧浏览器中可能无效；而 id 的设置两者都支持。别让运行时动态添加的字段因 name 设置失败而“静默丢数”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
