Label html5: Тег | htmlbook.ru

Leave a Comment / Html / By /

Содержание

| HTML | WebReference

  • Содержание
    • Синтаксис
    • Закрывающий тег
    • Атрибуты
    • Пример
    • Примечание
    • Спецификация
    • Браузеры

Элемент <label> (от англ. label — метка) устанавливает связь между определённой меткой, в качестве которой обычно выступает текст, и элементом формы (<input>, <select>, <textarea>). Такая связь необходима, чтобы изменять значения элементов формы при щелчке курсором мыши на текст. Кроме того, с помощью <label> можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.

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

Синтаксис

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

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

Обязателен.

Атрибуты

for
Идентификатор элемента, с которым следует установить связь.

Также для этого элемента доступны универсальные атрибуты и события.

Пример

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>LABEL</title> </head> <body> <form action=»handler.php»> <p><b>Выберите напиток</b></p> <p><input type=»checkbox»><label for=»check1″>Коньяк</label><br> <input type=»checkbox»><label for=»check2″>Арманьяк</label><br> <input type=»checkbox»><label for=»check3″>Кальвадос</label></p> </form> </body> </html>

Примечание

IE до версии 6.0 включительно не позволяет активировать поле формы при щелчке по тексту, когда поле с текстом находится внутри <label>.

IE до версии 8.0 включительно корректно работает с <label> только при наличии в нём текста. Если добавить изображение (<label><img src=»pic.jpg» alt=»»></label> ), то активировать поле формы щелчком по картинке нельзя.

Спецификация

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Рекомендация
HTML 4.01 SpecificationРекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

48121411
1161

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

  • Аккордеон меню
  • Вкладки на CSS
  • Выпадающее меню
  • Использование :checked
  • Подсказка в поле формы
  • Пользовательские формы
  • Стилизация переключателей
  • Стилизация флажков
  • Формы в Bootstrap 4
  • Формы в HTML
  • Элемент label

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09. 10.2018

Редакторы: Влад Мержевич

HTML тег

❮ Назад Вперед ❯

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

Тег <label> парный, текст размещается между открывающим (<label>) и закрывающим (</label>) тегами.

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

Связать текстовую метку и форму, к которой она относится, можно двумя способами:

  1. установить идентификатор id внутри элемента <input> и указать его имя в качестве атрибута for тега <label>.

Пример

<!DOCTYPE html>
<html>
   <head>
      <title> Заголовок документа</title>
   </head>
   <body>
          <form>
              <label for="lfname">Имя пользователя:</label> 
              <input name="fname" type="text" />
          </form>
   </body>
</html>

Попробуйте сами!

Результат

  1. Поместить <input> в элемент <label>.

Пример

<!DOCTYPE html>
<html>
   <head>
      <title>Заголовок документа</title>
   </head>
  <body>
    <form>
      <label>Имя
      <input name="Имя" type="text" />
      </label>
    </form>
  </body>
</html>

Попробуйте сами!

Результат

Пример (форма с флажками)

<!DOCTYPE html>
<html>
   <head>
      <title>Заголовок документа</title>
   </head>
   <body>
          <form>
              <label for="barca">Барселона</label>
              <input type="radio" name="team" value="Барселона"><br />
              <label for="real">Реал Мадрид</label>
              <input type="radio" name="team" value="Реал Мадрид"><br />
          </form>
   </body>
</html>

Попробуйте сами!

Результат

