Last active
April 1, 2022 17:29
-
-
Save bunda3d/d3c5ee0d119a6e3b2930c96a06ad8001 to your computer and use it in GitHub Desktop.
Star Rating Form Checkbox Input, HTML & CSS only, with Server PHP "submit" file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(https://fonts.googleapis.com/css?family=Open+Sans); | |
/* common colors */ | |
:root { | |
--accent-bg: #BBBBBB; | |
--accent-color: #E52E62; | |
} | |
/* general text formatting */ | |
h1, body, legend, p { | |
font-family: "Open Sans", Verdana, Arial, sans-serif; | |
} | |
body { | |
font-size: 100%; | |
background-color: #E8EAF6; | |
} | |
/* header */ | |
header { | |
color: white; | |
background-color: #1A237D; | |
margin: 0em 4em 0.25em 4em; | |
} | |
header h1 { | |
padding: 0.5rem 0 0 1.25rem; | |
font-size: 2rem; | |
font-weight: bold; | |
} | |
header p { | |
font-size: 1rem; | |
font-style: italic; | |
margin: 0; | |
padding: 0 0 1rem 1.25rem; | |
} | |
/* main article styling */ | |
main { | |
background-color: white; | |
margin: 1em 4em 1em 4em; | |
padding: 1em; | |
} | |
section { | |
margin-bottom: 1em; | |
padding: 0; | |
width: 100%; | |
} | |
/** form styling */ | |
legend { | |
margin: 0; | |
padding: 0; | |
background-color: var(--accent-bg); | |
color: #1A237D; | |
text-transform: uppercase; | |
width: 100%; | |
} | |
fieldset { | |
margin: 0; | |
padding: 0; | |
background-color:#eae8e8; | |
width: 100%; | |
border: none; | |
} | |
form p { | |
margin-top: 0.5em; | |
} | |
table { | |
border: none; | |
border-spacing: 0; | |
width: 100%; | |
margin: 0 auto; | |
} | |
table tbody td{ | |
line-height: 1.5em; | |
vertical-align: top; | |
padding: 0.5em 0.75em; | |
} | |
/** buttons */ | |
.box { | |
border: 1pt solid var(--accent-bg); | |
padding: 0.5em; | |
margin-bottom: 0.4em; | |
} | |
.rectangle { | |
background-color: var(--accent-bg); | |
padding: 0.5em; | |
} | |
.rounded, .reset { | |
border: 2px solid var(--accent-color); | |
border-radius: 7px; | |
text-align: center; | |
font-weight: bold; | |
padding: 0.5em 0 0.5em 0; | |
margin: 0.3em; | |
min-width: 9em; | |
height: 3em; | |
} | |
.reset, .rounded:hover { | |
background-color: transparent; | |
color: var(--accent-color); | |
border-color: var(--accent-color); | |
} | |
.rounded, .reset:hover { | |
background-color: var(--accent-color); | |
color: white; | |
border-color: white; | |
} | |
button:hover { | |
box-shadow: 2px 2px white; | |
} | |
/* -- star rating styling -- */ | |
div.star_rating { | |
float: left; | |
} | |
input.star { | |
border: 0; | |
width: 1px; | |
height: 1px; | |
overflow: hidden; | |
position: absolute !important; | |
clip: rect(1px 1px 1px 1px); | |
clip: rect(1px, 1px, 1px, 1px); | |
opacity: 0; | |
float: right; | |
} | |
label.star { | |
position: relative; | |
float: right; | |
color: #C8C8C8; | |
} | |
label.star:before { | |
margin: 5px; | |
content: "\f005"; | |
font-family: FontAwesome; | |
font-size: 1.5em; | |
color: var(--accent-color); | |
-webkit-user-select: none; /* Safari 3.1+ */ | |
-moz-user-select: none; /* Firefox 2+ */ | |
-ms-user-select: none; /* IE 10+ */ | |
user-select: none; | |
} | |
input.star:checked ~ label.star:before { | |
color: #FFC107; | |
} | |
label.star:hover ~ label.star:before { | |
color: #ffdb70; | |
} | |
label.star:hover:before { | |
color: #FFC107; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Star Rating Form Input</title> | |
<link rel="stylesheet" href="stars.css"> | |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-KA6wR/X5RY4zFAHpv/CnoG2UW1uogYfdnP67Uv7eULvTveboZJg0qUpmJZb5VqzN" crossorigin="anonymous"> | |
</head> | |
<body> | |
<header> | |
<h1>Star Rating</h1> | |
<p>Using input checkboxes and CSS</p> | |
</header> | |
<main> | |
<section> | |
<!-- form starts --> | |
<form name="star_submit" id="star_submit" action="test_form.php" method="post"> | |
<fieldset> | |
<legend> Star Rating</legend> | |
<table> | |
<tr> | |
<td colspan="1"> | |
<label>Rate this form's subject: </label> | |
<br> | |
<div class="star_rating"> | |
<!-- this has 4 stars, you can change to add or subtract stars. --> | |
<input type="checkbox" id="star4" name="Star_Rating_of_4_stars" class="star" value="4"> | |
<label for="star4" class="star" title="4 stars"></label> | |
<input type="checkbox" id="star3" name="Star_Rating_of_4_stars" class="star" value="3"> | |
<label for="star3" class="star" title="3 stars"></label> | |
<input type="checkbox" id="star2" name="Star_Rating_of_4_stars" class="star" value="2"> | |
<label for="star2" class="star" title="2 stars"></label> | |
<input type="checkbox" id="star1" name="Star_Rating_of_4_stars" class="star" value="1"> | |
<label for="star1" class="star" title="1 stars"></label> | |
</div> | |
</td> | |
</tr> | |
</fieldset> | |
<tr> | |
<td colspan="1"> | |
<!-- submit or form reset buttons --> | |
<div class="rectangle"> | |
<label for="submit"> | |
<button type="submit" id="submit" class="rounded" value="Submit">Submit</button> | |
</label> | |
<label for="reset"> | |
<button type="reset" id="reset" class="reset" value="Reset">Reset</button> | |
</label> | |
</div> | |
</td> | |
</tr> | |
</table> | |
</form> | |
</section> | |
</main> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html> | |
<head> | |
</head> | |
<body> | |
<?php | |
echo "<h2>Your Input:</h2>"; | |
foreach($_POST as $key=>$value){ | |
echo $key, ' => ', $value, "<br/>"; | |
} | |
?> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment