HTML 4 » the TABINDEX attribute

The TABINDEX attribute is a really nifty and useful feature of HTML 4 and worth using to solve a problem that a lot of people don't really acknowledge they have.

What's the problem? To get it first hand, try filling out this form by using the TAB key to move between text fields.

You got it, right? When you TAB through this form, you select the "GO!" button before the second form field. This is because the person whoever made this form wasn't paying attention to what order the form elements appeared in the HTML, and placed the "GO!" button before the first and second form field.

(This often happens when the author is using a WYSIWYG HTML editor and doesn't proof their code before they roll it out.)

As you can see, the "GO!" button appears on line 9 of the HTML, with 2 other text boxes below it (lines 15 and 21).

<form>
  <table border="0" bordercolor="white" cellspacing="0" cellpadding="2">
    <tr> 
      <td>What's your first name?</td>
       <td> 
         <input type="text">
       </td>
       <td rowspan="3" align="right" valign="bottom"> 
         <input type="button" value="GO!">
       </td>
     </tr>
     <tr> 
       <td>Your middle initial?</td>
       <td> 
         <input type="text" maxlength="1" size="1">
       </td>
     </tr>
     <tr> 
       <td>Your last name?</td>
       <td> 
         <input type="text">
       </td>
     </tr>
   </table>
</form>

This problem is easy to fix without tampering with carefully tuned code using HTML 4's TABINDEX property. Check out the revised form below:

Here's the source, with my changes in red.

<form>
  <table border="0" bordercolor="white" cellspacing="0" cellpadding="2">
    <tr> 
      <td>What's your first name?</td>
       <td> 
         <input type="text" TABINDEX="1">
       </td>
       <td rowspan="3" align="right" valign="bottom"> 
         <input type="button" name="Button" value="GO!" TABINDEX="4">
       </td>
     </tr>
     <tr> 
       <td>Your middle initial?</td>
       <td> 
         <input type="text" maxlength="1" size="1" TABINDEX="2">
       </td>
     </tr>
     <tr> 
       <td>Your last name?</td>
       <td> 
         <input type="text" TABINDEX="3">
       </td>
     </tr>
   </table>
</form>

While i love writing standards compliant code, it doesn't work in all browsers all the time. Pages using the TABINDEX property will only behave as they are supposed to in Internet Explorer 4 or higher, or in Netscape 6 or Mozilla. It doesn't change anything in Netscape versions prior to 6.

Also, this method can be used with all page elements that are selected using the TAB key, including <a> tags.

In case you couldn't tell, i think this is pretty cool. Hope you do too :)

»»» jellspace «««