htmlbook.ru - Для тех, кто делает сайты
Шаг за шагом Графика для Web
Шаг за шагом > Формы по шагам > Применение тега LABEL

Шаг 15. Применение тега LABEL

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

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

Для связывания элемента формы и текста в теге <LABEL> используется параметр for, аргументом для которого служит идентификатор элемента, задаваемого параметром id (пример 15.1).

Пример 15.1. Синтаксис тега <LABEL>

<!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>Label</title>
 </head>
 <body>
  <form action="handler.php">
   <p><input type="radio" name="psi" id="radio1"><label for="radio1">Импритинг</label></p>
   <p><input type="radio" name="psi" id="radio2"><label for="radio2">Реимпритинг</label></p>
  </form>
 </body>
</html>

Результат данного примера показан ниже.

Обязательно требуется, чтобы имя идентификатора (id) и значение параметра for совпадали. Именно в этом случае и осуществляется связь между текстом и элементом формы. Причем, не имеет значение, насколько близко они располагаются между собой на веб-странице. При нажатии на текст в окне браузера происходит переход к элементу формы. Исключением является браузер Opera, который игнорирует эту особенность, и переход при активизации текста не реализовывает.

Чтобы понять, в чем же удобство применения тега <LABEL>, рассмотрим пример, где в форму добавлены два флажка. Описание к одному флажку будет задано как обычный текст, а ко второму — с использованием <LABEL> (пример 15.2).

Пример 15.2. Использование тега <LABEL>

<!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>Label</title>
 </head>
 <body>
   <form action="handler.php">
    <p><input type="checkbox" id="t1"> Поставьте галочку</p>
    <p><input type="checkbox" id="t2"> <label for="t2">Нажмите 
       на этот текст, чтобы поставить галочку</label></p>
  </form>
 </body>
</html>

Результат данного примера показан ниже.

Поставьте галочку

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

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

Горячие клавиши

Для управления переключателем и флажком с помощью клавиатуру применяется параметр accesskey тега <LABEL>. Для него необходимо указать символ, который в сочетании с клавишей <Alt> будет активизировать элемент. В примере 15.3 показано, как для переключателя задается горячая клавиша.

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

<!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>
    <p><input type="checkbox" id="t1"><label for="t1" accesskey="q">
       Нажмите &lt;Alt&gt;+&lt;q&gt;, чтобы активировать переключатель</label></p>
  </form>
 </body>
</html>

Результат данного примера показан ниже.

Учтите, что параметр accesskey корректно работает только в браузере Internet Explorer и Safari. Кроме того, некоторые горячие клавиши браузер использует для своих целей.

Статья опубликована: 12.08.2005 Последнее обновление: 12.11.2008
Формы по шагам
Примеры из статьи

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