All elements (except hidden elements) in the HTML form are part of the form’s tab order. When the user presses the Tab key, the browser shifts the input focus from element to element in order the elements appear in the HTML code. However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using tabindex attribute.
Have a look at the example:
<html>
<head>
<title>Controlling TAB Order</title>
</head>
<body>
<form>
Field 1 (first tab selection):
<input type="text" name="field1" tabindex=1 /><br />
Field 2 (third tab selection):
<input type="text" name="field2" tabindex=3 /><br />
Field 3 (second tab selection):
<input type="text" name="field3" tabindex=2 /><br />
</form>
</body>
</html>The tabbing order begins with elements with explicit tabindex values, starting from the lowest to the highest numbers. Same-valued tags get tab-selected in the order in which they appear in the document. To exclude an element from the tab order, set the value of tabindex to 0. In that case the element is skipped when the user tabs around the form.
The tabindex attribute can also be used with <a>, <textarea>, <select>, and <button> elements.
