Forms - Summary

We’ve looked at four different ways to mark up the same simple form, noting the pros and cons of each. It’s important to point out that the accessibility features that we added to Methods C and D could, of course, be easily added to the first two methods as well—and those methods would be better because of those added features.

Neither one of the methods that we’ve looked at here are necessarily miles ahead of the others in terms of a “best solution.” But it’s valuable to know your options—and what you can combine from all four to create better forms in your own projects.

Let’s recap the differences between the methods presented.

Method A:

• Visually, it’s a nice, neat way to organize form controls and labels—especially for larger complex forms.
  
• However, using a table for such a simple form seems a bit unnecessary.

Method B:

• Simple markup will degrade nicely in text browsers and small-screened devices.
  
• Visually, just using <br /> tags results in a cramped layout.

Method C:

• Simple markup will degrade nicely in text browsers and small-screened devices.
  
• Allows for labels and controls of different lengths without any “lining up” issues.
  
• Contains an important accessibility feature (that could also be applied to the previous methods).

Method D:

• Structured markup will degrade nicely in text browsers and small-screened devices.
  
• Contains an important accessibility feature (that could also be applied to the previous methods).
  
• Labels and form controls could be placed on the same line or separate lines using CSS.

While you wouldn’t be guilty of web design crimes if you were to use Method A or B, taking what we know that is good from Method C and applying it to the previous examples would be a step in the right direction.

There is also room for improvement on Method C as well, and we’ll take a look at a few additional features we can add in the “Extra credit” section that follows. We’ll also talk about some simple CSS that we can apply to make our form more visually appealing.

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.

For this extra credit session, we’ll discuss the tabindex and accesskey attributes and how they can do wonders to make our form more navigable. We’ll also explore the <fieldset> tag, which can help in organizing form sections. Lastly, we’ll cover CSS as it relates to spicing up our form’s appearance.

A feature that we can easily add to our form is the tabindex attribute. Adding tabindex, and a numerical value, enables users to navigate the focus of form controls with the keyboard (typically using the TAB key). Repeatedly hitting the TAB key will change the focus to the next form control, in an order that we can specify. By default, every interactive element has an implied “tab order,” but using the tabindex attribute takes that ordering away from the browser, putting you in full control.

For instance, let’s add the tabindex attribute to the form controls in our example (Method C):

<form action="/path/to/script" id="thisform" method="post">
  <p><label for="name">Name:</label><br />
  <input type="text" id="name" name="name"tabindex="1"/></p>
  <p><label for="email">Email:</label><br />
  <input type="text" id="email" name="email" tabindex= "2"/> </p>
  <p><input type="checkbox" id="remember" name="remember"
  --> tabindex="3"/>
  <label for="remember">Remember this info?</label></p>   
  <p><input type="submit" value="submit"tabindex="4"/></p>
</form>

Now, when the user tabs through the form, we’ll be ensuring the focus of the cursor follows the exact order we intended: Name:, Email:, Remember this info?, and the submit button.

Using tabindex to set focus order becomes even more useful for complex forms and those where there might be multiple input boxes or other form controls for a single label.

Aside from being dead-simple to implement on our form, we’ll again be helping mobility-impaired users by letting them navigate the form entirely with the keyboard. Rather than grabbing the mouse to enter each form item, the user will be able to tab through each control, in the correct order. Think about those who, for whatever reason, are unable to use both hands to navigate the Web. This will help.

Similar to tabindex, the accesskey attribute is another easily added feature that can be useful for mobility-impaired users—and just darn convenient for others.

For instance, if we add the accesskey attribute to the <label> tag that surrounds the Name: text of our form, when the user presses the key we specify, the focus of the cursor will change to the field that’s associated with the label.

Let’s take a look at the code that’ll make this happen:

  <form action="/path/to/script" id="thisform" method="post">
    <p><label for="name"accesskey="9">Name:</label><br />
    <input type="text" id="name" name="name" tabindex="1" /></p> 
    <p><label for="email">Email:</label><br />
    <input type="text" id="email" name="email" tabindex="2" /></p>
    <p><input type="checkbox" id="remember" name="remember"
    -->tabindex="3" />
    <label for="remember">Remember this info?</label></p>      <p><input type="submit" value="submit" tabindex="4" /></p>
  </form>

Depending on the system, the user will either use the ALT or CTRL key in conjunction with the 9 key that we’ve specified in the markup. Focus will immediately shift to the Name: field in our form.

Adding the accesskey attribute can be especially helpful when used on frequently used forms such as a search box or membership login. Without having to reach for the mouse, users can instantly change focus and start their query or input using only the keyboard.

It’s important to note that, while not all browsers handle accesskey, it’s an added benefit for those that do. For instance, to access the search form field where we’ve added accesskey="9", Windows users would press ALT+9, while Mac users would press COMMAND+9 to shift the focus to the search field.

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: Styling forms >>
 

More Web Standards Articles
More By Apress Publishing

Comments On: Forms

>>> Be the FIRST to comment on this article!