info343/minilabs/10/skeleton.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   
   <head>
      <title>Mini-lab 8: Form Validation</title>
      
      <link href="http://info343.ischool.uw.edu/minilabs/8/style.css" type="text/css" rel="stylesheet"  />
      
      <!--
      This imports the Prototype JavaScript library, so you can use its enhancements
      (it must be loaded before your other scripts)
      -->
      <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
      
      <!-- This links to your JavaScript file, minilab8.js -->
      <script type="text/javascript" src="minilab8.js"></script>
   </head>
   
   <body>
      <h1>Mini-lab 8: Form Validation</h1>
      
      <form id="form" action="http://info343.ischool.uw.edu/params.php">
         <dl>
            <dt><label for="name">Name:</label></dt>
            <dd><input type="text" name="name" id="name" /></dd>
            
            <dt><label for="address">Address:</label></dt>
            <dd><input type="text" name="address" id="address" /></dd>
            
            <dt><label for="city">City:</label></dt>
            <dd><input type="text" name="city" id="city" /></dd>
            
            <dt><label for="state">State:</label></dt>
            <dd><input type="text" name="state" id="state" /></dd>
            
            <dt><label for="zip">Zip:</label></dt>
            <dd><input type="text" name="zip" id="zip" /></dd>
            
            <dt><label for="sid">SID:</label></dt>
            <dd><input type="text" name="sid" id="sid" /></dd>
            
            <dt><label for="uwnetid">UWNetID:</label></dt>
            <dd><input type="text" name="uwnetid" id="uwnetid" /></dd>
            
            <dt><label for="phone">Phone:</label></dt>
            <dd><input type="text" name="phone" id="phone" /></dd>
            
            <dt><label for="section">Major:</label></dt>
            <dd>
               <select name="section" id="section">
                  <option>Select a major&hellip;</option>
                  <option>Informatics</option>
                  <option>CSE</option>
                  <option>HCDE</option>
                  <option>Business</option>
                  <option>Philosophy</option>
                  <option>Linguistics</option>
               </select>
            </dd>
            
            <dt>Favorite color:</dt>
            <dd>
               <label><input type="radio" name="color" id="color_red" value="red" /> Red</label>
               <label><input type="radio" name="color" id="color_green" value="green" /> Green</label>
               <label><input type="radio" name="color" id="color_blue" value="blue" /> Blue</label>
               <label><input type="radio" name="color" id="color_other" value="other" /> Other</label>
            </dd>
            
            <dt>Eat:</dt>
            <dd>
               <label><input type="checkbox" name="meat" id="eats_meat" /> Meat</label>
               <label><input type="checkbox" name="veggies" id="eats_veggies" /> Veggies</label>
               <label><input type="checkbox" name="fish" id="eats_fish" /> Fish</label>
            </dd>
         </dl>
         <div><input type="submit" value="Submit!" /></div>
      </form>
      
   </body>
   
</html>