---

What is focus

When a web page featuring several links or several form controls loads, you may have noticed that you are able to use your Tab key to move between those elements (or Shift+Tab to move backward through elements). As you move between them, the web browser tends to add some type of border or highlighting to that element (be it a link or a form control). This is known as focus .

If you want to control the order in which elements can gain focus, you can use the tabindex attribute to give that element a number between 0 and 32767, which becomes part of the tabbing order. Every time the user presses the Tab key, the focus moves to the element with the next highest tabbing order (and again, Shift+Tab moves focus in reverse order).

The following elements can carry a tabindex attribute:

<a> <area> <button> <input> <object> <select> <textarea>

<form action="http://www.atnyla.com/tabbing.php" method="get" name="frmTabExample" >
	<input type="checkbox" name="chkNumber" value="1" tabindex="3"> Semester One <br>
	<input type="checkbox" name="chkNumber" value="2" tabindex="7"> Semester Two <br>
	<input type="checkbox" name="chkNumber" value="3" tabindex="4"> Semester Three <br>
	<input type="checkbox" name="chkNumber" value="4" tabindex="1"> Semester Four <br>
	<input type="checkbox" name="chkNumber" value="5" tabindex="9"> Semester Five <br>
	<input type="checkbox" name="chkNumber" value="6" tabindex="6"> Semester Six <br>
	<input type="checkbox" name="chkNumber" value="7" tabindex="10"> Semester Seven <br>
	<input type="checkbox" name="chkNumber" value="8" tabindex="2"> Semester Eight <br>
	<input type="checkbox" name="chkNumber" value="9" tabindex="8"> SemesterNine <br>
	<input type="checkbox" name="chkNumber" value="10" tabindex="5"> Semester Ten <br>
	<input type="submit" value="Submit">
</form>

In this example, the checkboxes receive focus in the following order: 4, 8, 1, 3, 10, 6, 2, 9, 5, 7

Elements that could gain focus but do not have a tabindex attribute are automatically given a value of 0 ; therefore, when you specify a tabindex value, it should be 1 or higher, rather than 0 .

If two elements have the same value for a tabindex attribute, they will be navigated in the order in which they appear in the document.

Live Preview

---