Test Start

Profile Settings

User Name

Password

Gender:

Male

Female

Message Options:

Receive private messages from other users

Allow others to see when you are online.


Post Signature:

Theme Options:

Test End

Rule References

Rule Pass IDs Fail IDs
Rule 80 none
  • id1
  • id2
  • id3
  • id4
  • id5
  • id6
  • id7
  • id8

Calculations

No calculations for test 18

Test Description

  • This test contains a simple form with labeled controls.
    * The labels have no content.

Test Markup

User Agent Implementation

No user agent implementation information.

HTML Source Code


<div class="wrapper">
   <form action="#" method="post">
   <fieldset id="fs1">
      <legend class="formHeading">Profile Settings</legend>
      <p>
         <div class="label-wrapper"><label id="id1" for="uname"></label>User Name</div>
         <input id="uname" type="text" />
      </p>
      <p>
         <div class="label-wrapper"><label id="id2" for="pwd"></label>Password</div>
         <input id="pwd" type="password" />
      </p>
      <h3>Gender:</h3>
      <p>
         <input id="male" type="radio" name="sex" value="male" />
         <label id="id3" for="male"></label>Male
      </p>
      <p>
         <input id="female" type="radio" name="sex" value="female" />
         <label id="id4" for="female"></label>Female
      </p>
      <h3>Message Options:</h3>
      <p>
         <input id="get-pm" type="checkbox" value="getPM" />
         <label id="id5" for="get-pm"></label>Receive private messages from other users
      </p>
      <p>
         <input id="visible-online" type="checkbox" value="visible" />
         <label id="id6" for="visible-online"></label>Allow others to see when you are online.
      </p>
      <p>
         <br><label id="id7" for="sig"></label>Post Signature:<br>
         <textarea rows="5" id="sig" style="width: 25em;"></textarea>
      </p>
      <p>
         <div class="formSubheading"><label id="id8" for="theme-options"></label>Theme Options:</div>
      </p>
      <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>
      <p>
         <input id="submit-bn" class="submitButton" type="submit" onclick="return false" 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;
}

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

.formSubheading {
  font-weight: bold;
  font-size: 1.17em;
  margin: 0;
  padding-bottom: 0;
}
div.label-wrapper {
   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