表格布局问卷时，应每组单选/复选用独立tr包裹，td内仅放label+input，统一name确保单选逻辑正确，label显式for关联id，并通过padding扩大点击区域。

表格布局问卷时，tr 和 td 怎么安排才不乱？

直接用 table 套问卷，最容易出现错行、对不齐、点击区域小的问题。关键不是“能不能用”，而是“怎么用才不反人类”。

单选/复选这类控件本身没有块级结构，硬塞进 td 里容易被默认 padding 挤歪，尤其在移动端。

• 每组单选/复选单独占一行：tr 包裹整组，td 内只放 label + input，不要把多个 input 塞进同一个 td
• 避免嵌套表格：比如在 td 里再套一层 table 对齐选项——这会让语义混乱，JS 获取值也容易出错
• label 必须显式关联：用 for 指向 id，而不是靠包裹写法；否则点击文字不触发，用户得精准点框
• 留白比对齐更重要：给 td 加 padding: 8px 12px，比死磕像素对齐更可靠

name 属性写错，会导致单选框变成“可多选”

这是线上问卷最常被忽略的 bug：页面看着是单选，提交后却收到多个值，或者根本没传值。

根源在于 name 不统一或缺失——浏览器根本不认它是“一组”。

立即学习“前端免费学习笔记（深入）”；

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 同一组单选必须共用完全相同的 name，比如性别用 name="gender"，婚姻状况用 name="marital_status"，不能混用
• 复选框可以共用 name（如 name="hobby"），但提交后后端会收到数组，不是单个字符串
• 如果某组只有一项单选，也得加 name，否则它无法参与表单序列化
• 别用中文或空格作 name 值，如 name="兴趣爱好" —— 后端解析可能失败

checked 默认选中，为什么有时不生效？

写了 checked 却没默认勾上，通常不是语法错，而是被其他逻辑覆盖了。

常见干扰源：JavaScript 初始化、CSS 隐藏了原生控件、或同名 input 被重复渲染。

• checked 是布尔属性，写成 checked="checked" 或简写 checked 效果一样，但不能写 checked="false"
• 如果用 JS 动态生成表单，确保 DOM 插入完成后再设 checked，否则节点还没挂载
• 某些 CSS 重置库（如 normalize.css）会清掉 input[type=radio] 的默认样式，导致视觉上“看不出已选”，实际值仍正确
• 服务端渲染时，若模板引擎把 checked 渲染成字符串（如 checked="{{bool}}"），当 bool 为 false 时可能残留空属性，浏览器误判为 true

移动端点击区域太小，label 怎么扩宽才合理？

手指点不准，本质是原生 input 的点击热区只有 12×12px 左右，远低于 WCAG 推荐的 44×44px 最小触控尺寸。

靠放大 input 自身会破坏布局，真正有效的是控制 label 行为。

• 给 label 加 display: block 或 inline-block，再设 padding，热区就跟着扩大
• 避免用 label 包裹整个 tr 或 table —— 会导致整行可点，误操作率飙升
• 如果用图标替代原生控件（如自定义 radio 圆圈），必须用 aria-checked 和 role="radio" 同步状态，否则读屏器无法识别
• 测试时真机点一点：别只看桌面 Chrome DevTools 的模拟触摸，iOS Safari 和 Android Chrome 对 label 绑定的容错性不同

表格布局本身不难，难的是让每个 input 在各种设备上都“可发现、可点击、可提交”。很多问题不是 HTML 写错了，而是没意识到浏览器对 name、label、checked 的实际解析规则比文档写的更严格。