name重复会导致表单提交时仅保留最后一个同名控件的值，造成数据丢失；radio和多选checkbox属正常场景，其余重复需按场景修复并同步更新id、for及js选择器。
表单控件 name 重复本身不是错误，但会导致数据丢失或覆盖——浏览器只提交最后一个同名字段的值，前面的全被忽略。
为什么 name 重复会丢数据
HTML 规范允许多个元素共用同一个 name，但表单提交时，name 是键，值是“最后出现的那个控件的 value”。比如两个 <input name="email">，用户在第一个里输 a@b.com，第二个里输 c@d.com，后端收到的永远只是 c@d.com。
- 多选下拉框（
<select multiple></select>）除外：它会把所有选中项拼成数组，前提是name后带[]，如name="hobbies[]" -
<input type="radio">是特例：同一组必须共用name才能互斥，这是正确用法 - 服务器端解析（如 PHP 的
$_POST['email']、Node.js 的req.body.email）只取一个值，不会报错也不会警告
如何判断是否真有 name 冲突
别靠肉眼扫。打开控制台，粘贴这行代码：
Object.entries(Array.from(new Set([...document.querySelectorAll('[name]')].map(el => el.name))).reduce((acc, n) => { acc[n] = (acc[n] || 0) + 1; return acc; }, {})).filter(([_, count]) => count > 1)
返回空数组就安全；否则会列出所有重复的 name 值。
- 注意：这个检查只看当前 DOM，不包含 JS 动态插入但尚未 append 的元素
- 如果用了 Vue/React，要等组件挂载完成再运行，否则查不到渲染后的控件
- 服务端模板（如 Twig、EJS）生成的重复
name，得在 HTML 源码里搜，不能只看 Elements 面板
name 重复的修复策略
不是所有重复都要改——先分清场景：
- 如果是
<input type="radio">或<input type="checkbox">（且期望多选），保留相同name，但确保value不同；checkbox 多选需加[]后缀，如name="interests[]" - 如果是条件显示的表单区块（如 Mailchimp 的不同角色表单），
name必须统一（后端依赖它），但每个区块内控件要用唯一id和for，避免验证逻辑错绑 - 如果是响应式双表单（桌面+移动端各一套），
name保持一致，但id改成email-desktop/email-mobile这类语义化命名 - 如果纯属手误（比如复制粘贴漏改），直接删掉多余的
name属性，或重命名为带上下文的，如name="contact_email"和name="billing_email"
容易被忽略的坑
最麻烦的不是 name 本身重复，而是它和 id、for、JS 查询逻辑耦合出问题：
- 写
document.querySelector('input[name="email"]')会拿到第一个，但你可能想操作的是当前可见区块里的那个 - 用
label[for="email"]关联时，如果对应id="email"的元素被display: none了，点击 label 仍会聚焦到隐藏输入框，用户无感知 - 无障碍工具（屏幕阅读器）靠
for和id匹配读出控件用途，name重复但id不唯一，会导致语音提示混乱
所以改 name 前，先确认关联的 id、for、JS 选择器、后端接收逻辑是否同步更新——漏掉任意一环，问题只是从“丢数据”变成“更难定位”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
