+91 99674 50288

Creating five start rating and getting value of input radio

Star rating system is grading method in that method we give a rating to product. According to that rating, users can understand what is the exact quality of the product. Star rating is started in 1912 for rating the hotels, but nowdays everywhere star rating is used.


5 star is the Denotes the best rating. Means product is awesome and amazing user love the product

4 star Denotes it is the best rating with a good quality product. User Liked the Product

3 star Denotes it is the average rating product. It means the user didn’t like a product that much

2 star Denotes It is the below average rating product . The user didn’t like the product

1 star Denotes poor rating. Means it is the worst product.

Now let See the How to create star rating system using HTML, CSS, JS

Here we are taking 5 input elements with input type radio. And using font awesome icons for creating star icons.

</p><p><p><html></p><p><body></p><p> <form></p><p><div id="test"></p><p><div class="star_wid"></p><p> <input type="radio" name="rate" id="rate-5" value="5" ></p><p><label for="rate-5" class="fa fa-star"></label></p><p><input type="radio" name="rate" id="rate-4" value="4"></p><p><label for="rate-4" class="fa fa-star"></label></p><p><input type="radio" name="rate" id="rate-3" value="3"></p><p><label for="rate-3" class="fa fa-star"></label></p><p><input type="radio" name="rate" id="rate-2" value="2"></p><p><label for="rate-2" class="fa fa-star"></label></p><p> <input type="radio" name="rate" id="rate-1" value="1"></p><p><label for="rate-1" class="fa fa-star"></label></p><p></div></p><p></div></p><p></form></p><p></body></p><p></html><br> </p><p>

Now let See the CSS Coding for that

First you need to include css file for font awesome icons in your head section and also add “rating.css” file for styling


 .star_wid input[type="radio"]{

 display: none;

 float: right;



 float: left;


.star_wid label{

 transition: all 0.2s ease;

  color: #444;

  font-size: 40px;

  float: right;


.star_wid input:not(:checked)~label:hover,

.star_wid input:not(:checked)~label:hover ~ label


 color: #fd4;


.star_wid input:checked ~ label{

 color: #fd4;


Now the most important thing is to add a Script file for getting the value of the radio button. but the most common problem that occurs while getting the value of input type radio is that every time getting the value of radio button but with the previous one while clicking on the label of radio input. For avoiding this problem I suggested the following script this script will definitely help you.

Add “jquery.min.js” javascript file at bottom of your body. And script too