如何用 HTML 函数实现星级评分系统？表单星标控件的实战技巧

星级评分控件的实现要点

结构与标记

在 星级评分控件 的实现中，HTML 结构决定了后续样式与行为，最关键的是把评分单位设计为一组可聚焦的元素，并且配合一个隐藏字段用于表单提交。语义化标签有助于屏幕阅读器理解控件的目的，因此应使用 role、aria- 标签来描述当前选中状态。可访问性与直观的视觉呈现是并行的设计要点。

为了实现可交互的星星效果，通常会采用一组带有 data-value 的星形元素，并通过 CSS 控制其外观；为了兼容表单提交，需要有一个隐藏输入来携带最终的评分值。可点击的星星+隐藏字段的组合是最常见的实现方式。

<div class="rating" id="rating1" role="radiogroup" aria-label="评分" data-max="5" tabindex="0">
  <button class="star" type="button" data-value="1" aria-checked="false" title="1 星">☆</button>
  <button class="star" type="button" data-value="2" aria-checked="false" title="2 星">☆</button>
  <button class="star" type="button" data-value="3" aria-checked="false" title="3 星">☆</button>
  <button class="star" type="button" data-value="4" aria-checked="false" title="4 星">☆</button>
  <button class="star" type="button" data-value="5" aria-checked="false" title="5 星">☆</button>
</div>
<input type="hidden" name="rating" value="0" />

无障碍与键盘交互

为确保 键盘导航 用户也能使用星级控件，需要实现焦点管理、回车/空格键确认，以及左右方向键调整的行为。通过为每个星星设置 role="radio"、aria-checked 状态和清晰的标题文本，可以让辅助技术读出当前选中值。可访问性优先的实现，能提升所有用户的体验。

同时要保证视觉高亮与实际值保持一致，hover 与 focus 时的高亮应通过 JavaScript 动态更新星星的文本或样式来实现，并将最终值写入隐藏输入字段，以便表单提交时能够携带正确的评分。

const rating = document.querySelector('#rating1');
const stars = rating.querySelectorAll('.star');
const input = document.querySelector('input[name="rating"]');

// 鼠标进入时高亮
stars.forEach((star, idx) => {
  star.addEventListener('mouseover', () => highlight(idx + 1));
  star.addEventListener('mouseleave', () => highlight(0));
  star.addEventListener('click', () =>{ setRating(idx + 1); });
});

// 键盘支持
rating.addEventListener('keydown', (e) => {
  let current = parseInt(input.value, 10) || 0;
  if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
    e.preventDefault();
    setRating(Math.min(current + 1, 5));
  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
    e.preventDefault();
    setRating(Math.max(current - 1, 0));
  } else if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    // 回车/空格已选择当前值
    setRating(current || 1);
  }
});

function highlight(n) {
  stars.forEach((s, i) => {
    s.textContent = i < n ? '★' : '☆';
  });
}
function setRating(n) {
  highlight(n);
  input.value = n;
  stars.forEach((s, i) => {
    s.setAttribute('aria-checked', i < n ? 'true' : 'false');
  });
}

表单星标控件的实战技巧

提交与值传递

在表单提交场景中，最重要的实践是把最终的评分值通过一个隐藏字段传递给服务器。隐藏字段与可视星标控件之间需要保持同步，确保用户在前端的交互最终映射到提交的值。

为了实现该同步，通常会在星标控件的点击或确认时，调用一个函数来更新隐藏输入的 value，并在提交前进行必要的校验。表单兼容性与后端对接的过程应保持简单、稳定。

<form id="commentForm" action="/submit" method="post">
  <div class="rating" id="rating2" role="radiogroup" aria-label="评分" data-max="5" tabindex="0">
    <button class="star" type="button" data-value="1" title="1 星">☆</button>
    <button class="star" type="button" data-value="2" title="2 星">☆</button>
    <button class="star" type="button" data-value="3" title="3 星">☆</button>
    <button class="star" type="button" data-value="4" title="4 星">☆</button>
    <button class="star" type="button" data-value="5" title="5 星">☆</button>
  </div>
  <input type="hidden" name="rating" id="ratingInput2" value="0" />
  <button type="submit">提交评价</button>
</form>

键盘与辅助设备的交互

如果需要更完善的可访问性，建议为 Rating 控件提供完整的键盘支持与屏幕阅读器提示。通过在容器和星星元素上设定正确的 ARIA 属性，以及在焦点时显示明确的文字描述，可以使辅助设备用户获得一致的反馈。可访问性加成会提升转化率与用户满意度。

实现要点包括：为每个星星设置 roles、会话中的当前值通过隐藏字段暴露给表单、以及将焦点与响应事件绑定到星星元素上，以实现直观的交互。

function initRatingUnit(containerId) {
  const container = document.getElementById(containerId);
  const stars = container.querySelectorAll('.star');
  const hidden = container.parentElement.querySelector('input[type="hidden"]');
  stars.forEach((s, i) => {
    s.addEventListener('click', () => { hidden.value = i + 1; highlight(i + 1); });
  });
  function highlight(n) { stars.forEach((st, idx) => st.textContent = idx < n ? '★' : '☆'); }
}
initRatingUnit('rating2');

如何用 HTML 函数实现星级评分系统？

函数化实现的思路

在现代前端开发中，如何用 HTML 函数实现星级评分系统？往往意味着把星级控件抽象成一个可重用的逻辑单元。通过一个或多个 JavaScript 函数 来渲染星星、处理悬停/点击，以及向隐藏字段写入最终评分值，可以实现真正的复用与可维护性。

关键在于把展示逻辑与数据绑定分离：一份模板用于渲染星星的 DOM，一份事件处理逻辑负责更新状态。这样做的好处是能在不同页面或组件之间高效复用。

function renderRating(container, max = 5, initial = 0) {
  container.innerHTML = '';
  const input = document.createElement('input');
  input.type = 'hidden';
  input.name = 'rating';
  input.value = initial;
  container.appendChild(input);

  const stars = [];
  for (let i = 1; i <= max; i++) {
    const s = document.createElement('span');
    s.className = 'star';
    s.textContent = '☆';
    s.title = i + ' 星';
    s.dataset.value = i;
    s.setAttribute('role', 'radio');
    s.setAttribute('aria-label', i + ' 星');
    s.addEventListener('click', () => {
      input.value = i;
      render(i);
    });
    container.appendChild(s);
    stars.push(s);
  }

  function render(n) {
    for (let j = 0; j < stars.length; j++) {
      stars[j].textContent = j < n ? '★' : '☆';
    }
  }

  if (initial > 0) render(initial);
  return { set: (n) => { input.value = n; render(n); } };
}

示例：一个封装的 renderRating 函数

下面给出一个简单的、可重用的封装示例，便于直接在不同页面中引用并初始化星级控件。此函数会自动为星星绑定点击事件，并且将最终值写入对应的隐藏字段，方便表单提交。可复用性与易维护性是设计目标。

// 初始化示例
const box = document.getElementById('ratingBox');
const ratingCtrl = renderRating(box, 5, 0); // 5 星，初始值 0

// 外部手动设置值
ratingCtrl.set(3); // 显示 3 星，并更新隐藏输入的值