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