Bootstrap 5 可用 form-check 实现语义化、可访问的评分单选题，需用 radio 输入框、fieldset/legend 结构、合理 value 值及无障碍属性。
用 Bootstrap 5 的 form-check 实现评分单选题
Bootstrap 本身不提供“评分组件”，但用原生 form-check + 合理结构就能做出语义清晰、可访问、响应式的评分表单。关键不是套样式，而是让每个选项有明确的 name 和唯一 value，并用 aria-label 或视觉标签辅助理解。
常见错误是把评分按钮做成纯 div 或用 button 模拟，导致无法提交、屏幕阅读器不可读、按回车不触发。必须用 input[type="radio"] 或 input[type="number"] 等语义化控件。
实操建议：
- 每道题用一个
fieldset包裹，配legend作题干（提升可访问性） - 每个选项用
form-check，input的value设为数字（如"1"、"5"），别用中文“很差”“很好”——后端解析和统计才方便 - 用
form-check-inline实现横向排列，但小屏下建议用默认堆叠（加flex-wrap或媒体查询控制） - 如果要支持“不评分”，单独加一个
value=""的选项，并设required属性时注意排除它（改用 JS 校验逻辑）
用 range 输入框做滑动评分条（带实时数值反馈）
适合需要精细打分（如 1–100 分）或想降低认知负担的场景。Bootstrap 5 对 input[type="range"] 仅提供基础样式，需手动加反馈层。
容易踩的坑：滑块拖动后数值不更新、移动端点击无响应、无障碍支持弱（缺少 aria-valuetext）。
实操建议：
- 用
input[type="range"]+output元素联动，通过oninput更新output.value，比监听change更及时 - 设置
min、max、step（如step="1"或step="0.5"），避免后端收到非法值 - 给
output加class="form-text"控制样式，放在滑块下方或右侧 - 务必加
aria-label（如aria-label="服务满意度评分"），否则屏幕阅读器只读“滑块”
<div class="form-group"> <label for="satisfaction">您对本次服务的满意度？</label> <input type="range" id="satisfaction" name="satisfaction" min="1" max="5" step="1" aria-label="服务满意度评分"> <output for="satisfaction" class="form-text">3</output> </div>
用 btn-group 做紧凑型星级评分（5星制）
用户习惯强、点击区域大，适合移动端。但 Bootstrap 的 btn-group 默认不处理单选逻辑，需 JS 补齐。
性能影响小，但要注意焦点管理：键盘 Tab 应能遍历所有星，空格/回车应选中当前星及左侧所有星（模拟“点亮”效果）。
实操建议：
- 用
btn-group包裹 5 个button，每个button的data-value设为对应分值（"1"–"5"） - 禁用原生
name/value，改用隐藏input[type="hidden"]存储最终选中值，确保表单可提交 - 点击某颗星时，用 JS 设置该星及之前所有星为
active，并更新隐藏域的value - 添加
aria-pressed属性，配合role="button"提升可访问性
提交前校验评分是否完整（JS + Bootstrap 验证样式）
Bootstrap 的 :valid/:invalid 伪类对 radio 组默认无效——因为浏览器认为“只要有一个 radio 被选中，整组就 valid”，但问卷常要求“每题必答”。得靠 JS 主动触发。
容易忽略的是：校验失败后，焦点没落到第一道未答题目，用户需手动滚动查找；或错误提示文字没绑定到对应 form-control，导致 screen reader 不读。
实操建议：
- 提交时遍历所有
fieldset，检查其内是否有:checked的input[type="radio"]或非空input[type="number"] - 对未答题目，添加
is-invalid类，并在form-text或invalid-feedback中插入提示（如请为本题打分） - 用
scrollIntoView({ behavior: 'smooth', block: 'center' })自动滚动到首个错误项 - 隐藏域（如星级评分的
input[type="hidden"]）也要参与校验，不能只看 visible 元素
复杂点在于混合题型：一道题用滑块、一道用单选、一道用星级，校验逻辑得统一抽象成“获取题干 + 获取当前值 + 判空”。别硬编码 DOM 查找路径，用 data-question-id 会更稳。
