At this point in our series of tutorials on form fields we have finished looking at most of the different fields that can be added into a form and the attributes that must be used with each of them in order for them to be able to function correctly as a part of the form. It is now time to move on and look at some of the optional attributes that can be added to the fields within the form that modify the wat that those form fields work.

The tabindex attribute is used to define the order in which the form fields should be processed. The normal processing sequence if this attribute is not supplied is to move through the fields in the order that they appear in the page source. You can see this for yourself in any form that contains more than one field by pressing the tab key on your keyboard. Each time that you press the tab key the cursor that marks which field currently has the focus and will accept your keyboard input will move to the next field.

The tabindex attribute changes this order so that tab can jump about the form in whatever order you require. To make the change simply add a tabindex attribute to all of the fields within your form and then assign them values that reflect the order in which they are to be accessed when the tab key is used.

<input type="text" size="10" id="sz" name="sz" value="size"
tabindex="1" />
<input type="text" size="10" id="desc" name="desc" value="description"
tabindex="2" />

In this particular example the two fields have tabindex values assigned that correspond to the order that they would be normally accessed in anyway and so the tabindex attributes are optional.

Reversing the order of the tabindex values would result in the two fields being accessed in the reverse order when someone is entering data into the form and using the tab key to move between fields. Doing this with text input fields would therefore be potentially confusing to the person filling out the form. You should always consider your visitors when deciding whether to use tabindex to change the order the fields in your form are processed in to make sure that doing so doesn't lead to confusion.

One examples of where using tabindex to change the order of processing would be where you have a form within a table in multiple columns where you want the form to be filled out down each column in turn (the default order would be across each row).


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow