Stay one step ahead of the competition. Evaluate and give feedback on some of the hottest web development tools on the market today. Make your opinion heard! Click Here
Web Forms - The label E
(Page 3 of 9 )
There are two steps to utilizing the
The second step is adding the for attribute to the
For instance, in Method C we wrap the
Perhaps you’ve heard others tell you that you should always add
Creating label/ID relationships allows screen readers to properly read the correct label for each form control—regardless of where each falls within the layout. That’s a good thing. Also, the
An additional benefit to using
For example, if we add a check box option to our form that gives the user the option to “Remember this info,” we can use the
By marking the check box option up this way, we’ve gained two things: Screen readers will read out the form control with the correct label (even though in this case, the label comes after the control), and the target for toggling the check box becomes larger, which now includes the text as well as the check box itself (in most browsers).
Figure 5-5 demonstrates how the form would appear in a browser, with the increased clickable area for the check box highlighted.
Figure 5-5. Example of check box option added with clickable text
Apart from tables and paragraphs, I’d like to show you one last method for marking forms—using a definition list.
The last method we’ll look at in regards to form layout involves the use of a definition list to define label and form control pairs. It’s a somewhat controversial move—skirting the fringe of what a definition list is designed to do. But it’s also a method that’s gaining in widespread use, and one worthy of mentioning in this book.
Further ahead, in Chapter 8, we’ll talk in more detail regarding definition lists—and the fact that they certainly are capable of more uses than most designers are aware of. Using a <dl> to mark up a form is a perfect example.
You’ll notice in the code example that each form label is wrapped in a definition term tag (<dt>) followed by its associated form control wrapped in a definition description tag (<dd>). Doing this creates a pairing of label to form control, which when viewed in a browser without any style applied looks like Figure 5-6.
Figure 5-6. Default form layout using a definition list
By default, most visual browsers indent the <dd> element on its own line. Fantastic. Without adding any additional <p> or <br />tags, we have a readable form layout for those browsing without CSS.
This chapter is from Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm (Apress, 2004, ISBN: 1590593812). Check it out at your favorite bookstore today.
/ 41 
