Test 23 - Form control IDs are unique

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

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;
}
button.submitButton {
  margin: 2px;
}

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

$(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