How to Order Your Form Fields for Improved Efficiency

When building a form for your website know that visitors often use the tab key to move to the next form field. One thing that just drives me nuts, and many others I am sure, is when you hit the tab button you are moved to the wrong location.

What Stops Users

Three things reduce the percentage of getting a form completed: the number of fields, the grouping of form element types, and the time it takes to fill out. The number of fields is an obvious one. An example of grouping is putting all your text boxes one after another followed by drop downs, then by check boxes, and so on. The goal there is to try to keep the users hands on one tool, avoiding switch backs from keyboard to mouse, and then back.

Getting a form filled out quickly is the overall factor, and the third way to improve this is by making the elements as easy to fill out as possible. This means doing things like using just one text box for a social security number instead of three. The other way is making sure the form is ordered correctly so a user can quickly tab through it.

Making sure the tab button works correctly also helps accessibility for other devices as well, like when a user is on a cell phone/PDA.

How to Set the Tab Order on a Form

So here is a basic example on how to set the tab order for a form. In the form you may have several input fields for example.

<form>
I’m field one!
<input type=”text” name=”name” tabindex=”1″ />
Fill me out next
<input type=”text” name=”email” tabindex=”2″ />
Final element
<input type=”text” name=”url” tabindex=”3″ />
</form>

All you have to do is define the tabindex with the numerical order. Easy! Give it a try in a sample form, and when you do, try changing the order of number 2 and 3. Watch how that tab button goes to the right one.