用+css实现五星评分最轻量、无障碍好、无需js即可提交；需用语义化radio组确保键盘导航与屏幕阅读器支持，视觉隐藏radio但保留可访问性，label伪元素绘星并依:checked变色，表单用required校验、prg防重提，移动端扩大label点击区。
直接用 <input type="radio"> + CSS 实现五星评分，是最轻量、无障碍支持好、无需 JS 也能提交的方案。别一上来就写一堆 addEventListener 或引入第三方库——90% 的客服评价场景根本不需要动态交互逻辑。
为什么用 radio 而不是 button 或 span？
因为原生表单控件自带语义和可访问性：radio 组天然支持键盘导航（Tab/方向键）、屏幕朗读器识别“5个选项，当前选中第4个”，且提交时自动带值。而手写 div + JS 模拟，容易漏掉 aria-checked、role="radiogroup" 等关键属性，导致残障用户无法操作。
常见错误现象：
- 用户用键盘无法聚焦星星
- 屏幕阅读器只读“星号”，不读“4星，已选中”
- 表单提交后后端收不到
rating字段
正确做法：
- 每个
input必须有唯一id，对应label的for属性 - 用
name统一组名（如name="rating"），确保单选互斥 - 值设为数字（
value="1"到value="5"），后端直接接收整数
radio 星星样式怎么隐藏又保留功能？
不能用 display: none 或 visibility: hidden —— 这会让控件彻底不可见、不可聚焦、不可提交。必须用视觉隐藏但保留可访问性的 CSS 技巧：
input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
然后用 label 伪元素或背景图绘制星星图标。示例中每个 label 的 ::before 显示 ★，并根据相邻 input:checked 状态变色：
input[value="3"]:checked ~ label::before { content: "★★★☆☆"; }
注意：顺序必须是 input 在前、label 在后，才能用 ~ 选择器；若 DOM 顺序反了，就得用 JS 或改用 Flex 布局 + data- 属性控制状态。
提交后怎么防止重复点击或空提交？
客服评价页常被嵌在弹窗或邮件里，用户可能误点多次。关键不是前端防抖，而是靠表单机制本身：
- 给
<form></form>加method="POST"和action，后端收到即处理并重定向（PRG 模式），避免刷新重复提交 - 禁用提交按钮需配合
form.submit()触发，而非仅靠click事件：否则用户按回车提交时按钮未禁用 - 空提交防护：给所有
radio加required属性，浏览器原生校验（不依赖 JS）
别在 JS 里写 if (!rating) return —— 用户关了 JS 就失效；required 是 HTML 标准行为，兼容所有现代浏览器。
移动端点击区域太小怎么办？
默认 label 包裹的星星图标只有 16×16px，手指点不准。解决方法很简单：
- 扩大
label的padding或min-height，比如设为44px（iOS 最小触控区） - 确保
label内部图标垂直居中，避免点击偏移 - 不要给
input加transform: scale()—— 放大会让实际点击热区仍很小
真正容易被忽略的是：如果评价组件被插入 iframe（比如邮件里的反馈链接），iOS Safari 会禁用部分表单交互。此时必须确保 iframe 允许表单提交（sandbox="allow-forms"），否则用户点了没反应，还以为是页面坏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
