单选框需同name值实现互斥，value提交至服务器；复选框同name可多选，未勾选不提交；label提升可访问性；隐藏控件用opacity:0而非display:none；后端解析依赖name命名规范。

单选框 的基本写法

单选框必须成组出现，同一组用相同的 name 属性值才能互斥选择。浏览器只认 name，不是 id 或标签文字。

• name 值必须完全一致（包括大小写和空格），否则会被当成不同组
• 每个 必须有唯一的 value，提交时服务器收到的就是这个值，不是显示文字
• 建议搭配 使用，点击文字也能选中，且可访问性更好：

  <input type="radio" name="color" id="red" value="red"><label for="red">红色</label>

• 默认选中用 checked 属性，但只能在一个同名单选框上生效

复选框 的常见误区

复选框没有互斥逻辑，name 相同只是方便后端批量接收，但值可以多个。很多人误以为要像单选框一样只设一个 checked，其实可以全选、不选、任选几个。

• 提交时，只有被勾选的复选框才会把 value 发送到服务器；没勾的不会出现在请求参数里
• 如果后端需要“未勾选也传值”，不能靠 HTML 解决，得用隐藏字段或 JS 补充
• 不要给多个复选框设相同 id，会导致 for 关联失效，每个 id 必须唯一
• 若想默认全选，就给每个加 checked；若想默认都不选，就都不加

样式控制与可访问性要点

原生 和 默认样式难自定义，但直接用 CSS 隐藏再用伪元素重绘是主流做法，别用 display: none 或 visibility: hidden —— 这会让屏幕阅读器读不到。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 正确隐藏方式：

  input[type="radio"], input[type="checkbox"] { position: absolute; opacity: 0; }

• 用 包裹输入框和文字，比用 for 更可靠，尤其对嵌套结构
• 移动端点击区域太小？给 加 padding 或 min-height，别只调 input 本身
• 禁用状态统一用 disabled 属性，不要只加 pointer-events: none —— 这样表单提交时仍会发值

后端接收时的命名与数组处理

PHP、Node.js、Python Flask 等框架对同名复选框的解析方式不同，前端命名直接影响后端取值逻辑。

• PHP 自动把同名复选框转为数组，所以 name="hobby[]" 是常见写法；但没方括号也能收，只是变成字符串（最后一个值）
• Node.js 的 body-parser 默认不合并同名字段，需手动处理或改用 qs 库解析
• 单选框永远只提交一个值，即使 HTML 里写了多个 checked，浏览器也只发第一个被标记的
• 如果某组复选框完全没勾，后端收到的是空或 undefined，不是空数组 —— 别假设一定有数组结构

实际开发中，name 的拼写、是否带方括号、是否所有选项都覆盖业务场景，这些细节比样式更早暴露问题。

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