Test 22 - Input, select, textarea, and button title attribute does not have content

Test Start

Test End

Rule References

Rule	Pass IDs	Fail IDs
Rule 82	none	id1 id2 id3 id4 id5 id6 id7 id8 id9

Calculations

No calculations for test 22

Test Description

This test contains a simple form with controls containing the title attribute.
* The title attribute has no content.
* For the purposes of the test, the input[type=submit] button has been replaced with a button element.

Test Markup

HTML4: button[title]
HTML4: input[title]
HTML4: select[title]
HTML4: textarea[title]

User Agent Implementation

No user agent implementation information.

HTML Source Code

<div class="wrapper">
   <form action="#" method="post">
   <fieldset>
      <legend class="formHeading">Profile Settings 2</legend>
      <p>
         <div class="label-wrapper">User Name</div>
         <input id="id1" type="text" title="" >
      </p>
      <p>
         <div class="label-wrapper">Password</div>
         <input id="id2" type="password" title="" >
      </p>
      <p>
      <h3>Gender:</h3>
       <p>
         <input id="id3" type="radio" name="sex" value="male" title="" >
         Male
      </p>
      <p>
         <input id="id4" type="radio" name="sex" value="female" title="" >
         Female
      </p>
      <h3>Message Options:</h3>
       <p>
         <input id="id5" type="checkbox" value="getPM" title="">
         Receive private messages from other users
      </p>
      <p>
         <input id="id6" type="checkbox" value="visible" title="">
         Allow others to see when you are online.
      </p>
      <p>
         <br >Post Signature:<br >
         <textarea rows="5" id="id7" style="width: 25em;" title=""></textarea>
      </p>
      <h3>Theme Options:</h3>
      <p>
      <select id="id8" title="">
         <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" title="">Update Settings</button>
      </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: 1em;
  margin: 0;
  padding-bottom: 0;
}
div.label-wrapper {
   width: 6em;
   float: left;
}
button.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

OpenAjax Links