E-mail List Subscription Form with Invalid Field Feedback

<form method="post" action="form-example-sub-label-invalid.php">
  <input type="hidden" name="tries" value="1">
  <div class="invalid">
    <h2>Invalid Form Fields</h2>
    <ul>
       <li><a href="javascript:document.getElementById('first').focus()">First Name: First name cannot contain numbers</a></li>
       <li><a href="javascript:document.getElementById('last').focus()">Last Name: Last 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('password1').focus()">Password: You must enter a valid password, passwords must be at least 8 characters in length and contain a least one lowercase letter, one uppercase letter and one number</a></li>
       <li><a href="javascript:document.getElementById('password2').focus()">Confirm Password: You must enter a valid password, passwords must be at least 8 characters in length and contain a least one lowercase letter, one uppercase letter and one number</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
   -->
  <p class="text invalid" ><label for="first">First Name <img src="images/required-invalid.png" alt="invalid required value"/></label><input type="text" name="first" id="first" size="20" value="John1"/></p>
  <p class="text invalid" ><label for="last">Last Name <img src="images/required-invalid.png" alt="invalid required value"/></label><input type="text" name="last" id="last" size="30" value="Smith2"/></p>

  <!--
      Checkbox input control with LABEL markup using the FOR and ID attributes
   -->
  <p class="check" ><input type="checkbox" name="check1" id="check1"/><label for="check1">Remove from E-mail list</label></p>

  <!--
      More text box input controls with LABEL markup using the FOR and ID attributes
   -->
  <p class="text invalid" ><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=""/></p>
  <p class="text invalid" ><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=""/></p>

  <!--
      Select control with LABEL markup using the FOR and ID attributes
   -->
  <p class="select">
     <label for="select1">Subscription Type</label>
     <select name="select1" id="select1">
      <option value="0" selected="selected">Regular</option>
      <option value="1">Digest (Traditional) </option>
      <option value="2">Digest (MIME format)</option>
      <option value="3">Digest (HTML format)</option>
      <option value="4">Index (traditional)</option>
      <option value="5">Index (HTML format)</option>
    </select>
  </p>

  <!--
      Radio button controls with LABEL markup using the FOR and ID attributes.  The Fieldset and Legend elements are used to give the group of controls a label.
   -->
  <fieldset class="radio">
    <legend>Acknowledgement of posting</legend>
    <ul class="radio">
      <li><input type="radio" name="radio1" id="radio10" value="0" checked="checked"/><label for="radio10">No acknowledgements</label></li>
      <li><input type="radio" name="radio1" id="radio11" value="1"/><label for="radio11">Short message confirming receipt</label></li>
      <li><input type="radio" name="radio1" id="radio12" value="2"/><label for="radio12">Receive copy of own postings</label></li>
    </ul>
  </fieldset>

  <!--
      Setting the TABINDEX attribute to "0" is used to make sure screen reader users can easily find the instructions for filling out the next part of the form.  NOTE: The tabindex technique results in invalid HTML, so the tabindex attribute should be added through scripting.
   -->
<p class="instruction" tabindex="0">If you would like to have access to the private archive you will need to create a password.  Your e-mail address will be used as your login id.</p>
  <!--
      Password controls with LABEL markup using the FOR and ID attributes
   -->
  <p class="text invalid" ><label for="pass1">Password <img src="images/required-invalid.png" alt="invalid value"/></label><input type="password" name="pass1" id="pass1" size="20" value=""/></p>
  <p class="text invalid" ><label for="pass2">Confirm Password <img src="images/required-invalid.png" alt="invalid value"/></label><input type="password" name="pass2" id="pass2" size="20" value=""/></p>

  <!--
      TEXTAREA control with LABEL markup using the FOR and ID attributes
   -->
  <p class="text" ><label for="textarea1">Note to list administrator</label><textarea name="textarea1" id="textarea1" rows="10" cols="80"></textarea></p>
  <p class="submit"><input type="submit" value="Submit Request"/></p>
</form>

/* CSS Document */

.hidden {
  position: absolute;
  left: -200em;
  top: -20em;
}


form input:active,
form input:focus,
form select:active,
form select:focus,
form textarea:active,
form textarea:focus
{
  background-color: #F0F0A0;
}

form p {
  display: block;
  padding: 0;
  margin: 0;
  margin-top: .25em;
  margin-bottom: .25em;
  clear: left;
}


form p.date_picker label,
form p.text label,
form p.select label,
form p.radio {
  padding: 0;
  margin: 0;
  display: block;
  text-align: right;
  float: left;
  padding-right: .5em;
  width: 10em;
}


form p.check input,
form p.select input {
  padding: 0;
  margin: 0;
  margin-left: 10em;
  margin-right: .5em;
  text-align: right;
  float: left;
}

form p.check label {
  padding: 0;
  margin: 0;
  padding-left: 1em;
}


form ul.radio {
  padding: 0;
  margin: 0;
  margin-left: 11em;
}

form ul.radio li  {
  padding: 0;
  margin: 0;
  list-style: none;
}

form p.submit input,
form p.button input,
form p.image input {
  padding-left: 0em;
  margin-left: 11em;
}

form fieldset.radio,
form fieldset.checkbox {
  margin: 0;
  padding: .5em;
  margin-left: 10em;
  width: 20em;
}

form fieldset.radio {
  border: none;
}

form fieldset.radio ul,
form fieldset.checkbox ul {
  margin: 0;
  padding: 0;
}

form fieldset.radio ul li,
form fieldset.checkbox ul li {
  list-style: none;
}

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


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

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

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