The tabindex attribute

The tabindex attribute sets the order in which focus is received when navigating between elements using the Tab key.

By pressing this key you can activate some page elements sequentially (links and form elements). Active elements will receive input focus.

For input fields of the type input and textarea the focus will be expressed in the fact that the cursor will blink in the field and it will be possible to enter text in it, for links and other elements it will be highlighted in some way (underlining, dotted border, etc., depending on the browser).

If the element was not visible on the page at the time of receiving focus (due to scrolling), the page will scroll to this element.

If the elements do not have the tabindex attribute or it has the value 0, then navigating through them with the Tab key will proceed in the order in which the elements appear in the HTML code.

If there are elements on the page that are assigned tabindex, then at first the transition will go through them, starting from the smaller value of the attribute tabindex (the smallest can be one) and so on in ascending order of the attribute values, and when such elements end, the transition will go through those elements that are not assigned tabindex or have a value of 0.

The attribute value is an integer from 1 to infinity. If some numbers are missing, nothing bad will happen (for example, if there is no number 2, then the focus will first go to the element with tabindex equal to 1, and then to the element with tabindex equal to 3).

If there is an element in focus on the page when the Tab key is pressed (focus could be obtained not only by pressing Tab, but also by clicking the element with the mouse or by the autofocus attribute), then the next press of the Tab key will result in the focus being given to the next element in the order after the one in focus (for example, if the element with tabindex 3 is currently in focus, then the next element with tabindex will receive focus. 4).

If an input field has the disabled attribute set, it will be ignored by key navigations via Tab, even if the field has the tabindex attribute set.

The tabindex attribute applies to tags a, input, textarea, button, select, area.

Example

Let's set the tabindex attribute to the inputs. Press the Tab key in sequence and you will see how the input focus will move from the first input to the fourth, and then follow the links from the beginning of the page (since there are no more elements with the tabindex attribute set):

<input type="text" tabindex="3" placeholder="number: 3">
<input type="text" tabindex="1" placeholder="number: 1">
<input type="text" tabindex="2" placeholder="number: 2">
<input type="text" tabindex="4" placeholder="number: 4">

The tabindex attribute

Example

See also