Переход между полями с помощью табуляции
При достаточно большом количестве полей формы, которые необходимо заполнить, переходить между ними с помощью курсора мыши становится неудобно. При этом требуется навести курсор на соответствующее поле, нажать кнопку мыши, и только после этого вводить нужное значение. Как альтернатива, используется клавиша , которая позволяет быстро переключать фокус с одного поля на другое. Атрибут tabindex определяет последовательность перехода между полями при нажатии на .
Фокусом называется активность поля, иными словами, поле доступно для того, чтобы в него вводили информацию или использовали какое другое действие. Например, кнопки, флажки, переключатели можно активизировать с помощью пробела.
Следующие элементы формы могут иметь атрибут tabindex: <button>, <input>, <select>, <textarea>. В качестве значения принимается число, которое задаёт шаг перехода. Так, номер 1 означает, что это поле первое получит фокус, номер 2 будет идти следующим и т.д. В примере 1 показано применение tabindex когда поля формы размещаются в ячейках таблицы. Если значение tabindex не указано, то по умолчанию переход по элементам формы происходит так, как они расположены в коде HTML, т.е. сверху вниз.
Пример 1. Использование tabindex
HTML5IE 9+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Порядок полей в форме</title>
<style>
fieldset {
width: 200px; /* Ширина */
padding: 0 10px; /* Поля */
}
fieldset:nth-child(odd) {
float: left; /* Обтекание для всех нечётных элементов */
}
</style>
</head>
<body>
<form>
<fieldset>
<p>Имя:</p>
<p><input name="name" tabindex="1"></p>
</fieldset>
<fieldset>
<p>Фамилия:</p>
<p><input name="lastname" tabindex="3"></p>
</fieldset>
<fieldset>
<p>Телефон:</p>
<p><input name="tel" type="tel" tabindex="2"></p>
</fieldset>
<fieldset>
<p>Пол:</p>
<p><select name="gender" tabindex="4">
<option selected>Мужской</option>
<option>Женский</option>
</select></p>
</fieldset>
</form>
</body>
</html>Результат примера показан ниже. Обратите внимание, что с помощью табуляции фокус вначале получает поле, где надо ввести имя, а затем поле для ввода телефона.
Рис. 1. Порядок ввода данных