Используйте CSS свойства font для стилизации тега <label>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
       padding: 20px;
      }
      label {
        font-size: 20px;
        font-weight: 700;
        color: #1c87c9;
      }
      input {
        width: 50%;
        height: 28px;
        padding: 4px 10px;
        border: 1px solid #666;
        background: #cce6ff;
        color: #1c87c9;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <form>
      <label>Ваше имя:</label>
      <input name="Name" type="text"/>
    </form>
  </body>
</html>

Попробуйте сами!

Результат

Тег <label> поддерживает глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <label> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <label>:

  • CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
  • CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
  • CSS свойство font-size задает размер щрифта.
  • CSS свойство font-weight устанавливает насыщенность шрифта.
  • CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
  • CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега <label>:

  • CSS свойство color определяет цвет контента и оформления текста.
  • CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега <label>:

  • CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
  • CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
  • CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
  • CSS свойство word-break указывает перенос строки.

Другие свойства для тега <label>:

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Тег | HTML справочник

HTML теги

Значение и применение

Тег <label> (англ. — метка) служит текстовой меткой для элемента <input>. По своему виду метка ничем не отличается от обычного текста, но благодаря ей пользователь может выбрать элемент формы кликом по тексту, расположенному внутри элемента <label>, а не по самому элементу <input>.

Поддержка браузерами

Тег
Chrome
Firefox
Opera
Safari
IExplorer
Edge
<label>ДаДаДаДаДаДа

Атрибуты

Атрибут		ЗначениеОписание
forelement_idОпределяеть к какому элементу формы относится текущая метка.
formform_id

Определяет форму/формы с которой будет связана метка. В качестве значения атрибута выступает идентификатор элемента <form> (<form id = «вот это значение»>). Этот атрибут позволяет размещать метки в произвольном месте конкретного документа, а не только внутри тега <form>. Этот атрибут был удален из спецификации HTML 28 апреля 2016 года, но скрипты имеют доступ только для чтения HTMLLabelElement.form (возвращает форму с которой связана метка, либо «0», если метка не связана с формой).

Пример использования

Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега <label>. Значение атрибута for должно соответствовать значению глобального атрибута id того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент <input> будет находиться внутри элемента <label>.

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <label></title>
	</head>
	<body>
		<form>
			<label for = "yes">Да</label> <!--Здесь мы создаём метку для тега input c id = "yes"-->
			<input type = "radio" id = "yes"name = "choice" value = "yes" checked> 
			<label for = "no">Нет</label><!--Здесь мы создаём метку для тега input c id = "no"-->
			<input type = "radio"id = "no" name = "choice" value = "no">
		</form><br>
		<form>
			<label>Да <input type = "radio" name = "choice2" value = "yes"> </label><!--Здесь мы  помещаем теги <input>
			внутрь тегов <label> (при этом атрибут for не требуется)-->
			<label>Нет <input type = "radio"name = "choice2" value = "no" checked></label> 
		</form> 
	</body>
</html>

В этом примере мы:

  • Внутри первой формы:
    • Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя, значения мы указали разные. Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes). Кроме того, мы указали для радиокнопок глобальные атрибуты id, которые определяют уникальный идентификатор для элемента.
    • Разместили два элемента <label>, которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for, чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута id необходимой нам радиокнопки.
  • Внутри второй формы:
    • Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
    • Разместили два элемента <label>, внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты id (идентификатор для элемента), а для текстовых меток использовать атрибут for, чтобы на них сослаться (сделать привязку).

В браузере оба варианта (метода) использования текстовых меток выглядят идентично:

Пример использования HTML тега <label> (использование текстовой метки).

Отличия HTML 4.01 от HTML 5

В HTML 5 был введён новый атрибут form.

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

