直接在中嵌入并添加class="quiz-input"统一样式，设autocomplete="off"防干扰；单选/多选题需按行组织，radio共用name、checkbox加[]后缀；校验需js分类处理，提交推荐独立form或js显式取值。
怎么让表格单元格变成可填空的答题区
直接在 <td> 里放 <code><input> 就行，但别用 type="text" 默认样式——太丑、没提示、焦点不明显。推荐加 class="quiz-input" 统一控制宽高和边框，同时设 autocomplete="off" 防浏览器自动填充干扰判分。
常见错误：把 <input> 套在 <label></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>——这样每道题的选项会跨行错位。正确做法是：每道题占一行（<code><tr>），题干在第一列，选项用 <code><td> 并列排开，每个 <code>input 的 name 相同（如 name="q2"），value 不同（如 "A"、"B"）。
多选题同理，但用 type="checkbox"，注意 name 后加 []（如 name="q3[]"），否则后端只能收到最后一个勾选值。
- 单选题所有
<input type="radio">必须共用同一name，否则互斥失效 - 避免在
<td> 里混写文字和 <code>input，建议用<label><input>选项文字</label>确保点击文字也能选中 - 如果选项文字较长，用
<div style="white-space: nowrap"> 包裹防止换行破坏表格对齐<h3>提交前怎么校验表格里的答案是否填全</h3> <p>不能只靠 <code>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> 里的 <code>input数据。更可靠的做法是让表格不包裹<form></form>，而是用独立<form></form>包住整个表格，或干脆不用<form></form>标签，改用按钮 + JS 提交。性能影响很小，但逻辑更清晰：JS 里用
document.querySelector('table.quiz-table').querySelectorAll('input')显式取值，比依赖表单序列化更可控，尤其当你需要对答案做预处理（比如转大写、去空格）时。复杂点在于，如果测验页还有其他表单（比如登录框），必须确保 JS 获取 input 时加足够精确的选择器，否则会误读其他区域的输入框。名字带 quiz- 前缀或包在
<section class="quiz-section"></section>里是最简单的隔离方式。 - 对
