Полезности тега LABEL

Автор: Aport Пятница, Январь 23rd, 2015 Нет комментариев

Рубрика: Разное

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

Для связывания элемента формы и текста в теге <LABEL> используется параметр for, аргументом для которого служит идентификатор элемента, задаваемого атрибутом id (пример 15.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> (пример 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 показано, как для переключателя задается горячая клавиша.

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

<form>
<input type=»checkbox» id=»t1″><label for=»t1″ accesskey=»q»>Нажмите <Alt>+<q>, чтобы активировать переключатель</label>
</form>

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

 

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

 

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты