WEB STANDARDS

Web Forms

There are many ways to mark up a form, including using a table or the label tag. Take a look at these methods and tips to ensure your forms are structured so they benefit the user and the site owner. Also covered are some CSS techniques to customize the forms. (From the book Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm, from Apress, 2004, ISBN: 1590593812.)

Author Info:

By: Apress Publishing

Poor Best

Rating:

/ 56

August 23, 2004

TABLE OF CONTENTS:

· Defining Style

· tabindex Attribute

· Styling Forms

· Using label

· Use fieldset to Group Form Sections

· Three-dimensional legend

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 key board (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.

Why tabindex?

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.

accesskey for frequented forms

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 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 ALTor 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.

Easily accessed search

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.

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.