Star Rating Form Checkbox Input, HTML & CSS only, with Server PHP "submit" file

## stars.css
@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;
}

## stars.html
<!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>

## test_form.php
<!DOCTYPE HTML>
<html>
  <head>

  </head>
  <body>

    <?php
      echo "<h2>Your Input:</h2>";

      foreach($_POST as $key=>$value){
        echo $key, ' => ', $value, "<br/>";
    }
    ?>

  </body>
</html>
	@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;
	}
	<!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>
	<!DOCTYPE HTML>
	<html>
	<head>

	</head>
	<body>

	<?php
	echo "<h2>Your Input:</h2>";

	foreach($_POST as $key=>$value){
	echo $key, ' => ', $value, "<br/>";
	}
	?>

	</body>
	</html>