当前位置：首页 > article >正文

HTML5 评分星级组件

article 2025/1/5 6:16:34

HTML5 的评分星级（Rating Stars）组件可以让用户通过点击星星来对产品、服务或内容进行评分。以下是关于如何实现评分星级组件的详细说明。

HTML5 评分星级组件

1. 基本结构

使用 <input> 元素配合 <label> 元素可以创建一个简单的评分星级组件。下面是基本的实现代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评分星级组件</title>
    <style>
        .rating {
            direction: rtl; /* 使星星从右到左排列 */
            display: inline-block;
        }
        .rating input {
            display: none; /* 隐藏原始输入框 */
        }
        .rating label {
            font-size: 30px; /* 设置星星大小 */
            color: lightgray; /* 未选中的星星颜色 */
            cursor: pointer;
        }
        .rating input:checked ~ label {
            color: gold; /* 选中的星星颜色 */
        }
        .rating label:hover,
        .rating label:hover ~ label {
            color: gold; /* 悬停时星星颜色 */
        }
    </style>
</head>
<body>
    <h1>请给我们评分</h1>
    <form>
        <div class="rating">
            <input type="radio" id="star5" name="rating" value="5">
            <label for="star5">★</label>
            <input type="radio" id="star4" name="rating" value="4">
            <label for="star4">★</label>
            <input type="radio" id="star3" name="rating" value="3">
            <label for="star3">★</label>
            <input type="radio" id="star2" name="rating" value="2">
            <label for="star2">★</label>
            <input type="radio" id="star1" name="rating" value="1">
            <label for="star1">★</label>
        </div>
        <button type="submit">提交评分</button>
    </form>
</body>
</html>

2. 代码解释

HTML 结构:
- 使用五个 <input type="radio"> 元素表示五颗星，每颗星对应一个评分。
- 每个 <input> 元素都有一个对应的 <label>，点击星星会选择相应的评分。
CSS 样式:
- direction: rtl; 使星星从右到左排列，符合评分习惯。
- 隐藏原始的输入框，只通过标签显示星星。
- 选中的星星和悬停时的星星颜色通过 CSS 控制。