星評価 + コメント入力
5段階の星評価と、自由記述のコメント欄を組み合わせたレビュー入力フォームです。星はインライン SVG で並べ、クリックすると JavaScript がその位置までの星に on クラスを付け、選んだ数だけ黄色く点灯させます。コメントは textarea で、フォーカス時に枠線色が変わるよう :focus で調整。
解説
5段階の星評価と、自由記述のコメント欄を組み合わせたレビュー入力フォームです。星はインライン SVG で並べ、クリックすると JavaScript がその位置までの星に on クラスを付け、選んだ数だけ黄色く点灯させます。コメントは textarea で、フォーカス時に枠線色が変わるよう :focus で調整。星の評価値とテキストの両方を1画面で受け取れる、レビュー収集の定番構成です。
使う場面
- 商品やサービスのレビュー投稿フォーム
- セミナーやサポート対応の満足度アンケート
- アプリ内の評価ダイアログ
星の数を増減したいときは星の span を追加・削除し、判定の上限値を合わせます。点灯色は on クラスの color で変更可能です。注意点として、現状はホバーで先読み点灯しないため、マウス移動中のプレビューが欲しければ mouseover 時にも同じクラス付けを足すと操作感が上がります。アクセシビリティ面では、星をキーボードで選べるよう role や aria-label を補い、選んだ評価値を読み上げられるようにすると、より多くの人が使えるフォームになります。
よくある質問
星を3段階や10段階に変えられますか
変えられます。星のマークを並べている部分を増やしたり減らしたりし、何個目までかを判定する数値を合わせるだけです。10段階にすればより細かい評価を集められます。
マウスを乗せたときに星が光らないのはなぜですか
今の作りはクリックした時だけ点灯する仕組みだからです。マウスを乗せている間も先読みで光らせたい場合は、ホバー時にも同じ点灯処理を呼ぶ短いコードを足すと、選びやすさが向上します。