直接在<td>中嵌入<input>并添加class="quiz-input"统一样式，设autocomplete="off"防干扰；单选/多选题需按行组织，radio共用name、checkbox加[]后缀；校验需JS分类处理，提交推荐独立form或JS显式取值。
怎么让表格单元格变成可填空的答题区
直接在 <td> 里放 <input> 就行，但别用 type="text" 默认样式——太丑、没提示、焦点不明显。推荐加 class="quiz-input" 统一控制宽高和边框，同时设 autocomplete="off" 防浏览器自动填充干扰判分。
常见错误：把 <input> 套在 <label> 里又没写 for 属性，导致点击文字无法聚焦；或者忘了设 name，提交时拿不到值。
<td><input type="text" name="q1" class="quiz-input" autocomplete="off"></td>- 每个
input的name必须唯一，方便后续用FormData或form.elements批量取值 - 用 CSS 控制
.quiz-input { width: 80px; padding: 4px; border: 1px solid #ccc; text-align: center; }，避免用户输长答案撑破表格
如何用表格结构组织单选/多选题
单选题别用 <input type="radio"> 直接塞进 <td>——这样每道题的选项会跨行错位。正确做法是：每道题占一行（<tr>），题干在第一列，选项用 <td> 并列排开，每个 input 的 name 相同（如 name="q2"），value 不同（如 "A"、"B"）。
多选题同理，但用 type="checkbox"，注意 name 后加 []（如 name="q3[]"），否则后端只能收到最后一个勾选值。
立即学习“前端免费学习笔记（深入）”；
- 单选题所有
<input type="radio">必须共用同一name，否则互斥失效 - 避免在
<td>里混写文字和input，建议用<label><input>选项文字</label>确保点击文字也能选中 - 如果选项文字较长，用
<div style="white-space: nowrap">包裹防止换行破坏表格对齐
提交前怎么校验表格里的答案是否填全
不能只靠 required 属性——它对 radio 和 checkbox 支持差，且无法区分“空字符串”和“未填写”。得用 JS 遍历所有 input，按类型分别处理：
- 对
type="text"：检查.value.trim() !== "" - 对
type="radio"：用form.querySelectorAll('input[name="q2"]:checked').length === 0判断是否未选 - 对
type="checkbox"：若题目要求“至少选一个”，就检查form.querySelectorAll('input[name="q3[]"]:checked').length === 0
容易踩的坑：用 form.elements 取到的是类数组，得转成数组再 filter；另外，表格里可能有非答题用的 input（比如搜索框），务必加特定 class 或 name 前缀来过滤。
为什么 submit 按钮放在表格外更稳妥
表格内放 <input type="submit"> 容易触发浏览器默认行为：把整个表格当表单提交，而实际你只想要 <table> 里的 input 数据。更可靠的做法是让表格不包裹 <form>，而是用独立 <form> 包住整个表格，或干脆不用 <form> 标签，改用按钮 + JS 提交。
性能影响很小，但逻辑更清晰：JS 里用 document.querySelector('table.quiz-table').querySelectorAll('input') 显式取值，比依赖表单序列化更可控，尤其当你需要对答案做预处理（比如转大写、去空格）时。
复杂点在于，如果测验页还有其他表单（比如登录框），必须确保 JS 获取 input 时加足够精确的选择器，否则会误读其他区域的输入框。名字带 quiz- 前缀或包在 <section class="quiz-section"> 里是最简单的隔离方式。
