表单元素唯一标识必须用id而非name，因name允许重复以支持单选/复选组，而id是DOM定位唯一锚点；label绑定、可访问性及动态场景均依赖id全局唯一性。
表单元素的唯一标识不能靠 name 属性实现，必须用 id —— 因为 name 本就允许重复（比如一组 radio），而 id 才是浏览器定位单个元素的唯一锚点。
为什么 name 不等于唯一标识
name 的设计目的就是支持重复：同一组单选按钮必须共享 name="gender" 才能互斥；复选框同理。浏览器提交时也只认 name 作为字段键名，和 DOM 查找无关。
-
document.getElementsByName("email")返回的是 NodeList，不是单个元素 - 写两个
<input name="email">不报错，但 JS 无法用它精准操作某一个 - CSS 中
[name="email"]是属性选择器，性能差、特异性低，且不适用于label关联
id 必须全局唯一，且要避开常见坑
哪怕只差一个字符，id="user-email" 和 id="user_email" 就是两个 ID；但若写成 id="email" 被多个输入框共用，document.getElementById("email") 永远只返回第一个。
- 服务端模板循环中别写死
id="input"，改用id="user-input-{{user.id}}" - Vue/React 组件里避免静态
id="submit-btn"，应通过 prop 注入前缀，如:id="prefix + '-submit'" - 别用数字开头：
id="1st-field"合法但 CSS 里得写成#\31 st-field，极易出错 - 禁用点号和冒号：
id="user.email"会让querySelector("#user.email")解析成「id=user 且 class=email」
label 绑定必须依赖 id，否则可访问性失效
屏幕阅读器和点击放大区域都靠 label[for] 和对应控件的 id 匹配。如果 for="email" 指向了多个 id="email" 元素，行为不可预测——有的浏览器聚焦第一个，有的直接忽略。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<label for="login-email">邮箱</label><input id="login-email" name="email"> - 错误写法：
<label for="email">邮箱</label><input id="email"><input id="email"> - 包裹式写法（不用
id）可行但受限：<label>同意<input type="checkbox"></label>，仅适合简单场景
真正难的不是怎么写 id，而是确保它在 SSR/Hydration、组件复用、第三方脚本注入后依然稳定唯一——一旦漏掉某个动态上下文，重复 ID 就会变成静默故障源。
