E-mail List Subscription Form with Required Fields

<form method="post" action="form-example-sub-label-req.php">

<p class="instruction" tabindex="0"><img src="images/required.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" ><label for="first">First Name <img src="images/required.png" alt="required"/></label><input type="text" name="first" id="first" size="20" value=""/></p>

  <p class="text" ><label for="last">Last Name <img src="images/required.png" alt="required"/></label><input type="text" name="last" id="last" size="30" value=""/></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" ><label for="email1">E-mail Address <img src="images/required.png" alt="required"/></label><input type="text" name="email1" id="email1" size="40" value=""/></p>

  <p class="text" ><label for="email2">Confirm E-mail <img src="images/required.png" alt="required"/></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" ><label for="pass1">Password <img src="images/required.png" alt="required"/></label><input type="password" name="pass1" id="pass1" size="20" value=""/></p>

  <p class="text" ><label for="pass2">Confirm Password <img src="images/required.png" alt="required"/></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;

}