<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML5 Form Example</title>
  <style>
  label {
  	font-weight: bold;
  	color: #300ACC;
  }
  </style>
</head>
<body>

	<?php
	
	error_reporting(0);// Remove simple running errors -- See Chapter 8 for more information on this function
	
	$name = $_POST['firstname'];
	$gender = $_POST['gender'];
	$yearinschool = $_POST['yearinschool'];
	$hobbies = $_POST['hobbies'];
	$comments = $_POST['comments'];
	//we needed to loop through the hobby array.
	foreach ($hobbies as $hobby){
		$hobbycontent .= $hobby.',';
	}

	//this is what goes in the database
	echo $name.'<br>'.$gender.'<br>'.$yearinschool.'<br>'.$hobbycontent.'<br>'.$comments;

	//extract data and print it
	?>
	
	<!-- Form with fieldset and label tags added. -->
	<form action="form.php" method="post">
	<fieldset>
		<legend>Enter your information in the form below</legend>

		<p><label>Name: <input type="text" name="firstname" placeholder="Enter Your Full Name" required></label></p>

		<p><label for="gender">Gender: </label>
		<!--The id and for attributes must have the exact same value-->
		<input type="radio" name="gender" value="male" id="male"> <label for="male"> Male</label>
		<input type="radio" name="gender" value="female" id="female"> <label for="female"> Female</label>
		</p>

		<p><label>Which grade are you in?
		<select name="yearinschool">
			<option value="freshman">Freshman</option>
			<option value="sophomore">Sophomore</option>
			<option value="junior">Junior</option>
			<option value="senior">Senior</option>
		</select></label></p>

		<p>Which sports do you like?
			<input type="checkbox" id="football"  name="hobbies[]" value="football"><label for="football">Football</label><br>
			<input type="checkbox" id="hockey" name="hobbies[]" value="hockey"><label for="hockey">Hockey</label><br>
			<input type="checkbox" id="baseball" name="hobbies[]" value="baseball"><label for="baseball">Baseball</label<br>
		</p>

	  <p><label>Comments: <textarea name="comments" rows="3" cols="40" required></textarea></label></p>
</fieldset>

		<p align="center"><input type="submit" name="submit" value="Submit Data"></p>

	</form>
</body>
</html>