E-mail List Subscription Form

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

  <!--
      Text box input form controls with LABEL markup using the FOR and ID attributes
   -->
  <p class="text" ><label for="first">First Name</label><input type="text" name="first" id="first" size="20" value=""/></p>
  <p class="text" ><label for="last">Last Name</label><input type="text" name="last" id="last" size="30" value=""/></p>

  <!--
      Checkbox input form 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 form controls with LABEL markup using the FOR and ID attributes
   -->
  <p class="text" ><label for="email1">E-mail Address</label><input type="text" name="email1" id="email1" size="40" value=""/></p>
  <p class="text" ><label for="email2">Confirm E-mail</label><input type="text" name="email2" id="email2" size="40" value=""/></p>

  <!--
      Select form 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 form controls with LABEL markup using the FOR and ID attributes.  The FIELDSET and LEGEND elements are used to give the group of form 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 form controls with LABEL markup using the FOR and ID attributes
   -->
  <p class="text" ><label for="pass1">Password</label><input type="password" name="pass1" id="pass1" size="20" value=""/></p>
  <p class="text" ><label for="pass2">Confirm Password</label><input type="password" name="pass2" id="pass2" size="20" value=""/></p>

  <!--
      Textarea form 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;
}