HTML tabIndex property - Setting keyboard browsing order

Ever wondered whether you can customize the tab order on your HTML page?

By tab order I just mean the order in which the input elements get focused when a user hits the Tab key on the keyboard. It's a very quick way to navigate a web page.

Normally, the order gets decided depending on the order the HTML elements are written in source code. However, you can customize that for better User Experience, just set the tabIndex HTML property, for example:

<input class="span5" tabindex="1" name="name" id="name" type="text">

<textarea class="span5" rows="5" tabindex="5" name="text" id="text"></textarea>

<input tabindex="-1" id="foo" name="bar" type="text">

<input tabindex="10" name="code" id="code" type="text">

In this example, the elements whose tabIndex are 1, 5 and 10 will be browsed in this order when users hit their Tab key.

The #foo text input will not be browsed at all, because I've assigned a tabIndex of -1 to it. You can do this when you don't want an element to be focusable via keyboard browsing.

More info here