html 仅作布局容器，表单功能须由包裹并嵌入等控件；每行一题、合理用、显式关联与控件、必填项加required、复杂逻辑靠js实现。
表格只是容器，别当表单用
HTML <table> 本身不处理用户输入，也不能提交数据。你用它排版问卷结构没问题，但所有可交互元素（如 <code><input>、<select></select>）必须嵌在表格单元格里，且整个问卷仍需包裹在 <form></form> 中才能真正收集数据。常见错误是只写 <table>，结果点击“提交”毫无反应。<ul>
<li>必须用 <code><form action="..." method="post"></form> 包住整个表格
<table> 只负责对齐问题、选项和说明文字，比如让单选框和文字左对齐、让多行文本框宽度一致<li>每个 <code><input type="radio"> 的 name 属性要相同，否则无法互斥选择用 <tr> 和 <code><td> 控制问卷节奏<p>一行一个题目最稳妥。把问题放在第一列 <code><td>，控件（如 <code><input> 或 <select></select>）放在第二列，必要时第三列放说明或示例。避免跨行（rowspan）或跨列（colspan），否则响应式布局容易错位，手机上看会挤成一团。- 标题行用
<th>，但仅限真正需要表头语义的地方（如矩阵题的维度标签）<li>单选/多选题每项单独一行 <code><tr>，方便加 <code>required 或 JS 校验 - 长文本题（如“请描述您的使用体验”）用
<textarea></textarea>，并设 rows 和 cols，不要依赖 CSS 宽高——否则在旧版 Safari 上可能失效
<label></label> 必须显式关联控件，否则点文字不触发
很多人直接写 <input type="checkbox"> 记住我，结果只能点小方框，点文字没反应。正确做法是用 for 属性绑定 id，或者把 <input> 套进 <label></label> 里。表格里推荐前者，结构更清晰。
- 给每个
<input> 设唯一 id，比如 id="q3_age"
-
<label for="q3_age">您的年龄？</label> 放在 <td> 里，和对应控件在同一行或相邻行<li>别用 <code><label></label> 包裹整行 <tr>——浏览器不识别这种嵌套，焦点和可访问性都会出问题<h3>提交前记得加 <code>required 和基础校验
<th>，但仅限真正需要表头语义的地方（如矩阵题的维度标签）<li>单选/多选题每项单独一行 <code><tr>，方便加 <code>required 或 JS 校验<textarea></textarea>，并设 rows 和 cols，不要依赖 CSS 宽高——否则在旧版 Safari 上可能失效
<label></label> 必须显式关联控件，否则点文字不触发
很多人直接写 <input type="checkbox"> 记住我，结果只能点小方框，点文字没反应。正确做法是用 for 属性绑定 id，或者把 <input> 套进 <label></label> 里。表格里推荐前者，结构更清晰。
- 给每个
<input>设唯一id，比如id="q3_age" -
<label for="q3_age">您的年龄？</label>放在<td> 里，和对应控件在同一行或相邻行<li>别用 <code><label></label>包裹整行<tr>——浏览器不识别这种嵌套，焦点和可访问性都会出问题<h3>提交前记得加 <code>required和基础校验
纯前端校验不能替代后端，但能立刻提醒用户漏填。表格里的必填项必须加 required 属性，且优先加在 <input> 或 <select></select> 上，而不是 <td> 或 <code><tr> ——后者无效。<ul>
<li>单选题：任一 <code><input type="radio"> 加 required 即可，浏览器自动检查该组是否有选中
<select required><option value="">请选择</option>...</select>，空值 value="" 是关键type="email" 或 type="number"，但别依赖它防恶意输入——正则校验或后端验证仍是必需的表格本身不提供语义化表单能力，所以复杂逻辑（如跳题、条件显示）得靠 JavaScript 配合 data-* 属性控制行显隐，这部分容易被忽略，但实际项目里几乎必然要加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
