Home arrow Web Standards arrow Page 2 - Forms


Forms play an integral role on the Internet in allowing users to communicate and interact with websites. Forms are an important way for website owners to collect information from their visitors. There are many ways to handle forms markup -- but the best way is the one that will benefit both the user and the site owner. This article was excerpted from the book Web Standards Solutions The Markup and Style Handbook, written by Dan Cederholm (Apress, 2004; ISBN 1590593812).

Author Info:
By: Apress Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 19
March 09, 2005
  1. · Forms
  2. · Method C: Simple and more accessible
  3. · Method D: Defining a form
  4. · Summary
  5. · Styling forms
  6. · No need to be redundant

print this article

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>

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>

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>

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.

blog comments powered by Disqus

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials