According to various HTML documentation: past, present, and future, the title attribute:

Offers advisory information about the element for which it is set. HTML 4

Offers advisory information. Some Web browsers will display this information as tooltips. Assistive technologies may make this information available to users as additional information about the element. XHTML

Represents advisory information for the element, such as would be appropriate for a tooltip. HTML5

The most common behavior in IE, Firefox, Opera, Chrome, and Safari (for Windows) is for a pale tooltip to appear when the user hovers over the titled element. Rumor has it that screen readers can read the title attribute aloud. JavaScript can retreive the text entered into the title attribute and use it elsewhere–on enhanced tooltips, for example.

Sometimes it’s very clear how to use the title attribute…in an abbr (abbreviation) the title should be used to give the full text of the abbreviation. In a dfn (definition) the title should be used to give the definition. But one place it’s not as clear–-and, yet, one of the places the title has incredible potential-–is within forms. title attributes can be used on a form, fieldset, legend, label, input, textarea, or option (but not on a select).

This has bearing on questions of how to lay out and style a form. For example, if you make use of implicit label association by wrapping an input in its label, hovering over the label or the input will show the title.

<label for="textinput1" title="Information about this text input">
Text Input: <input type="text" name="textinput1" id="textinput1" /></label>

This allows you to write one assistive title for a form form field that will appear on the label and the field as well as on any other inline element you place within the label, such as one of those little (i) icons. There are a few advantages to this–it’s cleaner in the markup than creating different or repeating titles for the label and input and I imagine that it might cut down on redundant reading by overly literal screen readers.

However, as my last post mentions, it is somewhat easier to style forms if the input is not wrapped in the label. Getting a consistent label width in a form using label wrapped inputs requires either extraneous spans or CSS gymnastics.

This led me to a question…is it appropriate to title the label and input with the same information? In practice, I believe it is. Would there be benefits to titling each individually, however? The label’s title would define the label in more detail. The input’s title would offer details about what to input.

<label title="Your text input label definition" for="textinput2">Text Input:</label>
<input type="text" id="textinput2" name="textinput2" title="Enter numbers and letters here for text input" />

Form markup is complicated to write and read.  The addition of titles make it even more complicated to read.  I am personally dedicated to the use of titles in forms due to the vast potential to increase accessibility and enhance usability with JavaScript without adding extra meaningless elements.

I have trouble deciding what the best practice would be for adding titles to forms, unfortunately.  I can see arguments for both!