Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное


Тег LABEL

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да
HTML: 3.2 4 XHTML: 1.0 1.1

Описание

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

Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри тега INPUT и указании его имени в качестве параметра for тега <LABEL>. При втором способе тег <INPUT> помещается внутрь контейнера <LABEL>.

Синтаксис

<input id="идентификатор"> <label for="идентификатор">Текст</label>
<label><input type="..."> Текст</label>

Параметры

accesskey
Доступ к элементам формы с помощью горячих клавиш.
for
Идентификатор элемента <INPUT>, с которым следует установить связь.

Закрывающий тег

Обязателен.

Пример 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><b>Lorem ipsum dolor sit amet...</b></p>
<p><input type="checkbox" id="check1"><label for="check1">Lorem</label><br>
<input type="checkbox" id="check2"><label for="check2">Ipsum</label><br>
<input type="checkbox" id="check3"><label for="check3">Dolor</label><br>
<input type="checkbox" id="check4"><label for="check4">Sit amet</label></p>
</form>

</body>
</html>

Описание параметров тега <LABEL>

Параметр ACCESSKEY

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

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

Синтаксис

<label accesskey="клавиша">...</label>

Аргументы

Любой доступный латинский символ.

Значение по умолчанию

Нет.

Пример 2. Добавление горячей клавиши

Валидный код<!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, параметр accesskey</title>
</head>
<body>

<form action="handler.php">
<p><input type=checkbox id="t1"><label for="t1" accesskey="g">Нажмите &lt;Alt&gt;+&lt;g&gt;, чтобы перейти к разделу <b>Игры</b>.</label></p>
</form>

</body>
</html>

Параметр FOR

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Задает уникальный идентификатор, определяемый с помощью атрибута id элемента <INPUT>, с которым следует установить связь. Параметр for необходимо задавать в том случае, когда элемент формы и текст разделены. Если <INPUT> размещается внутри контейнера <LABEL>, то применять параметр for не требуется.

Синтаксис

<label for="идентификатор">...</label>

Аргументы

Имя идентификатора. Такое имя чувствительно к регистру, поэтому его следует писать так же, как оно описано внутри элемента <INPUT>.

Значение по умолчанию

Нет.

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

Валидный код<!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, параметр for</title>
</head>
<body>

<form action="handler.php">
<p><input type="radio" name="l" id="radio1"><label for="radio1">Lorem ipsum</label></p>
<p><input type="radio" name="l" id="radio2"><label for="radio2">Dolor sit amet</label></p>
</form>

</body>
</html>




На главную









При использовании материалов сайта ссылка на comnew.ru обязательна!

x