<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<titleForm Submission</title>
<style>
#container {max-width:600px; margin:0 auto; padding:20px; background-color:#F9F1FF; box-shadow:0 0 20px #F8AFA6; text-align:center;}
#form {text-align: left; padding: 20px;}
.group {border:1px solid gray; width:580px; background-color:white}
.label {color: #67595E; font-family: Arial, sans-serif;}
.input {width: 560px; padding: 10px; margin-bottom: 10px; }
textarea {width: 560px; padding: 10px; margin-bottom: 10px; height:50px}
.button {background-color:#67595E; color:white; padding:10px; border:none; cursor:pointer;}
input[type=submit]:hover, input[type=reset]:hover {background-color:blue}
</style>
</head>
<body>
<div id="container">
<h1 class="label">Personal Information</h1>
<form method="GET" action="http://workshop.sps.nyu.edu/~sultans/util/form/formProc.cgi" id="form">
<label for="name" class="label">What is your name:</label>
<input type="text" id="name" name="name" required class="input">
<br>
<label for="address" class="label">Your Address:</label>
<textarea id="address" name="address" required></textarea>
<br>
<label class="label">Gender:</label><br>
<div class=group>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male"> Male</label><br>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female"> Female</label>
</div>
<br>
<label for="birthdate" class="label">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate" required class="input">
<br>
<label class="label">Your Marital Status</label><br>
<div class=group>
<input type="checkbox" id="single" name="status" value="S">
<label for="single">Single</label><br>
<input type="checkbox" id="married" name="status" value="M">
<label for="married">Married</label><br>
<input type="checkbox" id="child" name="status" value="C">
<label for="child">With Children</label>
</div>
<br>
<label for="education" class="label">Highest Education Level</label><br>
<select id="education" name="education" class="input" style='width:580px' required>
<option value="none"> --Please Choose from Below -- </option>
<option value="HS"> High School </option>
<option value="Asc"> Associate Degree </option>
<option value="bs"> Bachelor Degree </option>
<option value="ms"> Master Degree </option>
<option value="phd"> PHD/Dr/Post Graduate </option>
</select>
<label for="hobbies" class="label">What are your Hobbies?</label><br>
<select id="hobby" name="hobby" multiple class="input" required style='width:580px; height:65px'>
<option value="read"> Reading </option>
<option value="TV-Movie"> TV and Movies </option>
<option value="sport"> Sports </option>
<option value="travel"> Travel </option>
<option value="coach"> Coaching/Mentoring </option>
<option value="relax"> Relaxing/Sleeping </option>
<option value="none"> None of the Above </option>
</select>
<br><br>
<!--
<input type="hidden" name="_EMAIL" value="your_email@address">
<input type="hidden" name="_FILE" value="your_file_name">
<input type="hidden" name="_REDIRECT" value="http://your_hostname/~your_userid/Thankyou.html">
-->
<input type="submit" value="Submit" class="button">
<input type="reset" value="Reset" class="button">
</form>
</div>
<br>
</body>
</html>