通过将 <input type="radio"> 嵌套在 <label> 标签内，可实现点击文本即选中对应单选按钮的效果，无需额外 JavaScript，符合语义化 HTML 最佳实践。
通过将 `` 嵌套在 `
在表单开发中，提升可访问性与用户体验的一个关键细节是：让用户不仅能点击小圆圈（radio 按钮本身），还能直接点击其关联的说明文字来完成选择。HTML 原生就提供了简洁可靠的解决方案——使用 <label> 元素包裹 radio 输入及其文本内容。
✅ 正确写法（推荐，语义清晰、无需 ID）：
<label> <input type="radio" name="drink" value="milk"> 牛奶 </label> <label> <input type="radio" name="drink" value="coffee"> 咖啡 </label> <label> <input type="radio" name="drink" value="tea"> 茶 </label>
此时，点击“牛奶”“咖啡”或“茶”任意文字区域，均会自动选中对应的单选按钮。浏览器会将整个 <label> 视为该 <input> 的可点击热区，且天然支持屏幕阅读器，无障碍友好。
⚠️ 注意事项：
- 所有同组 radio 必须具有相同的 name 属性（如 name="drink"），才能实现互斥选择；
- 避免将多个 <input> 套在同一 <label> 内，否则行为不可预测；
- 不需要 for 和 id 属性——嵌套方式（label → input）已隐式建立关联，更简洁、更健壮；
- 若需样式定制（如隐藏原生 radio 圆圈），可在保持此结构基础上，用 CSS 隐藏 <input> 并美化 <label>，确保功能与可访问性不受影响。
? 小结：这不是“笨问题”，而是初学者触及 HTML 语义化核心的重要一步。善用 <label> 不仅让页面更易用，也使代码更规范、更健壮、更利于维护。
