必须确保每个表单控件拥有真正唯一的ID，否则JS操作、焦点控制、标签绑定和屏幕阅读器均会出错；重复ID是动态表单中最隐蔽却后果最严重的结构性错误。
关键不是“怎么用 ID 唯一性”，而是“必须让每个表单控件拥有真正唯一的 ID，否则 JS 操作、焦点控制、标签绑定、屏幕阅读器都会出错”。重复 ID 是动态表单中最隐蔽却后果最严重的结构性错误。
表单控件 ID 必须一一对应真实字段
一个输入框、一个 <label>、一个错误提示区，三者若属于同一逻辑字段，就该共享同一个、且仅此一个的 ID。例如：
- ✅ 正确：
<input id="user-email" name="email"><label for="user-email">邮箱</label> - ❌ 错误：多个
<input id="email">出现在不同卡片/选项卡中 ——document.getElementById('email')永远只拿到第一个，验证时聚焦错位、值读取错位、label 点击总跳到第一个框
动态渲染时禁用静态 ID + 用结构关系替代硬编码查找
不要在循环中写 id="price" 或 id="quantity"。模板里直接用语义化 class，再靠事件委托和 DOM 层级定位目标：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 移除所有重复 ID，改为
class="form-field__input"、class="form-item"等可复用类名 - 点击“删除此行”按钮时，不查
getElementById('row-1')，而用e.target.closest('.form-item')向上找最近容器 - 获取当前行的邮箱值：
row.querySelector('[name="email"]').value，不依赖 ID
真需要唯一 ID 的场景：用稳定生成策略，不拼时间戳
只有当必须用 ID（如 aria-labelledby、<label for>、第三方组件要求）时，才生成——且必须可靠：
立即学习“前端免费学习笔记（深入）”；
- 避免
Date.now()：毫秒级精度在快速操作或批量渲染中极易冲突 - 避免
Math.random()截取：伪随机数短序列重复概率高 - ✅ 推荐：
crypto.randomUUID()（现代浏览器支持）或带前缀+递增计数器：`field-${prefix}-${counter++}` - 示例：
<input id="address-form-2-email" name="email"><label for="address-form-2-email">收件邮箱</label>
验证是否达标：三步快速自查
每次新增表单项后，打开控制台执行：
-
console.table([...new Set([...document.querySelectorAll('[id]')].map(el => el.id))].filter(id => id && document.querySelectorAll(`[id="${id}"]`).length > 1)))—— 查重 ID 列表 - 点任意 label，看光标是否精准落到对应输入框（而非第一个）
- 运行
document.getElementById('xxx')，确认返回的是你预期的那个元素，不是“碰巧在上面”的那个
