表格不适合做问卷布局，因其破坏语义、损害可访问性、增加响应式适配成本；单选框须用相同name分组（如name="gender"），复选框name建议加[]以便后端解析为数组，label必须正确关联input以保障无障碍支持。
表格本身不是做问卷的合适容器，强行用 <table> 套单选/复选框，容易破坏语义、影响可访问性、增加 CSS 修复成本——直接用语义化表单结构更稳妥。
为什么别用 table 做问卷布局
表格用于展示二维数据（如成绩单、价格对比），而问卷是用户输入流程。用 <table> 包裹 <input type="radio"> 或 <input type="checkbox"> 会带来三个实际问题：
- 屏幕阅读器会把每行当“数据行”朗读，选项变成“第1行，男；第2行，女”，丢失逻辑分组
-
<label>很难精准关联到对应<input>，尤其跨<td>时for和id易错位 - 响应式断点下，
<table>强制横向滚动或列坍缩，移动端点选区域变小、误触率升高
单选框必须用相同 name 属性分组
这是实现“互斥选择”的唯一机制，浏览器不认 class、不看 label 文字，只靠 name 值匹配。
- 同一题所有选项的
name必须完全一致，比如性别题统一用name="gender" - 不同题目之间
name绝对不能重复，否则选 A 题的“男”会取消 B 题的“已婚” - 不要写
name="radio"或name="choice"这类泛化值，后端接收时无法区分字段 - value 值建议用语义化字符串（如
value="female"），而非数字编号（value="2"），避免前后端映射歧义
复选框 name 后加 [] 是为后端数组解析
PHP、Node.js（Express）、Django 等主流后端框架默认把 name="hobby[]" 解析成数组；不加 [] 则只取最后一个选中项。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- HTML 中写
name="hobby[]"，提交后 PHP 的$_POST['hobby']是数组，如['swim', 'read'] - 若写
name="hobby"，即使勾了多个，PHP 只收到最后一个 value（如'read'） - React/Vue 等前端框架通常自己收集状态，
[]不影响，但保持统一写法可减少服务端适配成本 - 注意：HTML 标准里
[]并非必需，它只是约定俗成的后端解析提示，浏览器本身不处理方括号
label 标签比 onclick 更可靠
很多人用 <div onclick="check('male')">男</div> 模拟点击，但这绕过了原生表单行为，带来隐患。
- 原生
<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 能被键盘和读屏软件准确识别——这些细节漏掉一个，问卷就可能收不到有效数据。
