<!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>