/html/global-attributes/tabindex:> Tab-навигация_
Глобальный атрибут tabindex
Синтаксис
(X)HTML
<[элемент] tabindex="[значение]"> ... </[элемент]>
Описание
Глобальный атрибут / параметр tabindex
(от англ. "tab index" ‒ «указатель закладок») устанавливает порядок перехода между некоторыми элементами (a
, button
, input
и другие), осуществляемый при помощи клавиши «Tab».
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Верс. | Раздел | |
---|---|---|
HTML | ||
2.0 | ||
3.2 | ||
4.01 | 17.11.1 Tabbing navigation DTD: Transitional
Strict
Frameset
|
Перевод |
5.0 | 7.4.1 Sequential focus navigation and the tabindex attribute | Перевод |
5.1 | 5.4.3. The tabindex attribute | |
XHTML | ||
1.0 | Extensible HyperText Markup Language DTD: Transitional
Strict
Frameset
|
|
1.1 | Extensible HyperText Markup Language |
Значения
В качестве значения задаётся любое целое число. При этом, если:
- значение < 0, то такой объект не задействуется при переходах (от объекта к объекту).
- значение = 0, то такой объект должен быть задействован в последнюю очередь.
- значение > 0, то такие объекты задействуются в порядке очереди ‒ от меньшего значения к большему.
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Глобальный параметр tabindex</title>
</head>
<body>
<h1>Пример с параметром "tabindex"</h1>
<h2>Тег "button"</h2>
<p><button tabindex="-1">Кнопка 1</button> <button tabindex="0">Кнопка 2</button></p>
<h2>Тег "a"</h2>
<p><a href="http://programmerbook.ru" tabindex="2">Ссылка 1</a>
<a href="http://programmerbook.ru" tabindex="3">Ссылка 2</a></p>
<h2>Тег "input"</h2>
<p>Поле ввода:<input tabindex="1"></p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Глобальный параметр tabindex</title>
</head>
<body>
<h1>Пример с параметром "tabindex"</h1>
<h2>Тег "button"</h2>
<p><button tabindex="-1">Кнопка 1</button> <button tabindex="0">Кнопка 2</button></p>
<h2>Тег "a"</h2>
<p><a href="http://programmerbook.ru" tabindex="2">Ссылка 1</a>
<a href="http://programmerbook.ru" tabindex="3">Ссылка 2</a></p>
<h2>Тег "input"</h2>
<p>Поле ввода:<input tabindex="1"></p>
</body>
</html>
Глобальный параметр tabindex