前端用input写星级评分

可以使用HTML和CSS来实现星级评分，具体实现步骤如下：

1. 首先创建一个包含5个输入框的表单，每个输入框代表一个星级。

<form>
  <input type="radio" name="rating" value="1" id="rating-1">
  <input type="radio" name="rating" value="2" id="rating-2">
  <input type="radio" name="rating" value="3" id="rating-3">
  <input type="radio" name="rating" value="4" id="rating-4">
  <input type="radio" name="rating" value="5" id="rating-5">
</form>

2. 使用CSS来设置星级样式，可以使用伪元素来创建星星图标，也可以使用图片等其他方式来代替。

input[type="radio"] {
  display: none;
}

label {
  display: inline-block;
  cursor: pointer;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

label:before {
  content: "\2605";
  position: absolute;
  opacity: 0;
}

label:hover:before,
label:hover ~ label:before {
  opacity: 1;
}

input[type="radio"]:checked ~ label:before {
  opacity: 1;
}

上述CSS代码中，首先将输入框的显示设为none，然后使用label标签来代替输入框，并设置其样式，使用伪元素来创建星星图标，并设置鼠标悬浮和选中状态下的样式。

3. 最后，使用JavaScript来获取用户选择的星级并提交表单。

const form = document.querySelector('form');
const ratingInputs = document.querySelectorAll('input[name="rating"]');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const selectedRating = [...ratingInputs].find(input => input.checked);
  console.log(selectedRating.value);
});

上述JavaScript代码中，首先获取表单和所有的输入框，然后监听表单的提交事件，在提交事件中获取用户选择的星级并进行相应处理。