Переход между полями с помощью табуляции



Влад Мержевич

При достаточно большом количестве полей формы, которые необходимо заполнить, переходить между ними с помощью курсора мыши становится неудобно. При этом требуется навести курсор на соответствующее поле, нажать кнопку мыши, и только после этого вводить нужное значение. Как альтернатива, используется клавиша Tab, которая позволяет быстро переключать фокус с одного поля на другое. Атрибут tabindex определяет последовательность перехода между полями при нажатии на Tab.

Фокусом называется активность поля, иными словами, поле доступно для того, чтобы в него вводили информацию или использовали какое другое действие. Например, кнопки, флажки, переключатели можно активизировать с помощью пробела.

Следующие элементы формы могут иметь атрибут 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. Порядок ввода данных

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.