label {
cursor : default;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

Тег ярлыка HTML

❮ Предыдущий Полный справочник HTML Далее ❯


Пример

Три переключателя с метками:

php»>
 


 
 

 
 



Попробуйте сами »

Определение и использование

Тег определяет метку для нескольких элементов:

  • < тип ввода = "флажок">
  • <тип ввода = "цвет">
  • <тип ввода = "дата">
  • <тип ввода = "файл">
  • <тип ввода = "месяц">
  • <тип ввода="число">
  • <тип ввода = "пароль">
  • <тип ввода = "радио">
  • <тип ввода = "диапазон">
  • <тип ввода = "поиск">
  • <тип ввода="тел">
  • <тип ввода = "текст">
  • <тип ввода="время">
  • <тип ввода = "неделя">
  • <метр>
  • <прогресс>
  • <выбрать>
  • <текстовое поле>

Надлежащее использование меток с указанными выше элементами принесет пользу:

  • Пользователи программ чтения с экрана (прочитают метку вслух, когда пользователь сфокусирован на элемент)
  • Пользователи, которым трудно нажимать на очень маленькие области (например, флажки) — потому что, когда пользователь щелкает текст в пределах <метка> элемент, он переключает ввод (это увеличивает область попадания).

Советы и примечания

Совет: Атрибут for должен быть равен атрибуту id связанный элемент, чтобы связать их вместе. Метку также можно привязать к элементу, поместив элемент внутрь элемента .

Поддержка браузера

Элемент
<метка> Да Да Да Да Да

Атрибуты

Атрибут Значение Описание
для element_id Указывает идентификатор элемента формы, к которому должна быть привязана метка.
форма form_id Указывает, к какой форме относится этикетка.

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Связанные страницы

Ссылка HTML DOM: Label Object

Настройки CSS по умолчанию

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

Пример

label {
  cursor: default;
}

Попробуйте сами »

❮ Предыдущая Полный справочник HTML Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Тег легенды HTML

❮ Назад Полный справочник HTML Далее ❯


Пример

Группировка связанных элементов в форме:


 

Персоналия:
   
   



   


    <метка for="email">Электронная почта:
   


    <метка for="birthday">День рождения:
   


    <ввод type="submit" value="Submit">
 

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Тег определяет заголовок для элемента

.

Поддержка браузера

Элемент
<легенда> Да Да Да Да Да

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Другие примеры

Пример

Пусть заголовок набора полей перемещается вправо (с помощью CSS):


 

Персоналия:

   


    <метка for="lname">Фамилия:
   


    <метка for="email">Электронная почта:
   


    <метка for="birthday">День рождения:
   


    <ввод type="submit" value="Submit">
 

Попробуйте сами »

Пример

Используйте CSS для оформления

и:





php»>
 

Персоналия:
   
   



   


    <метка for="email">Электронная почта:
   


    <метка for="birthday">День рождения:
   


    <ввод type="submit" value="Submit">
 


Попробуйте сами »

Связанные страницы

Ссылка HTML DOM: Legend Object

Настройки CSS по умолчанию

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

Пример

легенда {
  display: block;
  padding-left: 2px;
  padding-right: 2px;
  граница: нет;
}

Попробуйте сами »

❮ Предыдущая Полный справочник HTML Далее ❯


NEW

Мы только что запустили
видео W3Schools

Узнать

ПАЛЕТКА ЦВЕТОВ
КОД ИГРЫ

Играть в игру

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

&двоеточие; Элемент Input Label — HTML: Язык гипертекстовой разметки

HTML-элемент представляет заголовок для элемента в пользовательском интерфейсе.

Связывание элемента с элементом дает несколько важных преимуществ:

  • Текст метки не только визуально связан с соответствующим вводом текста; он также программно связан с ним. Это означает, что, например, программа чтения с экрана будет считывать метку, когда пользователь сосредоточится на вводе данных в форму, что облегчает пользователю вспомогательных технологий понимание того, какие данные следует вводить.
  • Когда пользователь щелкает или касается/нажимает метку, браузер передает фокус на связанный с ним ввод (результирующее событие также вызывается для ввода). Эта увеличенная область попадания для фокусировки ввода дает преимущество любому, кто пытается ее активировать, включая тех, кто использует устройство с сенсорным экраном.

Чтобы связать с элементом , необходимо присвоить атрибут id . <метка> , затем требуется атрибут для , значение которого совпадает с идентификатором ввода .

В качестве альтернативы вы можете вложить непосредственно в , и в этом случае атрибуты для и id не нужны, поскольку ассоциация является неявной:

Элемент управления формы, который помечается ярлыком, называется помеченный элемент управления элемента label. Несколько ярлыков могут быть связаны с одним и тем же элементом управления формы:

 
<ввод />

Элементы, которые могут быть связаны с элементом , включают