htmlbook.ru - Для тех, кто делает сайты
Шаг за шагом Графика для Web
Шаг за шагом > Формы по шагам > Переход между полями с помощью табуляции

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

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

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

Замечание

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

Следующие поля формы (теги) могут иметь параметр tabindex: <BUTTON>, <INPUT>, <SELECT>, <TEXTAREA>. В качестве значения принимается число, которое представляет собой шаг перехода. Так, номер 1 означает, что это поле первое получит фокус, номер 2 будет идти следующим и т.д. В примере 14.1 показано применение параметра tabindex когда поля формы размещаются в ячейках таблицы. Если значение tabindex не указано, то по умолчанию переход по элементам формы происходит так, как они расположены в коде HTML, т.е. сверху вниз.

Пример 14.1. Использование параметра tabindex

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Порядок полей</title>
 </head>
 <body>
  <form name="bio" method="POST" action="handler.php">
  <table width="100%" cellspacing="0" cellpadding="4">
   <tr valign="top"> 
    <td >
     Ваше имя:<br> <input name="name" type="text" tabindex="1" size="30">
    </td>
    <td>
     Фамилия:<br> <input name="lastname" type="text" tabindex="3" size="30"> 
    </td>
   </tr>
   <tr valign="top">
    <td>
     Телефон:<br>
     <input name="tel" type="text" tabindex="2" size="30"> 
    </td>
    <td>
     Пол:<br>
     <select name="gender" tabindex="4">
      <option selected>Мужской</option>
      <option>Женский</option>
      <option>Гермафродит</option>
     </select></td>
   </tr>
  </table>
  </form>
 </body>
</html>
Результат примера показан ниже. Обратите внимание, что с помощью табуляции фокус вначале получает поле, где надо ввести имя, а затем поле для ввода телефона.
Ваше имя:
Фамилия:
Телефон:
Пол:
Статья опубликована: 12.08.2005 Последнее обновление: 12.11.2008
Формы по шагам
Примеры из статьи

Copyright Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru