# Атрибут tabindex

Атрибут `tabindex` устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши `Tab`.

Нажимая эту клавишу можно активировать последовательно некоторые элементы страницы (ссылки и элементы форм). Активные элементы будут получать фокус ввода.

Для полей ввода типа `input` и `textarea` фокус будет выражаться в том, что в поле будет моргать курсор и в него можно будет вводить текст, для ссылок и других элементов это будет выделение каким-то образом (подчеркивание, обведение пунктирной границей и т.п., зависит от браузера).

Чтобы поменять стили по умолчанию для элемента в фокусе смотрите псевдокласс focus.

Если в момент получения фокуса элемент не был виден на странице (из-за прокрутки), то страница прокрутится к этому элементу.

Если элементам не задан атрибут `tabindex` или он имеет значение `0`, то переход по ним клавишей Tab будет идти в порядке следования элементов в HTML коде.

Если на странице есть элементы, которым задан `tabindex`, то вначале переход будет идти по ним, начиная от меньшего значения атрибута `tabindex` (самым маленьким может быть единица) и так далее по возрастанию значений атрибута, а когда такие элементы закончатся - переход пойдет по тем элементам, которым не задан `tabindex` или он имеет значение `0`.

Значением атрибута служат целые числа от `1` до бесконечности. Если какие-то номера пропущены - ничего страшного не случится (к примеру, если нет номера `2`, то сначала фокус попадет на элемент с `tabindex`, равным `1`, а потом на элемент с `tabindex`, равным 3).

Если на странице в момент нажатия клавиши `Tab` есть элемент в фокусе (фокус мог быть получен не только нажатием `Tab`, но и кликом мышкой по элементу или атрибутом `autofocus`), то следующее нажатие клавиши `Tab` приведет к тому, что фокус получит следующий по порядку элемент после того, который в фокусе (к примеру, если сейчас в фокусе элемент с `tabindex` `3`, то следующим получит фокус элемент с `tabindex` 4).

Если полю ввода задан атрибут `disabled`, то оно будет проигнорировано переходами через клавишу Tab, даже если этому полю задан атрибут `tabindex`.

Атрибут `tabindex` применяется к тегам `a`, `input`, `textarea`, `button`, `select`, area.

## Пример

Давайте инпутам зададим атрибут `tabindex`. Понажимайте последовательно клавишу `Tab` и вы увидите, как фокус ввода будет переходить от первого инпута к четвертому, а потом пойдет по ссылкам с начала страницы (так как больше элементов с заданным атрибутом `tabindex` нет):

`<input type="text" tabindex="3" placeholder="Номер элемента: 3"> <input type="text" tabindex="1" placeholder="Номер элемента: 1"> <input type="text" tabindex="2" placeholder="Номер элемента: 2"> <input type="text" tabindex="4" placeholder="Номер элемента: 4">`

:

←→
↑