<form method="post" action="http://html.cita.illinois.edu/nav/form/date/index.php?example=7">
  <h1>Conference Room Reservation Form</h2>
  <input type="hidden" name="tries" value="1">
  <div class="invalid">
    <h2>5 Invalid Form Fields</h2>
    <ul>
       <li>
         <a href="javascript:document.getElementById('first').focus()">
           Name: First name cannot contain numbers
         </a>
       </li>
       <li>
         <a href="javascript:document.getElementById('email1').focus()">
           E-mail Address: You must enter a valid e-mail address
         </a>
       </li>
       <li>
         <a href="javascript:document.getElementById('email2').focus()">
           Confirm E-mail: You must enter a valid e-mail address
         </a>
       </li>
       <li>
         <a href="javascript:document.getElementById('date').focus()">
           Date: Invalid date format use MM-DD-YY
         </a>
       </li>
       <li>
         <a href="javascript:document.getElementById('time').focus()">
           Time: Invalid time format use HH:MM am or pm
         </a>
       </li>
    </ul>
  </div>
<p class="instruction" tabindex="0"><img src="images/required-valid.png" alt="required value symbol"/> indicates a required form field</p>
  <!--
      Text box input controls with LABEL markup using the FOR and ID attributes
   -->
  <div class="textinvalid" >
    <label for="name">
      Name
      <img src="images/required-invalid.png" alt="invalid required value"/>
    </label>
    <input type="text" name="name" id="name" size="30" value="John1"/>
  </div>

  <div class="textinvalid" >
    <label for="email1">
      E-mail Address
      <img src="images/required-invalid.png" alt="invalid required value"/>
    </label>
    <input type="text" name="email1" id="email1" size="40" value=""/>
  </div>

  <div class="textinvalid" >
    <label for="email2">
      Confirm E-mail
      <img src="images/required-invalid.png" alt="invalid required value"/>
    </label>
    <input type="text" name="email2" id="email2" size="40" value=""/>
  </div>

  <div class="text" >
    <label for="phone">
      Phone
    </label>
    <input type="text" name="phone" id="phone" size="15" value=""/>
  </div>

  <div class="textinvalid" >
    <label for="date">
      Date
      <img src="images/required-invalid.png" alt="invalid required value"/>
    </label>
    <input type="text" name="date" id="date" size="12" value=""/>
  </div>

  <div class="textinvalid" >
    <label for="time">
      Time
      <img src="images/required-invalid.png" alt="invalid required value"/>
    </label>
    <input type="text" name="time" id="time" size="12" value=""/>
  </div>

  <p class="submit"><input type="submit" value="Submit Request"/></p>
</form>

  <style type="text/css">
div.text,
div.textinvalid
{
  margin: 0;
  padding: 0;
  padding-left: 20px;
  padding-bottom: .5em;
  display: block;
}

div.text label,
div.textinvalid label {
margin: 0;
padding: 0;
display: block;
padding-top: .25em;
}

div.text input,
div.textinvalid input {
margin: 0;
padding: 0;
display: inline;
}

span.inst {
  font-size: 75%;
  color: blue;
  padding-left: .25em;
}

div.text input:active,
div.text input:focus,
div.text input:hover
{
  border-color: gray;
  background-color: #E0E0E0;
}

div.textinvalid input:active,
div.textinvalid input:focus,
div.textinvalid input:hover
{
  border-color: gray;
  background-color: #FF8080;
}


form div.invalid {
  margin: 2em;
  padding: 1em;
  border: red 2px solid;
}


form div.invalid h2 {
  margin: 0;
  padding: 0;
  margin-bottom: .5em;
  text-decoration: none;
  border: none;
  color: black;
}

form div.invalid li a:link,
form div.invalid li a:visited {
  color: black;
  text-decoration: none;
  font-wieght: bold;
}

form div.invalid li a:hover,
form div.invalid li a:focus,
form div.invalid li a:active {
  color: red;
  text-decoration: underline;
}





  </style>