直接在中放会引发三类问题：字段名缺失导致提交失败、回车跳转失效、移动端点击区域过小；合并单元格时label与input对应断裂，影响可访问性；需用划分题组、语义化name命名、css统一输入框样式，并配合js做跨字段校验。
表格单元格里直接放 <input> 会出什么问题？
直接在 <td> 里写 <code><input type="text"> 看似能用，但实际会遇到三类典型问题：表单提交时字段名缺失（没 name）、键盘回车无法跳转到下一个输入框（缺少 tabindex 或结构支持）、移动端点击区域太小（<input> 默认尺寸在表格中挤压变形）。尤其当表格有合并单元格（rowspan/colspan）时，label 和 input 的对应关系容易断裂，导致屏幕阅读器无法识别。
用 <tbody> + <code>name 属性批量控制字段命名
把每行当作一个逻辑题项，用 <tbody> 区分不同题组，再给每个 <code><input> 设置语义化 name。比如“满意度评分”题，可统一用 name="q1_rating"；“多选原因”则用 name="q2_reasons" 配合 type="checkbox"。这样后端接收时能自然聚合成数组或映射结构。
-
name值避免纯数字开头（如name="1_option"），部分旧版 PHP 会丢弃 - 同一题的多个选项（如多选）必须共用相同
name，靠value区分内容 - 如果某列是说明文字（非输入），该
<td> 内不要放 <code><input>，否则会提交空值让表格输入框对齐整齐的关键 CSS
默认
<input>在<td> 中上下留白不一致，左右撑不满。不用 JS 计算，仅靠 CSS 就能解决： <pre class="brush:php;toolbar:false;">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; }</pre> <p>注意两点：必须加 <code>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> 或动态增删行），校验逻辑越容易漏掉新插入的 <code><input>—— 这点调试时最容易忽略。 - 遍历
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
