不能用Math.random()或时间戳生成ID，因其不可控、不可预测、不可调试，会导致localStorage状态失配、服务端错误字段名无法定位DOM、React/Vue组件反复重建；应使用crypto.randomUUID()或基于稳定输入的哈希，并确保ID与name、label[for]、aria-labelledby及后端字段名语义一致。
大型动态表单系统里，id 不能靠“随便拼一个”应付，否则 document.getElementById 会稳定返回错的元素，label[for] 绑定失效，屏幕阅读器报错，且所有这些都可能不抛异常——只静默错位。
为什么不能用 Math.random() 或时间戳生成 id
看似唯一，实则不可控、不可预测、不可调试。用户刷新页面后同一字段 id 变了，导致 localStorage 中保存的焦点位置、展开状态、校验错误标记全部失配；服务端回传的错误字段名（如 email-1624589321234）下次渲染就找不到对应 DOM；更严重的是，React/Vue 的 key 和 id 混用时，Math.random() 会让组件反复销毁重建，事件监听器丢失。
- 永远不用
Math.random().toString(36).substr(2, 9)生成id - 避免
Date.now()+ 计数器，多实例并发时仍可能重复（尤其 SSR 同一毫秒） - 若必须运行时生成，优先用
crypto.randomUUID()（现代环境），或基于稳定输入哈希（如字段路径 + schema 版本号）
表单字段 id 必须与 name 语义对齐
id 不是装饰，它要和 name、label[for]、aria-labelledby、甚至后端错误定位字段名保持逻辑一致。比如一个邮箱字段，name="user[email]" 就该配 id="user-email"，而不是 id="field_1723456789" 或 id="input-2"。
-
name="profile[phone][]" → id="profile-phone-0"，数组索引从 0 开始，与提交数据结构一致 - 禁用用户手动编辑
id属性，改用dataset.fieldId存业务标识，防止 HTMLid冲突 - 服务端返回的校验错误字段名（如
"profile.phone.0"）需有确定规则映射到 DOMid，不能靠字符串替换硬猜
模板克隆时 id 冲突的修复时机很关键
用 <template> 动态插入字段时，模板内写的 id="email" 会被克隆出 N 个同名 id，但问题不在克隆那一刻，而在后续调用 document.getElementById('email') 时才暴露——它永远只取第一个。
立即学习“前端免费学习笔记（深入）”；
- 必须在
cloneNode(true)后、appendChild前重置id，且同步更新label[for]、aria-describedby等所有引用点 - 不要用
querySelectorAll('input').length算序号，用户删掉中间某项后，DOM 数量变少，但旧id="email-2"还在，提交时仍有效 - 推荐方案：每个字段配置带
stableKey: "user-email-1"，生成时直接赋给id和name，不依赖渲染顺序
真正难的不是生成唯一字符串，而是让这个字符串在前端渲染、后端校验、无障碍访问、历史版本比对、错误追踪这五个维度上始终指向同一个语义单元——漏掉任意一环，id 就从锚点变成陷阱。
