<!DOCTYPE html>
<html>
<head>
<title>Form with CSS</title>
<link rel="stylesheet" type="text/css" href="form1.css">
</head>
<body>
<h1>Customer Profile</h1>
<h3>Using a different CSS + required</h3>
<form method="POST" action="/~sultans/util/form/formProc.cgi">
<fieldset>
<legend>Enter Information Below</legend>
<label for="fullname" >Full Name:</label>
<input type="text" id="fullname" name="fullname" size="44" required><br>
<label for="email" >Email Addr:</label>
<input type="email" id="email" name="email" size="44" required><br>
<label for="address">Address:</label>
<textarea name="address" id="address" rows="4" cols="44" required></textarea><br>
<table>
<tr>
<td>Gender:
<td><input type="radio" name="gender" id="M" value="male" required> <label for="M" class=left>Male</label>
<td><input type="radio" name="gender" id="F" value="female" required><label for="F" class=left>Female</label>
<tr>
<td>Status:
<td><input type="checkbox" name="status" id="stu" value="student"> <label for="stu" class=left>Student</label>
<td><input type="checkbox" name="status" id="itr" value="intern"> <label for="itr" class=left>Intern</label>
<td><input type="checkbox" name="status" id="emp" value="employed"><label for="emp" class=left>Employed</label>
</table>
<label for="monthSelect">Date of Birth:</label>
<select name="month" id="monthSelect" required>
<option value="">Choose Month </option>
<option value="january"> January </option>
<option value="february"> February </option>
<option value="march"> March </option>
<option value="april"> April </option>
<option value="may"> May </option>
<option value="june"> June </option>
<option value="july"> July </option>
<option value="august"> August </option>
<option value="september">September</option>
<option value="october"> October </option>
<option value="november"> November </option>
<option value="december"> December </option>
</select>
<select name="day" id="daySelect" required>
<option value="">Choose Day</option>
<script>
for (var i = 1; i <= 31; i++) {
document.write('<option value="' + i + '">' + i + '</option>');
}
</script>
</select>
<select name="year" id="yearSelect" required>
<option value="">Choose Year</option>
<script>
var currentYear = new Date().getFullYear();
for (var i = 1990; i <= currentYear; i++) {
document.write('<option value="' + i + '">' + i + '</option>');
}
</script>
</select><br>
<label for="hobbies">Hobbies:</label>
<select name="hobbies" id="hobbies" multiple required>
<option value='read'> Reading </option>
<option value='tv'> Television and Movies </option>
<option value='art'> Art and Theatre </option>
<option value='sport'> Playing/Watching sports</option>
<option value='travel'>Traveling </option>
<option value='shop'> Shopping </option>
<option value='sleep'> Relaxing and Sleeping </option>
</select><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
</body>
</html>