<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Form</title>
<link rel="stylesheet" media="screen" href="mytemplate-1.css" >
</head>
<body>
<header>
<h1>TITLE</h1>
<hgroup>
<h4> Form Info</h4>
<h4>Other info</h4>
</hgroup>
</header>
<form class="contact_form" action="contact.php" method="post" name="contact_form">
<ul>
<li>
<h2>Contact Us</h2>
<span class="required_notification">* Denotes Required Field</span>
</li>
<li>
<label for="name">Name:</label>
<input type="text" name = "name" placeholder="John Doe" required />
</li>
<li>
<label for="email">Email:</label>
<input type="email" name="email" placeholder="john_doe@example.com" required />
<span class="form_hint">Proper format "name@something.com"</span>
</li>
<li><!-- number - needs further validation -->
<label for="sets">How many sets do you need?</label>
<input type="number" size = "2" name="sets" min="1" max="16" placeholder="4" required />
<span class="form_hint">A whole number between 1 and 16 only</span>
</li>
<li><!-- dropdown list -->
<label for="adsources">How did you hear about us?</label>
<select name = "adsources" required >
<option value="New Scientist">New Scientist </option>
<option value="National Geographic">National Geographic </option>
<option value="Cosmopolitan">Cosmopolitan </option>
<option value="Other">Other </option>
</select>
</li>
<li> <!-- when programming radio buttons --input id must be unique -- match id value to label for value -->
<fieldset >
<legend> Age range </legend>
<p><input id="0" type="radio" name="radAge" class = "regular-radio" value = "young" checked /> <label for="0">10 - 19</label> </p>
<p><input id="1" type="radio" name="radAge" class = "regular-radio"value = "mid"/>
<label for="1">20 - 55</label> </p>
<p><input id="2" type="radio" name="radAge" class = "regular-radio"value = "senior"/>
<label for="2">56-80</label</p>
</fieldset>
</li>
<li>
<label for="website">Website:</label>
<input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http|https)://.+"/>
<span class="form_hint">Proper format "http://someaddress.com"</span>
</li>
<li> <!-- checkboxes -- fieldset and legend optional -->
<fieldset class ="checkbox">
<legend>What are your interests? </legend>
<label for="bollywood"> <input type="checkbox" name="chkInterests" class = "checkbox " value = "bollywood" />Bollywood </label>
<!--<span class="form_hint">Proper format "http://someaddress.com"</span> -->
<p><label for="rap"><input type="checkbox" name="chkInterests" class = "checkbox" value = "Rap" />Rap</label>
</p>
<p><label for="reggae"><input type="checkbox" name="chkInterests" class = "checkbox" value = "Reggae" />Reggae</label>
</p>
</fieldset>
</li>
<li> <!-- textarea -->
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="6" required ></textarea>
</li>
<li>
<button class="submit" type="submit">Submit Form</button>
</li>
</ul>
</form>
<footer>
<a href="contact.html">Main Menu </a>
</footer>
</body>
</html>