Зміна фокуса Tab в HTML

Вивчаємо атрибут tabindex для керування порядком переходу між елементами форми за допомогою клавіші Tab.

Зміна фокуса Tab в HTML

За замовчуванням браузер переводить фокус між елементами форми у порядку їх розташування в HTML-коді. Атрибут tabindex дозволяє змінити цей порядок.

tabindex задає порядок переходу клавішею Tab.
Чим менше число tabindex, тим раніше елемент отримає фокус.
tabindex="1" отримає фокус перед tabindex="2".
tabindex можна використовувати для input, button, посилань та інших елементів.

Приклад роботи tabindex

Є інпути, але їхній порядок у HTML відрізняється від потрібного порядку переходу.

<input value="3">
<input value="4">
<input value="1">
<input value="2">
<input value="5">

Виправляємо порядок через tabindex

<input value="3" tabindex="3">

<input value="4" tabindex="4">

<input value="1" tabindex="1">

<input value="2" tabindex="2">

<input value="5" tabindex="5">

❗ Важливо:

tabindex допомагає створювати зручну навігацію без миші. Але не варто без потреби змінювати стандартний порядок — неправильний tabindex може заплутати користувача.

Практичне завдання

📌 Завдання:

№1. Є п'ять input у неправильному порядку.
№2. Додайте tabindex кожному елементу.
№3. Зробіть порядок переходу таким самим, як значення value.

<!-- Початковий код -->

<input value="3">

<input value="4">

<input value="1">

<input value="2">

<input value="5">

💡 Показати підказку

Значення value підказує, яке число потрібно поставити у tabindex.

✅ Показати відповідь

<input value="3" tabindex="3">

<input value="4" tabindex="4">

<input value="1" tabindex="1">

<input value="2" tabindex="2">

<input value="5" tabindex="5">