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重复，表单提交后服务端收不到有效区分信息。
- 默认
value="on"，复制时没改就容易全变成value="on"，后端收到多个同名同值项，逻辑崩掉 - 推荐用语义化值：
value="light"、value="dark"、value="auto" - 含空格或特殊字符的
value（如value="VIP member"）需注意 URL 编码，否则可能被截断
不套form标签也能分组
分组是浏览器原生行为，和<form>标签无关。脱离form只是放弃默认提交能力，互斥逻辑照常工作。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- JS 获取选中值仍可用：
document.querySelector('input[name="theme"]:checked')?.value - 动态插入时务必显式设置
el.name = "theme"，别依赖克隆节点（容易漏掉name） - 用
document.querySelectorAll('input[type="radio"][name="theme"]')检查当前组成员数，比肉眼数可靠
label绑定不影响分组但影响体验
<label>不参与name分组逻辑，但它决定用户能否点击文字触发选择——这是可访问性和用户体验的关键。
立即学习“前端免费学习笔记（深入）”；
- 必须用
for属性关联id：<label for="male">男</label>+<input id="male" name="gender"> - 不配
id/for，点击文字无效；仅靠包裹写法（<label><input>男</label>）虽可行，但语义弱、无障碍支持差 -
fieldset+legend能提升语义化，尤其在多组并存时避免歧义
name值抽成常量或配置项统一管理，而不是散落在各处硬编码。 
