纯前端考试页需用form包裹题目，fieldset分隔，原生radio/checkbox确保可访问性；JS按题型收集答案为对象，提交前禁用按钮、检查漏答、做轻量校验。
怎么用纯 HTML + CSS + JS 搭出可提交的单页考试答题页
纯前端能做的只是「界面交互 + 本地逻辑校验 + 数据组装」，不能替代后端保存成绩或防作弊。如果你需要真实上线考试系统，submit 必须对接 API；如果只是课堂小测、培训自测，本地 JS 就够用。
关键不是“怎么好看”，而是「题干不串行、选项不误选、提交时能拿到所有答案、支持单选/多选/填空混合」。
-
<form>包住整页题，但别依赖原生submit刷新——用event.preventDefault()拦住，自己收集数据 - 每道题用
fieldset隔开，配合legend显示题号，语义清晰且方便 JS 定位 - 单选题统一用相同
name（如name="q1"），多选题加[]（如name="q2[]"），填空用input[type="text"]或textarea - 别用
div模拟单选框——屏幕阅读器和键盘导航会失效；坚持用原生input[type="radio"]/input[type="checkbox"]
如何让 JS 正确读取所有题目的用户答案
常见错误是遍历 input 时漏掉填空题，或把未选的单选题当成 undefined 而不是「未作答」。必须区分「空字符串」和「null/undefined」。
推荐用一个对象存所有答案：{ q1: "A", q2: ["B","C"], q3: "TCP/IP协议栈分几层？" }。获取逻辑要按题型分支处理：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 单选题：用
document.querySelector('input[name="q1"]:checked')，取.value；没选则设为null - 多选题：用
document.querySelectorAll('input[name="q2[]"]:checked')，再Array.from(...).map(i => i.value) - 填空题：直接取
document.getElementById("q3").value.trim()，注意trim()去首尾空格 - 别用
form.elements——它对多选题返回单个元素，容易误判
提交前必须做的三件事：防重复点击、答案完整性检查、轻量级本地验证
用户狂点提交按钮、漏答、填空题只打了个空格……这些都会让数据不可用。JS 层至少做三件事：
- 点击提交后立刻禁用按钮：
button.disabled = true，并改文字为「提交中…」 - 遍历题目对象，检查是否有
null或空字符串（填空题允许空？需按业务定）；有则alert或在题旁标红，不要静默跳过 - 填空题可加简单规则，比如「q5 必须含至少 2 个汉字」：
/[\u4e00-\u9fa5]{2,}/.test(value)，但别过度校验——那是后端的事
为什么不用框架、也不推荐「在线考试模板」直接套用
多数开源「考试系统」模板带完整后端、数据库、用户体系，你只想嵌进企业内网页面里跑个 10 道题，结果要配 Node 环境、建 MySQL 表、调登录接口——反而卡住。
真正快速上手的路径是：写好 HTML 结构 → 加几行 CSS 控制换行和间距 → 用 60 行以内 JS 实现收答案+校验+发给后端 fetch。复杂点在于题干含图片、公式（需 MathML 或 KaTeX）、或者要计时自动交卷——那些得单独加模块，别一开始全堆进去。
