name属性必须全局唯一且大小写敏感；单选按钮互斥仅取决于name字符串完全一致；克隆时需动态重置name与关联label的for属性；命名应带业务前缀并与后端字段严格一致；服务端须校验name白名单及value枚举值。
name属性必须全局唯一且大小写敏感
单选按钮是否互斥，只取决于name值是否完全一致——包括大小写、空格、连字符和下划线。浏览器不解析语义，只做字符串精确匹配。name="theme"和name="Theme"是两组；name="plan"和name=" plan"（开头有空格）也互不干扰。
常见错误是复制粘贴后漏改name，比如主食和主菜都用了name="buffetSelection"，结果用户只能选一个。解决办法很简单：按业务逻辑命名，例如name="mainCourse"和name="mainGravy"，确保前后端字段名也严格对齐。
克隆组件时name和id必须动态重置
用cloneNode(true)复制含radio的DOM片段时，原始name和id会被照搬，导致多组控件意外合并成一个大组。这不是JS bug，而是HTML规范行为。
实操建议：
- 克隆后立即遍历所有
input[type="radio"]，用随机数或计数器生成新name，如name="mainCourse_2" - 同步更新关联
label的for属性，否则点击文字无效 - 如果不用
for，改用嵌套写法：<label><input type="radio" name="xxx">选项</label>，天然隔离作用域，无需ID
避免用通用名如“option”“choice”“value”
用name="option"看似省事，但极易被其他脚本、第三方组件或后续开发覆盖。一旦页面中存在另一处name="option"的radio，两组就自动合并。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
更稳妥的做法：
- 带业务上下文前缀，如
name="userPreference_theme"、name="checkoutPayment_method" - 与后端API字段名保持字面一致，避免
user_type前端写成userType - 禁用纯数字或布尔字符串作
name，如name="1"或name="true"，可读性差且易被误删
服务端不能依赖前端name分组的“正确性”
浏览器强制同name互斥，但服务端收到请求时，只看到键值对。如果前端因bug发来多个同名参数（如HTTP重复提交或绕过JS），服务端取第一个值是不可靠的。
关键防御点：
- 校验
name是否存在且在白名单内（如只接受["theme", "language", "notification"]） - 检查该
name对应值是否为预设枚举之一，拒绝value="hacker"这类非法值 - 不要假设用户一定选了——
name可能根本没出现在POST数据里（比如全未选且没加required）
最常被忽略的是：name分组在HTML解析阶段就固化了，跟JS执行顺序、CSS显隐、甚至是否在form标签内都无关。错配的name，调试时Network里payload为空，往往不是提交失败，而是压根没形成有效组。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
