如何在实际表单项目中使用HTML单选按钮组-html教程-PHP中文网

单选按钮组必须使用相同name属性才能互斥，且需语义清晰、大小写和引号严格一致；每个按钮必须显式设置value值；必须用label包裹或for/id关联以支持点击文字选择；默认选中仅限一个checked。

如何在实际表单项目中使用html单选按钮组

单选按钮组必须用相同的 `name` 属性才能互斥

浏览器只靠 name 值识别一组单选按钮（<input type="radio">）是否属于同一逻辑选项。如果漏写或写错 name，用户就能同时选中多个——这不是 bug，是浏览器按规范执行的结果。

实操建议：

name 值应语义清晰，比如性别用 name="gender"，不推荐用 name="r1" 这类无意义命名
同一组所有 <input type="radio"> 必须严格一致，大小写、空格、引号类型（双/单）都要相同
服务端接收时，也只认这个 name 键名，前后端需对齐

必须为每个单选按钮提供 `value`，否则提交的是空字符串

用户看到的是标签文字（<label></label> 内容），但表单提交时，后端收到的只有 value 属性值。没设 value，或设为空字符串，后端就收不到有效数据。

常见错误现象：前端看着选了“男”，提交后接口日志里却是 gender= 或直接缺失该字段。

实操建议：

每个 <input type="radio"> 都要显式写 value，例如 <input type="radio" name="gender" value="male">
value 应用简短、安全、可存储的值（如 "yes"/"no"、"1"/"0"），避免含空格或特殊符号
不要依赖 <label></label> 文本自动映射——HTML 不支持这种行为

用 `<label></label>` 包裹或关联单选按钮，否则点击文字无法触发选择

纯靠点击小圆圈选中非常反人类。若未正确绑定 <label></label>，用户点“女”两个字毫无反应，会以为功能坏了。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

有两种合法写法：

包裹式（推荐）：<label><input type="radio" name="gender" value="female"> 女</label>
for/id 关联式：给 input 加 id="gender-female"，label 加 for="gender-female"

注意：不能只写 <label>女</label> 而不关联任何 input——这等于没写。

默认选中用 `checked`，但别在多个同名按钮上同时加

同一组单选按钮中，多个 checked 属性不会报错，但浏览器只以第一个为准，其余被忽略。更麻烦的是，若 JS 动态操作时误设多个 checked，可能掩盖逻辑缺陷。

实操建议：

初始默认项只在一个按钮上加 checked，例如 <input type="radio" name="theme" value="light" checked>
动态设置默认值时，先清空同组所有 checked，再设目标项（可用 document.querySelectorAll('input[name="theme"]') 遍历）
如果业务要求“无默认选项”，就一个 checked 都不加，但得提醒用户必选——后端也要做非空校验

实际项目里最容易被忽略的是 value 的设计和 name 的拼写一致性。这两处出错，调试时往往卡在“明明点了却没传值”这类问题上，而根源不在 JS，就在最开头那几行 HTML。