Тег LABEL связывает текст с определенным элементом формы. Такая связь необходима, чтобы изменять значение переключателей (чекбоксов) и флажков при нажатии курсором мыши на текст. Кроме того, с помощью LABEL можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.
Для связывания элемента формы и текста в теге LABEL используется параметр for, аргументом для которого служит идентификатор элемента, задаваемого атрибутом id (пример 1).
Пример 1. Синтаксис тега LABEL<form>
<input type=radio name=psi id=radio1><label
for=radio1>Импритинг</label><br>
<input type=radio name=psi id=radio2><label for=radio2>Реимпритинг</label>
</form>
|
|
Обязательно требуется, чтобы имя идентификатора (id) и значение параметра for совпадали. Именно в этом случае и осуществляется связь между текстом и элементом формы. Причем, не имеет значение, насколько близко они располагаются между собой на веб-странице. При нажатии на текст в окне браузера происходит переход к элементу формы. Исключением является браузер Opera, который игнорирует эту особенность, и переход при активизации текста не реализовывает.
Чтобы понять, в чем же удобство применения тега LABEL, рассмотрим пример, где в форму добавлены два чекбокса. Описание к одному чекбоксу будет задано как обычный текст, а ко второму — с использованием LABEL (пример 2).
Пример 2. Использование тега LABEL<form>
<input type=checkbox id=t1> Поставьте галочку<br>
<input type=checkbox id=t2> <label for=t2>Нажмите на этот текст,
чтобы поставить галочку</label>
</form>
|
Поставьте галочку |
В первой строке, чтобы активизировать чекбокс, надо щелкнуть на него самого. Во второй строке активным элементом является и текст, при нажатии на который курсором мыши, можно устанавливать или снимать галочку. Вот и вся разница.
Польза от применения тега LABEL не особенно велика,
но следует учитывать, что в операционных системах активация переключателей и
флажков происходит при щелчке по тексту возле них. А следовательно, такой подход
более привычен и понятен пользователям сайтов.
Для управления чекбоксом и флажком с помощью клавиатуру применяется параметр accesskey тега LABEL. Для него необходимо указать символ, который в сочетании с клавишей <Alt> будет активизировать элемент. В примере 3 показано, как для переключателя задается горячая клавиша.
Пример 3. Использование параметра accesskey<form>
<input type=checkbox id=t1><label for=t1 accesskey=q>Нажмите <Alt>+<q>,
чтобы активировать переключатель</label>
</form>
В кавычки символ брать необязательно, он будет работать и без этого. Учтите, что параметр accesskey корректно работает только в браузере Internet Explorer. Кроме того, некоторые горячие клавиши уже используются браузером для своих целей.