Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Февраль 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 46


Номер: 45

Дата: 2009-02-03

Архив Рассылки

Самоучитель HTML

Самоучитель CSS

Справочник по CSS

Рецепты CSS
Самоучитель по HTML и CSS

Добрый день.

На сайте htmlbook.ru обновился раздел Свойства CSS. Теперь к каждому примеру добавлена кнопка для просмотра результата в браузере. Это удобно, поскольку не придется лишний раз копировать текст примера и вставлять его в редактор. К тому же, ко всем примерам прилагаются необходимые рисунки.

Сегодня продолжаем тему форм.

Формы. Применение тега 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. Кроме того, некоторые горячие клавиши браузер использует для своих целей.

Copyright 2007—2009 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное