直接在<td>中放<input>会引发三类问题：字段名缺失导致提交失败、回车跳转失效、移动端点击区域过小；合并单元格时label与input对应断裂，影响可访问性；需用<tbody>划分题组、语义化name命名、CSS统一输入框样式，并配合JS做跨字段校验。
表格单元格里直接放 <input> 会出什么问题？
直接在 <td> 里写 <input type="text"> 看似能用，但实际会遇到三类典型问题：表单提交时字段名缺失（没 name）、键盘回车无法跳转到下一个输入框（缺少 tabindex 或结构支持）、移动端点击区域太小（<input> 默认尺寸在表格中挤压变形）。尤其当表格有合并单元格（rowspan/colspan）时，label 和 input 的对应关系容易断裂，导致屏幕阅读器无法识别。
用 <tbody> + name 属性批量控制字段命名
把每行当作一个逻辑题项，用 <tbody> 区分不同题组，再给每个 <input> 设置语义化 name。比如“满意度评分”题，可统一用 name="q1_rating"；“多选原因”则用 name="q2_reasons" 配合 type="checkbox"。这样后端接收时能自然聚合成数组或映射结构。
-
name值避免纯数字开头（如name="1_option"），部分旧版 PHP 会丢弃 - 同一题的多个选项（如多选）必须共用相同
name，靠value区分内容 - 如果某列是说明文字（非输入），该
<td>内不要放<input>，否则会提交空值
让表格输入框对齐整齐的关键 CSS
默认 <input> 在 <td> 中上下留白不一致，左右撑不满。不用 JS 计算，仅靠 CSS 就能解决：
td input {
width: 100%;
box-sizing: border-box;
padding: 6px 8px;
font-size: 14px;
border: 1px solid #ccc;
}
td input:focus {
outline: none;
border-color: #007bff;
}
注意两点：必须加 box-sizing: border-box，否则 width: 100% 会超出单元格；padding 值不宜过大，否则窄列会出现横向滚动条。
立即学习“前端免费学习笔记（深入）”；
提交前校验空值：别只靠 required 属性
required 只在单个 <input> 上生效，而问卷常要求“至少选一项”或“文本框与下拉框互斥”。这时得用 JS 扫描整行或整列：
- 遍历
document.querySelectorAll('tbody tr')，对每行检查是否有任意input或select填写了值 - 对带
name="q3_contact"的邮箱输入框，用input[type="email"]的原生验证，比正则更可靠 - 禁用提交按钮时，记得同时设
disabled和视觉灰度（opacity: 0.6），否则用户可能误点
表格结构越复杂（比如嵌套 <table> 或动态增删行），校验逻辑越容易漏掉新插入的 <input> —— 这点调试时最容易忽略。
