表格不适合做问卷布局，因其破坏语义、损害可访问性、增加响应式适配成本；单选框须用相同name分组（如name="gender"），复选框name建议加[]以便后端解析为数组，label必须正确关联input以保障无障碍支持。
表格本身不是做问卷的合适容器，强行用 <table> 套单选/复选框，容易破坏语义、影响可访问性、增加 CSS 修复成本——直接用语义化表单结构更稳妥。
<h3>为什么别用 table 做问卷布局</h3>
<p>表格用于展示二维数据（如成绩单、价格对比），而问卷是用户输入流程。用 <code><table> 包裹 <code><input type="radio"> 或 <input type="checkbox"> 会带来三个实际问题：
- 屏幕阅读器会把每行当“数据行”朗读，选项变成“第1行，男；第2行，女”，丢失逻辑分组
-
<label></label>很难精准关联到对应<input>，尤其跨<td> 时 <code>for和id易错位 - 响应式断点下，
<table> 强制横向滚动或列坍缩，移动端点选区域变小、误触率升高 <h3>单选框必须用相同 name 属性分组</h3> <p>这是实现“互斥选择”的唯一机制，浏览器不认 class、不看 label 文字，只靠 <code>name值匹配。- 同一题所有选项的
name必须完全一致，比如性别题统一用name="gender" - 不同题目之间
name绝对不能重复，否则选 A 题的“男”会取消 B 题的“已婚” - 不要写
name="radio"或name="choice"这类泛化值，后端接收时无法区分字段 - value 值建议用语义化字符串（如
value="female"），而非数字编号（value="2"），避免前后端映射歧义
复选框 name 后加 [] 是为后端数组解析
PHP、Node.js（Express）、Django 等主流后端框架默认把
name="hobby[]"解析成数组；不加[]则只取最后一个选中项。- HTML 中写
name="hobby[]"，提交后 PHP 的$_POST['hobby']是数组，如['swim', 'read'] - 若写
name="hobby"，即使勾了多个，PHP 只收到最后一个 value（如'read'） - React/Vue 等前端框架通常自己收集状态，
[]不影响，但保持统一写法可减少服务端适配成本 - 注意：HTML 标准里
[]并非必需，它只是约定俗成的后端解析提示，浏览器本身不处理方括号
label 标签比 onclick 更可靠
很多人用
<div onclick="check('male')">男</div>模拟点击，但这绕过了原生表单行为，带来隐患。- 原生
<label></label>点击后自动聚焦 input、触发change事件、支持空格键切换，无障碍支持完整 - 必须配对
id和for：<input id="male" name="gender" value="male">+<label for="male">男</label> - 嵌套写法更简洁：
<label><input type="radio" name="gender" value="male">男</label>，无需 id - 避免在 label 里放 div、button 等交互元素，会导致事件冒泡冲突
真正麻烦的不是怎么画格子，而是让每个
name对得上后端字段、每个label能被键盘和读屏软件准确识别——这些细节漏掉一个，问卷就可能收不到有效数据。 - 同一题所有选项的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
