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

<!--
    CS 328 - Week 6 Labs - 3:00 lab - 2016-02-26

    includes a form adapted from the course text, 
    Chapter 6 Section 2, pp. 225-226
 
    adapted by: Sharon Tuttle
    last modified: 2016-02-27
-->

<head>  
    <title> playing with position and form layout </title>
    <meta charset="utf-8" />

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

<body> 
    <h1> playing with position and form layout </h1>

    <div class="box"> </div>
    <p> howdy </p>
    <div class="box_offset_from_left"> </div>
    <div class="box"> </div>
    <div class="box_corner"> </div>

    <div id="box_fixed">
        <p> might be a lovely place for a copyright notice! </p>
    </div>

    <h2>
         A lovely form, adapted from course text, pp. 225-226
    </h2>

    <form action="http://users.humboldt.edu/smtuttle"
          method="get">
        <fieldset>
            <legend> New User Signup </legend>
            <label class="heading" for="name_fld">Name:</label>
            <input type="text" name="name" id="name_fld" /> 

            <label class="heading" for="addr_fld"> Address: </label>
            <input type="text" name="address" id="addr_fld" /> <br />

            <label class="heading">Credit Card:</label>
            <label> <input type="radio" name="cc" value="visa" /> Visa 
                </label>
            <label> <input type="radio" name="cc" value="mc" /> Mastercard
                </label>
                
            <div class="sub_button">
                 <input type="submit" value="Sign Up" />
            </div>
        </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>