html如何做一个选择题的页面

纯 html 单选题需确保同题所有 radio 共用相同 name、每个有明确 value；label 必须正确绑定 input；隐藏原生控件应使用 position: absolute + opacity: 0 而非 display: none 以保可访问性。

怎么用纯 HTML 实现单选题结构

纯 HTML 本身就能做选择题，关键不是“能不能”，而是别漏掉 name 和 value 这两个属性。没有 name，表单提交时选项根本不会被带上；没有 value，后端或 JS 拿不到你选的是哪个——它默认是 on，毫无区分度。

常见错误现象：console.log(document.querySelector('input[name="q1"]:checked') 返回 null，八成是漏了 name，或者多个单选框 name 不一致。

• 所有同题选项必须共用同一个 name 值（比如 name="q1"）
• 每个 input[type="radio"] 必须有明确的 value（比如 value="A"、value="B"）
• 用 label 包裹 input 或用 for 属性关联，否则点击文字无法选中
• 别加 required 后就以为前端校验万无一失——它只防空提交，不防用户绕过

怎么让选项看起来像“选择题”而不是一堆按钮

浏览器默认样式丑且不统一，但改样式前得先确保语义和功能没坏。CSS 可以隐藏原生 input，用 ::before 或背景图模拟圆点，但前提是：不能把 input 设为 display: none，否则键盘 Tab 和屏幕阅读器会跳过它。

推荐做法是用 position: absolute; opacity: 0; pointer-events: none; 隐藏原生控件，再用 label 的伪元素画 UI。这样既保留可访问性，又可控样式。

立即学习 “ 前端免费学习笔记（深入）”；

• 绝对定位 + 透明度隐藏比 display: none 安全
• label 必须和 input 正确绑定（for="id" 或嵌套），否则自定义样式点不生效
• 移动端要注意 touch-action 和点击热区大小，至少留 44×44px

提交时怎么拿到用户选的答案

最轻量的做法是直接走 HTML 表单提交（method="GET" 或 POST），后端收 q1=A 这样的键值对。如果要用 JS 处理，核心就是查 :checked 状态，但得注意时机——别在页面还没加载完就执行查询。

常见错误现象：document.querySelector('input[name="q1"]:checked').value 报错，因为可能没选，或 DOM 还没 ready。

• 用 document.addEventListener('DOMContentLoaded', ……) 包住 JS 逻辑
• 查 :checked 前先判断是否存在，比如 const el = document.querySelector('input[name="q1"]:checked); if (el) {……}
• 别用 getElementsByName 配合循环——它返回的是 HTMLCollection，不支持 .find()，容易写崩

要不要加 JS 校验或交互动效

可以加，但别让它成为必经路径。比如“下一题”按钮禁用状态，应该靠 JS 监听 change 事件来控制，而不是等用户点完才检查——否则用户可能一直卡在第一题。

性能影响很小，但兼容性要注意：change 事件在 radio 上 IE9+ 支持良好，但旧 Android WebView 有延迟触发问题，所以别依赖它做关键流程锁死。

• 监听 change 比 click 更准确（避免重复触发）
• 禁用按钮时，记得同时给 aria-disabled="true"，不然屏幕阅读器不知道
• 如果题目多、选项多，别一次性渲染全部 DOM，考虑懒加载或分步显示

实际做题页面最难的不是结构，是让“未作答”“已作答”“已提交”三种状态在视觉、语义、JS 数据三者间始终同步——这点容易被忽略，一动就错。