name属性字符串字面量必须完全一致才能分组，大小写、空格、连字符等差异均导致分组失效；value需唯一且语义化以保障提交有效性；分组与form标签无关，但label需正确关联id以确保可访问性。

name属性必须完全一致才能分组

浏览器只比对name属性的字符串字面量是否相等，任何差异都会导致分组失效。大小写、空格、下划线、连字符混用全算不同值。

• name="theme" 和 name="Theme" → 两组，可同时选中
• name="user_type" 和 name="user-type" → 两组
• name="plan" 和 name=" plan"（开头有空格）→ 两组
• 漏写name属性的<input type="radio"> → “孤儿单选框”，永远无法互斥

value不同才能区分实际选项

name管分组，value管提交内容。同一组内若value重复，表单提交后服务端收不到有效区分信息。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 默认value="on"，复制时没改就容易全变成value="on"，后端收到多个同名同值项，逻辑崩掉
• 推荐用语义化值：value="light"、value="dark"、value="auto"
• 含空格或特殊字符的value（如value="VIP member"）需注意 URL 编码，否则可能被截断

不套form标签也能分组

分组是浏览器原生行为，和<form></form>标签无关。脱离form只是放弃默认提交能力，互斥逻辑照常工作。

• JS 获取选中值仍可用：document.querySelector('input[name="theme"]:checked')?.value
• 动态插入时务必显式设置el.name = "theme"，别依赖克隆节点（容易漏掉name）
• 用document.querySelectorAll('input[type="radio"][name="theme"]')检查当前组成员数，比肉眼数可靠

label绑定不影响分组但影响体验

<label></label>不参与name分组逻辑，但它决定用户能否点击文字触发选择——这是可访问性和用户体验的关键。

• 必须用for属性关联id：<label for="male">男</label> + <input id="male" name="gender">
• 不配id/for，点击文字无效；仅靠包裹写法（<label><input>男</label>）虽可行，但语义弱、无障碍支持差
• fieldset+legend能提升语义化，尤其在多组并存时避免歧义

name值拼写错误是调试时最耗时间的坑——它不报错、不警告，只默默让单选变多选。动态生成或多人协作时，建议把name值抽成常量或配置项统一管理，而不是散落在各处硬编码。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！