Resource Guide To - Website Development & Design

Index 2:  Creating Forms - Everything About Forms

 

Form Tab Order

Making a form attractive isn't enough to make it usable. You need to make it easy to navigator.

In this day and age when mice are everywhere, it's hard to believe there was a time when the chief mode of moving around onscreen was keyboard-based, using the arrow and tab keys.

Since many computer users have always used a mouse, they often don't realize they can quickly move between fields in a form using the Tab key on their keyboard. For those who touch type, this kind of motion is quick and easy. Unless, of course, you forgot to build it into your forms.

All of the elements in a form are linked together in an order known as the tabbing order. If you do not specify the tabbing order, it defaults to the order in which the elements were created in the form. Given the difficulties involved in laying out an HTML form, it is highly unlikely that all of your form elements appear in the HTML source the same way you would expect the user to access them. Luckily, HTML 4.0 has come the rescue. HTML 4.0 tab order.

HTML 4.0 tab order

All of the form elements in HTML 4.0 honor the TABINDEX attribute. The value of this attribute is a value indicating the position of the element in the form tabbing order. When the user initially displays a form, the item with a TABINDEX of 1, is initially given input focus. When the user presses the Tab key, focus shifts to the second item, and so forth:

<FORM>
  <INPUT TYPE="text" NAME="first_name" ID="fname" TABINDEX="1">
  <INPUT TYPE="text" NAME="last_name" ID="lname" TABINDEX="2">
  <INPUT TYPE="text" NAME="address_1" ID="add1" TABINDEX="3">
  <INPUT TYPE="text" NAME="address_2" ID="add2" TABINDEX="4">
  <INPUT TYPE="text" NAME="city" ID="city" TABINDEX="5">
  <INPUT TYPE="text" NAME="state_prov" ID="statep" TABINDEX="6">
  <INPUT TYPE="text" NAME="zip_pc" ID="zippc" TABINDEX="7">
</FORM>

If two items somehow get the same value for TABINDEX, the one appearing first in the code is given focus first, followed by those appearing later in the form. In general, you should have thought through the tab order enough to ensure that every form element has a unique value for TABINDEX. It is possible to remove an item from the tabbing order by setting its TABINDEX to 0. Regardless of its position within the document, an element with TABINDEX="0" will never be given focus when the user presses the Tab key.

Tabbing with Internet Explorer

Tabbing with Internet Explorer the TABINDEX attribute only works with HTML 4.0- compliant browsers. The ability to control the tabbing order was supported by earlier versions of Internet Explorer.

As you might expect, it is not compatible with the version that has emerged with HTML 4.0. Internet Explorer uses two attributes for tab ordering: TABORDER and NOTAB.

The TABORDER attribute behaves just like the TABINDEX attribute, while using NOTAB is just like saying TABINDEX="0". Interestingly, Internet Explorer actually supported the TABINDEX attribute in earlier versions.

If you want to add tab ordering to your forms now, use the TABORDER and NOTAB tags so IE users can take advantage of this feature. You can include the TABINDEX attribute as well. That way, your forms will work with HTML 4.0- compliant browsers. If you have a copy of IE, experiment with tab ordering.

 << BACK

Home | Website Creation | Site Promotion | Contact Us | About Ecommerce