纯html实现可点击答题卡需用包裹，标序号，与通过for/id严格关联，单选同name、多选慎用required，回显依赖服务端渲染checked属性或js+localstorage同步。
怎么用纯 HTML 实现可点击的单选/多选答题卡
不能只靠 <input type="radio"> 或 <input type="checkbox"> 就完事——没 label 包裹，点击文字不触发选项；没 name 一致，单选就失效；没加 for 和 id 关联，屏幕阅读器和移动端体验直接打折。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个题干用
<fieldset></fieldset>包裹，<legend></legend>写题号（如“第1题”），语义清晰且利于自动化测试 - 选项统一用
<input type="radio">+<label></label>组合，label的for属性必须严格匹配input的id - 单选题所有
input共享同一个name（如name="q1"），多选题则用不同name或统一但后端按数组接收 - 避免写
<input><label>A</label>这种松散结构——没for/id关联时，只有点击小圆圈才生效，用户大概率点不到
<fieldset> <legend>第3题</legend> <input type="radio" id="q3-a" name="q3" value="a"> <label for="q3-a">A. 正确答案</label> <input type="radio" id="q3-b" name="q3" value="b"> <label for="q3-b">B. 干扰项</label> </fieldset>
提交前如何用原生 HTML 验证是否漏答
浏览器原生 required 属性只对单个 input 生效，而单选题是多个 input 共享一个逻辑“字段”，直接加 required 到每个 radio 上会导致“必须全选”，完全反逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给每组单选题的任意一个
input加required即可（浏览器会自动识别同name的其他选项） - 但注意：如果该组初始状态没有默认选中项，且用户未做任何操作，提交时会报错并聚焦到第一个
required的input—— 这是预期行为 - 多选题不能依赖
required控制“至少选一项”，必须用 JavaScript 拦截submit事件手动检查document.querySelectorAll('input[name="q5"]:checked').length - 别信
pattern或minlength对radio有效——它们根本不适用
为什么不用 div 模拟选项而坚持用原生表单控件
用 <div class="option"> + JS 切类名，看起来更自由，但代价是：键盘无法 Tab 导航、空格/回车不能选中、iOS Safari 点击延迟、无障碍 API 无法读出选项状态、表单序列化（<code>formdata）直接丢弃这些“假输入”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 样式完全可控：用
input[type="radio"]+label+ CSS 的::before/::after替换默认圆圈，不影响语义和功能 - 如果真要高度定制外观（比如带图标、渐变边框），优先改
label样式，把input设为position: absolute; opacity: 0，而不是删掉它 - 避免给
label加onclick或监听click去模拟选中——这绕过了浏览器原生的 focus/checked 同步机制，容易导致状态错乱
提交后怎么让答案不随页面刷新丢失（无 JS 方案）
纯 HTML 没有持久化能力，<form method="get"></form> 提交后答案会变成 URL 参数，刷新即清空；post 更彻底，连参数都看不到。所谓“保留答案”必须靠服务端返回时重新渲染已选值，或前端用 localStorage + JS 补救。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 服务端渲染场景：输出 HTML 时，根据用户历史作答，给对应
input加checked属性（如<input ... checked>），这是唯一可靠的纯 HTML 回显方式 - 不要依赖
value相同就自动勾选——浏览器只认checked属性是否存在，不比对value - 如果走纯静态页+JS 方案，必须在页面加载后遍历所有
input[name]，从localStorage读取并设input.checked = true，且要在 DOM ready 后立即执行 - 注意：localStorage 存的是字符串，
JSON.parse后匹配input.value时记得类型一致（比如后端存 "true"/"false" 字符串，别当成布尔值比）
最麻烦的其实是“部分题目已答、部分未答”时的状态同步——这时候 checked 属性和 localStorage 里的键必须严格一一对应，漏一个字段，回显就断一题。
