Bootstrap star rating input example

In this article, you will learn how to implement a simple bootstrap star rating widget in an HTML form using the jQuery bootstrap star rating plugin and get the rating input using PHP.

Front-end frameworks like Bootstrap have changed the way people build websites. These tools make it a lot easier to create complete websites with minimal effort and time investment. We need only to type some markup to get a fully functional piece of code (a well-cooked HTML, CSS, and JavaScript soup) without worrying about styling, dynamic behaviour, and so on.

Bootstrap is a free, open-source HTML, CSS, and JS framework containing templates for text, forms, buttons, navigation, datetime, and other relevant interface components. Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.

Star rating is often found everywhere. It's a typical rating scale that's being used by popular marketplace sites. A star rating may be a valuable metric that tells others what most people believe about a particular product, an app, or a movie generally. A star rating consists of stars, with the quantity usually at a maximum of 5. You let your users rate an item using stars. One star equals poor, while five equals excellent. By selecting quite one star, all previous stars should be filled.

Dynamic bootstrap star rating

In the given example, we have included all the necessary CSS and JS libraries and then specified the input field for rating the product. We have also specified the JS code to call the star-rating in the input field.

<!DOCTYPE html>
<?php
	$rating = $_POST['rating'];
	echo '<h2>Thanks for rating! '.$rating.'</h2>';
?>
<html>
<head>
	<title>Bootstrap star rating example</title>
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.2/css/star-rating.min.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.2/js/star-rating.min.js"></script>
</head>
<body>
<div class="container">
	<h2>Bootstrap star rating example</h2>
	<form action="#" method="post">
    <label for="ratinginput" class="control-label">Give rating for the product:</label>
    <input id="ratinginput" name="rating" class="rating rating-loading" data-min="0" data-max="5" data-step="0.1" value="2">
	<input type="submit" name="Submit"/>
	</form>
</div>
<script>
$("#ratinginput").rating();
</script>
</body>
</html>

Output of the above code -
Bootstrap Star Rating

jQuery Ajax serialize form data example
Ajax live data search using jQuery PHP MySQL
Django Pagination with Ajax and jQuery
Image popup on page load using HTML and jQuery
Bootstrap modal popup example on page load
Bootstrap datepicker example
jQuery File upload progress bar with validation
jQuery Ajax serialize form data example
Save emoji in MySQL
How to display PDF file in PHP from database
jQuery loop over JSON result after AJAX Success
Dynamically Add/Delete HTML Table Rows Using Javascript
Submit a form data without page refresh using PHP, Ajax and Javascript
PHP Server Side Form Validation
How to add google reCAPTCHA v2 in registration form using PHP
Complete HTML Form Validation in PHP

Bootstrap star rating input example

Dynamic bootstrap star rating

Related Articles