Test Start

Profile Settings

Gender

Message Options



Test End

Rule References

Rule Pass IDs Fail IDs
Rule 73
  • id1
  • id2
  • id3
  • id4
none

Calculations

No calculations for test 2

Test Description

  • This test contains a simple user profile form.
    * There are nested FIELDSET elements.
    * Each FIELDSET has a legend element.

Test Markup

User Agent Implementation

No user agent implementation information.

HTML Source Code


<div class="wrapper">
   <form action="#" method="post">
   <fieldset id="id1">
      <legend class="formHeading">Profile Settings</legend>
      <p>
         <label for="uid" class="left">User Name</label>
         <input id="uid" type="text">
      </p>
      <p>
         <label for="pwd" class="left">Password</label>
         <input id="pwd" type="password">
      </p>
      <fieldset id="id2" class="inset">
         <legend class="formSubheading">Gender</legend>
         <p>
            <input id="male" type="radio" name="sex" value="male" >
            <label for="male">Male</label>
         </p>
         <p>
            <input id="female" type="radio" name="sex" value="female" >
            <label for="female">Female</label>
         </p>
      </fieldset>
      <fieldset id="id3" class="inset">
         <legend class="formSubheading">Message Options</legend>
         <p>
            <input id="get-pm" type="checkbox" value="getPM" >
            <label for="get-pm">Receive private messages from other users</label>
         </p>
         <p>
            <input id="visible-online" type="checkbox" value="visible" >
            <label for="visible-online">Allow others to see when you are online.</label>
         </p>
         <p>
            <br><label for="sig">Post Signature:</label><br>
            <textarea rows="5" id="sig" style="width: 25em;"></textarea>
         </p>
      </fieldset>
      <fieldset id="id4" class="inset">
         <legend><label for="theme-options" class="formSubheading">Theme Options</label></legend>
      <p>
         <select id="theme-options">
            <option value="default">Default Theme</option>
            <option value="dark">Dark Theme</option>
            <option value="blue">Blue Theme</option>
         </select>
      </p>
      </fieldset>
      <p>
         <input id="submit-bn" class="submitButton" type="button" value="Update Settings" >
      </p>
   </fieldset>
   </form>
</div>

CSS Code


div.wrapper {
  margin: 20px;
  padding: 10px;
  overflow: visible;
  background-color: #faf7f0;
  border: 1px solid #880000;
  -webkit-border-radius: 10px; /* Safari and Chrome rounded corners */
  -moz-border-radius: 10px; /* Firefox rounded corners */
  border-radius: 10px; /* Opera rounded corners */
}

fieldset {
margin: 10px 20px;
width: 40em;
}
fieldset.inset {
   margin: 10px 0;
   width: 21em;
}

.formHeading {
  font-weight: bold;
  font-size: 1.4em;
  padding-bottom: 10px;
}

.formSubheading {
  font-weight: bold;
  font-size: 1em;
  margin: 0;
  padding-bottom: 0;
}

label.left {
   width: 6em;
   float: left;
}
input.submitButton {
  margin: 2px;
}

.focus {
  border: 3px solid #5ea3f1 !important;
}

Javascript Source Code


$(document).ready(function() {

  $('input, textarea, select').focus(function () {
    $(this).addClass('focus');
  }); // end focus handler

  $('input, textarea, select').blur(function () {
    $(this).removeClass('focus');
  }); // end blur handler

}); // end ready