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
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" />
I have trouble deciding what the best practice would be for adding titles to forms, unfortunately. I can see arguments for both!