HTML forms are a pain. They are a pain to build, they are a pain to get working, and they're a pain to fill out. As designers and developers, we just have to deal with the first two, but the last issue we can affect so our readers won't feel that way. If a form is too hard to use, most people just won't do it. The following 13 tips are easy to implement on your HTML forms and will make them more usable so you'll get answers to your forms.



XHTML Tags

1. The Label Tag is one of the easiest ways to make your Web forms more usable. Labels make the form more accessible, but they also make them easier to use because of how most browsers implement them.

When you assign a label to a form field, it makes that entire label clickable. And when it's clicked on, the focus is moved to the form field that is labeled. You can label a form field by surrounding the label text and form field with the label tag. Or you can use the attribute "for" to assign a label anywhere on the page to a form field.

First Name

Last Name

But one of the reasons people don't realize what the label tag does is because most browsers don't provide any visual input to tell you even that there's a label there. But with the CSS style property cursor, you can easily set up a hand cursor on your labels - which instantly tells people that the label text is clickable.

label { cursor: hand; }

2. Fieldsets and Legends are a great way to make your forms more usable, because they help group similar portions of your form together. Most people can't process more than 5 to 7 items at a time, so if your form is longer than that, you'll want to group it into sections. The fieldset groups your form fields for you. You can create a fieldset without a legend, but the legend adds even more usability.

Phone Numbers

Home Phone



Work Phone



Cell Phone

Just like with labels, fieldsets and legends add more hooks to style your form. Most browsers display a fieldset with a border around it and the legend inset in the border. But with styles you can modify your form to look more like your Web site styles.

3. The Optgroup Tag works with drop-down or select lists the same way that fieldset works with entire forms. You surround your option elements with the optgroup element. This adds headlines and groupings to your options list, and makes them easier to understand and use - especially for long lists.

A basic options group list looks like this in XHTML:

Name your favorite pet





dog

cat

rabbit

horse





iguana

snake







And just like the fieldset, you can style your optgroup to provide color coding or other visual cues to the different sections. Remember that some browsers display the optgroup labels in bold text, others with a dark background color, so be sure to test in multiple browsers.

4. Tabindex provides a very useful function to your Web forms. Use the tabindex attribute to help customers using the keyboard to navigate to navigate more quickly through your form.

In this simple form, the tabbed order is slightly different from the order that the items are listed on the page. While this example is somewhat silly, if you have items in mulitple columns in your form, it can be difficult to know which field is next in the order. With the tabindex field your readers get to all of them.

Field 1



Field 2



Field 4



Note: this field is last

Field 3



With those XHTML tags, your Web forms will be much more usable than forms that use the more basic tags. The next 4 tips look at CSS to help improve your form usability.