html无原生分数输入框，推荐用type="range"（加step="1"防浮点、list配datalist显刻度）或type="number"（配min/max/step/inputmode），纯css星星评分用radio实现但仅支持整星，避免select因语义错配和解析负担。
HTML 本身没有原生的「分数输入框」或「评分控件」，<input type="range"> 和 <input type="number"> 是最接近的选项，但它们默认不表达「评分语义」，也不自带星星、半星、文字标签等交互反馈。所谓“全网最全”的标题容易误导——关键不在堆砌方案，而在选对场景、避开常见陷阱。
用 <input type="range"> 做基础分数滑块
这是最轻量、无障碍支持最好、移动端兼容稳定的方案，适合 0–5、1–10 等整数区间评分。
常见错误是直接写 <input type="range" min="1" max="5"> 就完事，结果用户拖到 3.7 却提交了非整数，后端校验失败。
- 必须加
step="1"强制只取整数（否则默认 step="any"，允许浮点） - 配合
list属性 +<datalist></datalist>可显示刻度标记，但注意 Safari 不支持<datalist></datalist>用于 range - 用
value设置默认值，别依赖 JS 初始化，否则无 JS 时失效 - 示例：
<input type="range" min="1" max="5" step="1" value="3" id="score">
用 <input type="number"> 做可键入分数
适合需要键盘输入、精确控制（如 4.5 分）、或与表单其他数字字段保持一致的场景。但要注意：它不阻止用户输入超范围值，也不防负数或小数（除非你加约束）。
- 加
min/max限制范围，但浏览器仅做前端校验，不可信 - 加
step="0.5"支持半分（如 3.5），但 Chrome 会允许输入 3.33 —— 必须用 JS 或后端二次校验 - 加
inputmode="decimal"在移动设备唤出数字键盘（iOS/Android 支持良好） - 别用
pattern配合 number 类型 —— 它会被忽略，pattern只对type="text"有效
用纯 HTML/CSS 实现星星评分（无 JS 也能点）
所谓“无 JS 星星评分”，本质是利用 <input type="radio"> + :checked + 隐藏原生控件 + 自定义 <label></label> 样式。它语义清晰、可访问性好、不依赖 JS，但只支持离散选择（如 1–5 星，不能半星）。
容易踩的坑：
- 每个
<input>的name必须相同，否则无法单选 -
<label></label>必须用for关联id，或包裹<input>，否则点击无效 - CSS 中用
input[type="radio"]:checked ~ label向后选兄弟元素时，结构顺序不能错（label 必须在 input 后） - 若要支持半星（如点击 3.5 星），必须拆成 10 个 radio（每星分两半）或改用 JS
为什么不该用 <select></select> 做分数下拉？
看似简单：<select></select> 列出 “1 分”、“2 分”…“5 分”，但实际体验差、占空间、移动端弹出键盘成本高、无法快速扫视。更严重的是，它破坏了表单中「数值型输入」的一致性 —— 后端收到的是字符串 "4 分" 而不是数字 4，还得额外解析。
除非你的评分项极少（比如只有 “满意/一般/不满意” 三档），且明确要求用户思考文字含义，否则避免用 <select></select> 表达数值分数。
真正难的不是怎么画星星或拖滑块，而是决定：这个分数要不要允许小数？用户是在安静填表还是边看视频边随手评？有没有读屏需求？这些判断比代码多得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
