Forms - Method C: Simple and more accessible
(Page 2 of 6 )
<form action="/path/to/script" id="thisform" method="post">
<p><label for="name">Name:</label><br />
<input type="text" id="name" name="name" /></p>
<p><label for="email">Email:</label><br />
<input type="text" id="email" name="email" /></p>
<p><input type="submit" value="submit" /></p>
</form>
I like Method C for several reasons. First off, for a simple form like this example, I find it convenient to contain each label and control in its own paragraph. When viewed unstyled, the default spacing of a paragraph should be enough to set the items apart in a readable way. Later, we could control precise spacing with CSS on <p> tags that are contained within our form.
We’ve even gone a step further and have given this form a unique, but boring, id="thisform". So, that precise spacing I was just referring to could go something like this:
#thisform p {
margin: 6px 0;
}
Essentially, we’re saying that all <p> tags within this particular form should have top and bottom margins of 6 pixels—overriding the default margins that the browser imposes on paragraphs in the absence of any styling.
Another difference that Method C has over the previous two is that while each group (label and field) are wrapped in <p> tags, a <br />
puts each on its own line. Using a <br /> to separate the items gets around the issue of fields not lining up perfectly due to text labels of different lengths.
Figure 5-4 shows how Method C would appear in a visual browser, with the CSS applied to each <p> tag as mentioned earlier.
Figure 5-4. Method C as viewed in a browser, with CSS applied to <p> tags
Aside from the visual aspects of Method C, let’s take a look at the most important advantages it has: in particular, an accessibility improvement.
The <label> element There are two steps to utilizing the <label> element for making your forms more accessible, and both are in place in Method C. The first step is to use <label> tags to associate the label text with its corresponding form control, whether it be a text field, text area, radio button, check box, etc. Method C uses <label> on the “Name:” and “Email:” headers to couple it with text input boxes that will contain that information.
The second step is adding the for attribute to the <label> tag as well as a matching id attribute to the form control it belongs to.
For instance, in Method C we wrap the <label> tag around Name: with the value of the for attribute that matches the value of the id for the text field that follows.
<form action="/path/to/script" id="thisform" method="post">
<p><label for="name">Name:</label> <br />
input type="text" id="name" name="name" /></p>
<p><label for="email">Email:</label><br />
<input type="text" id="email" name="email" /></p>
<p><input type="submit" value="submit" /></p>
</form>
Why <label>?
Perhaps you’ve heard others tell you that you should always add <label> tags to your forms. The important question to ask (always) is why you should use <label> tags.
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 <label> tag was created to mark up form labels, and by utilizing it we’re adding structure to the form by adding meaning to these components.
An additional benefit to using <label> tags when dealing with radio button or check box controls is that most browsers will toggle the control on or off when the user clicks the text contained within the <label>. This in turn creates a larger clickable area for the control, making it easier for mobility-impaired users to interact with the form (Mark Pilgrim, “Dive Into Accessibility,” http://diveintoaccessibility.org/ day_28_labeling_form_elements.html).
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 <label> tag like this:
<form action="/path/to/script" id="thisform" method="post">
<p><label for="name">Name:</label><br />
<input type="text" id="name" name="name" /></p>
<p><label for="email">Email:</label><br />
<input type="text" id="email" name="email" /></p>
<p><input type="checkbox" id="remember" name="remember" />
<label for="remember">Remember this info?</label></p>
<p><input type="submit" value="submit" /></p>
</form>
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.
 This article is excerpted from Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm (Apress, 2004; ISBN 1590593812). Check it out at your favorite bookstore today. Buy this book now. |
Next: Method D: Defining a form >>
More Web Standards Articles
More By Apress Publishing
/ 14 
