<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- CS 328 - Week 4 Lab playing around by: Sharon Tuttle last modified: 2016-02-11 --> <head> <title> playing with CSS </title> <meta charset="utf-8" /> <link href="http://users.humboldt.edu/smtuttle/styles/normalize.css" type="text/css" rel="stylesheet" /> <link href="328lab04-1.css" type="text/css" rel="stylesheet" /> </head> <body> <h1> playing with CSS3 </h1> <form action="http://users.humboldt.edu/smtuttle" method="get"> <fieldset> <legend> My first fieldset </legend> <label> Last name: <input type="text" name="lastname" required="required" /> </label> <br /> <label> Age: <input type="text" name="age" size="3" maxlength="3" /> ...in years </label> <br /> <label class="favecolor" for="colorinput"> Your Favorite Color: </label> <input type="text" name="color" required="required" id="colorinput" /> <br /> </fieldset> <fieldset> <legend> Your ice cream choice for today </legend> <label> <input type="radio" name="ice_cream" value="chocolate" checked="checked" /> Chocolate </label> <br /> <label> <input type="radio" name="ice_cream" value="vanilla" /> Vanilla </label> <br /> <label> <input type="radio" name="ice_cream" value="strawberry" /> Strawberry </label> <br /> </fieldset> <fieldset> <legend> Which of these do you have? </legend> <label> <input type="checkbox" name="bike" checked="checked" /> Bike </label> <br /> <label> <input type="checkbox" name="car" /> Car </label> <br /> <label> <input type="checkbox" name="skateboard" /> Skateboard </label> <br /> <label> <input type="checkbox" name="heelies" required="required" /> Heelies </label> <br /> </fieldset> <fieldset> <legend> More info </legend> <label> State of Legal Residence <select name="state"> <option value="CA" selected="selected"> California </option> <option value="OR"> Oregon </option> <option value="JF"> Jefferson </option> <option value="NJ"> New Jersey </option> </select> </label> </fieldset> <input type="submit" name="subby" value="Send Info" /> </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>