Quick Tips for Forms

A static web page's arrangement of text is not as crucial as it is for a dynamic page that collects information from the user. If you want to collect the correct information from each input box, you have to pay attention to the layout and accessibility markup of your pages.

General Rules

Text labels generally go in front of an input box.

If you use a table to align labels and input boxes, the text should be in the cell before, or in the actual cell.

If you use radio buttons or checkboxes, the labels come after the controls.

If you change the order of any of the above, you must use label tags surrounding the text and input control for clarity. Some find it easier to use the label tag all the time than keep the rules memorized.

Other Considerations

Many forms use javascript to validate form data. For instance, a script may verify the email field has an “@” symbol. Don't assume the javascript will be turned on, and be aware some assistive devices do not allow javascript.

As an alternate technique for labeling, you can locate form directions in an input box. For instance, place the word “Search” inside an input box.

Use the tabindex attribute to control how the cursor moves through your form when tabbing through the document.

Sample Code