Test Start

Profile Settings


Message Options

Test End

Rule References

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


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

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 () {
  }); // end focus handler

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

}); // end ready