用 input[type="range"] 实现五级量表需设 min="1"、max="5"、step="1"，并配合 CSS/JS 添加刻度与实时数值显示；radio 更可靠，语义清晰、无障碍友好、无需 JS 即可提交。
怎么用 input type="range" 实现五级量表（1–5）
直接用 input type="range" 最省事，但默认滑块没刻度、没数值反馈，用户根本不知道自己选的是几。必须手动加 min、max、step，再配合 JS 或 CSS 补上视觉标记和实时显示。
-
min="1"、max="5"、step="1"是硬性组合，缺一不可；漏掉step="1"会导致滑块能停在 1.5、2.7 这类非整数位置 - 浏览器原生滑块不渲染刻度，想显示“1 2 3 4 5”得用 CSS 伪元素或额外 DOM 节点，不能只靠 HTML
- 移动端 Safari 对
input[type="range"]的拖动响应有延迟，建议加touch-action: manipulation优化 - 示例结构：
<input type="range" min="1" max="5" step="1" value="3" id="skill-1"><span id="skill-1-value">3</span>
为什么不用五个单选按钮（input type="radio"）
五级量表本质是有序离散值，radio 语义正确、兼容性极好、无需 JS 就能提交，比 range 更可靠——尤其当用户禁用 JS 或用读屏器时。
- 每个选项必须共用
name（如name="html-skill"），否则无法互斥 - value 值建议用数字（
value="3"），别用文字（value="中等"），后端解析和统计更方便 - label 必须显式关联 input（用
for+id或包裹写法），否则屏幕阅读器无法识别选项含义 - 移动端点击热区小，至少保证 label 内边距 ≥ 8px，不然手指点不准
怎么让五级量表支持键盘操作（无障碍关键）
仅靠鼠标/触摸的量表对键盘用户等于不可用。原生 range 支持方向键微调，但 radio 组需确保 tab 键能顺序进入、空格键可选中。
-
tabindex="0"不要乱加——radio 组天然可聚焦，加了反而破坏逻辑流 - 若用 range，必须监听
input事件（不是change），才能实时更新旁白文本（aria-valuetext） - 为每个 radio 添加
aria-label（如aria-label="HTML 技能：熟练，5 分"），比单纯写“5”更清晰 - 避免用纯图标（如 ★★★★☆）代替文字，没有 alt 或 aria 的图标对辅助技术不可见
提交时后端怎么安全接收五级量表值
前端无论用 range 还是 radio，后端都必须校验取值范围，不能信任任何客户端输入。
立即学习“前端免费学习笔记（深入）”；
- 接收字段值后，强制转为整数并检查是否在 1–5 区间，超出就拒绝或设为默认值（如 3）
- 别用字符串比较（如
if (val === "3")），JS 隐式转换可能把"3\n"或" 3 "当作合法值 - 如果问卷含多个技能项（如 HTML、CSS、JS），字段名别用数组式（
skills[]），改用带前缀的唯一 key（skill-html、skill-css），避免解析歧义 - HTTP 请求里字段缺失 ≠ 值为 0，空值可能是用户跳过，后端需区分“未填”和“填了 0”（而五级量表本就不该有 0）
最麻烦的不是结构，而是让每个选项在键盘、屏幕阅读器、触控、缩放四种场景下都表现一致。哪怕只漏掉一个 aria-labelledby 或少写一个 for，对某些用户就是完全不可用。
