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

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

Оцени публикацию:
  • 21,92
Оценили: 21


Комментарии посетителей:

  • cпасибо болшое все понятно
    17 июня 2009, 21:05 коммент полезен : +1 # Гость
  • Возможно использование LABEL без ID:

    <form>
    <label><input type="radio" name="psi" id="radio1"> Импритинг</label><br>
    <label><input type="radio" name="psi" id="radio2"> Реимпритинг</label>
    </form>
    04 мая 2011, 10:09 коммент полезен : +3 # Алексей (гость)

Предложения и пожелания:

 

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2019 YaPro.Ru

Лебеденко Николай Николаевич
Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter