HTML global attribute tabindex








The tabindex attribute controls the tab order in which the Tab key moves the focus through the HTML page, overriding the default order.

Syntax

<element tabindex="number">

Attribute Values

number
tab index

Browser compatibility

tabindex Yes Yes Yes Yes Yes




Example

<!DOCTYPE HTML>
<html>
<body>
    <form>
        <label>Name:  <input type="text"  name="name" tabindex="1"/></label>
        <p/>
        <label>City:  <input type="text"  name="city" tabindex="-1"/></label>
        </p>
        <label>Country: <input type="text"  name="country" tabindex="2"/></label>
        </p>
        <input type="submit" tabindex="3"/>
    </form>
</body><!--from  ww w.jav  a 2  s  .  c o m-->
</html>

Click to view the demo

The first element that will be selected is the one that has the tabindex value of 1. When the user presses the Tab key, the element with a tabindex of 2 will be selected, and so on.

A tabindex value of -1 ensures that an element will not be selected when the user presses the Tab key.