<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">

<!-- adapted from:
http://srv13.fountainheadcollege.com/mustafa.eminoglu/ws201/registration.html
-->

<head>  
    <title>Registration</title>
    <meta charset="utf-8" />

    <link href="http://users.humboldt.edu/smtuttle/styles/normalize.css" 
          type="text/css" rel="stylesheet" />
</head> 

<body> 
    <h1> User Registration </h1>

    <p>
    Please complete the following form to register with our site:
    </p>

    <form action="http://users.humboldt.edu/smtuttle">
        <fieldset>
        <legend> Site Registration </legend>
            <label for="username_fld"> User Name: </label>
            <input type="text" name="username" id="username_fld" 
                   size="20" required="required" /> <br />

            <label for="password_fld"> Password: </label>
            <input type="password" name="pwd" id="password_fld" 
                   size="20" required="required" /> <br />
            Preferred OS:
            <input type="radio" name="os_pref" id="os_windows" 
                   value="windows" />
            <label for="os_windows"> Windows </label>

            <input type="radio" name="os_pref" id="os_mac" 
                   value="mac" />
            <label for="os_mac"> Mac </label>

            <input type="radio" name="os_pref" id="os_linux" 
                   value="linux" checked="checked" />
            <label for="os_linux"> Linux </label>

            <input type="radio" name="os_pref" id="os_other" 
                   value="other" />
            <label for="os_other"> Other </label> <br />
  
            <label for="ref_fld"> 
                How did you hear about us? (choose one): </label>
            <select name="referrer" id="ref_fld">
                <option value="website"> Another website </option>
                <option value="printAd"> Magazine ad </option>
                <option value="friend"> From a friend </option>
                <option value="other"> Other </option>
            </select> <br />

            <label for="list_pref"> Please select this box if you wish 
                    to be added to our mailing list </label>
            <input type="checkbox" name="maillist_ok" id="list_pref"
                   checked="checked" />
                    <br />
            <small> We will not pass on your details to any third 
                    party. </small> <br /> 
            <input type="submit" value="Register now" /> 
        </fieldset>
    </form>

    <hr />   

    <p>
        <a href="http://validator.w3.org/check/referer">
        Validate this HTML5 page
        </a>
    </p>

    <p>
        For full credit, this page must also pass the tests at
        <a href="http://validator.nu/">
        http://validator.nu/</a>:
        (instructions modified from
        http://stackoverflow.com/questions/16596493/html5-doctype-with-strict)
    </p>
    <ul>
         <li> switch to "text field" in the select box at the
              top left of the form (make sure JavaScript is
              enabled...!) </li>
         <li> paste in the text of your document </li>
         <li> in the Preset field, select: <br />
              "XHTML5 with SVG 1.1 + MathML 3.0 + RDFa Lite 1.1" </li>
         <li> click validate </li>
    </ul>

    <p>
        <a href=
           "http://jigsaw.w3.org/css-validator/check/referer?profile=css3">
            <img src="http://jigsaw.w3.org/css-validator/images/vcss" 
                 alt="Valid CSS3!" height="31" width="88" />
        </a>
    </p>

</body> 
</html>