Html lable: Тег | htmlbook.ru

Leave a Comment / Html / By /

Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
5.0+7.0+1.0+4.0+1.2+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

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

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

Синтаксис

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

Атрибуты

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

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

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег LABEL</title>
 </head>
 <body>
  <form action="handler.php">
   <p><b>Lorem ipsum dolor sit amet...</b></p>
   <p><input type="checkbox"><label for="check1">Lorem</label><Br>
   <input type="checkbox"><label for="check2">Ipsum</label><Br>
   <input type="checkbox"><label for="check3">Dolor</label><Br>
   <input type="checkbox"><label for="check4">Sit amet</label></p>
  </form> 
 </body>
</html>

Браузеры

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

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

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>
Попробуйте сами!

Результат¶

Атрибуты¶

АтрибутЗначениеОписание
accesskeyaccesskeyОпределяет горячую клавишу, с помощью которой можно перейти к привязанному к метке (через атрибут for) элементу формы.
forelement_idУстанавливает идентификатор элемента, к которому должна быть привязана метка.
formform_idОпределяет форму (формы) с которой будет связана метка. Этот атрибут позволяет размещать метки в произвольном месте документа, а не только в качестве потомка элемента тега <form>.
Элемент был удален из спецификации HTML.

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

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

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

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

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

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

Всегда используйте label — Блог HTML Academy

Иногда дизайнеры слишком сильно упрощают форму, убирая подпись к полю (примечание переводчика: здесь и далее имеется в виду тег label). Проблема в том, что минимализм не всегда означает простоту в использовании, а это, безусловно, и происходит с подписями.

На самом деле, подпись к полю является важной частью для создания лёгких в использовании форм. Вот почему:

1) Зрячие пользователи смогут видеть инструкции и будут знать, что делать. Без подписей к полям в лучшем случае это будет сложно.

Подпись к полю помогает зрячим пользователям понять, что нужно вводить

2) Незрячие пользователи смогут услышать инструкции благодаря использованию скринридеров. Без подписей к полям это будет невозможно.

Поле «Username» доступно для чтения скринридерами

3) Пользователи с моторными нарушениями смогут легче найти и активировать элементы с помощью мышки или пальца благодаря увеличению размеров активной области. Это происходит потому, что клик и нажатие пальцем по подписи работает так, будто пользователь кликнул по самому элементу управления.

Большая площадь поля помогает пользователям с моторными нарушениями активировать элемент

Но для меню выбора вида/размера/цвета/количества не нужны подписи, не так ли?

Нужны, и, к сожалению, довольно часто подписей нет в формах выбора товаров. ASOS страдает этой проблемой, как вы видите.

Форма выбора товаров на ASOS пренебрегает подписями у раскрывающихся списков

Вместо подписей здесь используется первое значение из раскрывающегося списка. Пока значение не выбрано это допустимо для хорошо видящих пользователей, но создаёт трудности для пользователей с нарушением зрения или моторных функций. Если значение выбрано, как в примере выше с выбором цвета, сложности возникают уже у всех типов пользователей.

House of Fraser показывает подпись к раскрывающемуся списку выбора количества вещей, улучшая удобство использования всем пользователям.

House of Fraser имеет подпись у поля с выбором количества вещей

Простая форма поиска не нуждается в подписях, не так ли?

Нуждается, но, к сожалению, формы поиска часто разрабатываются без подписей. В качестве примера можно посмотреть на Selfridges.

Форма поиска Selfridges пренебрегает подписью к полю

Чтобы объяснить назначение формы, вместо подписи здесь используется подсказка для поля и кнопка отправки (иконка лупы). Но это чересчур сложно для использования людьми с ограниченными возможностями — и, конечно — подсказки полей не должны использоваться как замена подписям.

Smashing Magazine показывает, как использование подписей может быть красивым и функциональным одновременно.

Форма поиска Smashing Magazine использует подпись у поля

Итог

Использование подписей к полям может нести дополнительные сложности в дизайне, но уход от этих проблем — это не решение. Принимайте этот вызов, и не стоит чересчур упрощать. И конечно, всегда используйте тег label.

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

<label> представляет собой заголовок для элемента в пользовательском интерфейсе.

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

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

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

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

<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>

Другие указания по использованию:

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

Attributes

Этот элемент включает глобальные атрибуты .

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

Примечание . Элемент <label> может иметь как атрибут for ,так и содержащийся элемент управления, если атрибут for указывает на содержащийся элемент управления.

Стиль с CSS

Для элементов <label> нет особых требований к стилю — структурно они являются простыми встроенными элементами, поэтому их стили можно стилизовать почти так же, как элементы <span> или <a> . Вы можете применить к ним стиль как хотите, если только текст не станет трудным для чтения.

Examples

Простой пример этикетки

<label>Click me <input type="text"></label>

Использование атрибута «for»

<label for="username">Click me</label>
<input type="text">

Проблема доступности

Интерактивное содержание

Не размещайте интерактивные элементы, такие как якоря или кнопки, внутри label . Это затрудняет активацию ввода формы, связанной с label .

Don’t
<label for="tac">
  <input type="checkbox" name="terms-and-conditions">
  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>
Do
<label for="tac">
  <input type="checkbox" name="terms-and-conditions">
  I agree to the Terms and Conditions
</label>
<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>

Headings

Размещение элементов заголовков внутри <label> мешает работе многих видов вспомогательных технологий, поскольку заголовки обычно используются в качестве вспомогательных средств навигации . Если текст метки необходимо изменить визуально, используйте вместо этого классы CSS, применяемые к элементу

<label> .

Если форме или разделу формы требуется заголовок, используйте элемент <legend> , помещенный в <fieldset> .

Don’t
<label for="your-name">
  <h4>Your name</h4>
  <input name="your-name" type="text">
</label>
Do
<label for="your-name">
  Your name
  <input name="your-name" type="text">
</label>

Buttons

Элемент <input> с объявлением type="button" и допустимым атрибутом value не нуждается в связанной с ним метке. Это может фактически повлиять на то, как вспомогательные технологии анализируют ввод кнопок. То же самое относится и к элементу <button> .

Техническая сводка

Specifications

Совместимость с браузерами

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOpera SafariWebView AndroidХромовый AndroidFirefox для AndroidОпера АндроидSafari на IOSSamsung Интернет
label

Yes

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

for

Yes

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

HTML Тег . Справочник тегов. W3Schools на русском


Пример

Три радиокнопки с метками (лейблами):

<form action=»/action_page.php»>
  <label for=»male»>Male</label>
  <input type=»radio» name=»gender» value=»male»><br>

  <label for=»female»>Female</label>
  <input type=»radio» name=»gender» value=»female»><br>
  <label for=»other»>Other</label>
  <input type=»radio» name=»gender» value=»other»><br><br>
  <input type=»submit» value=»Submit»>
</form>

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

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

Тег <label> определяет метку для элемента <button>, <input>, <meter>, <output>, <progress>, <select> или <textarea>.

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

Атрибут для тега <label> должен быть равен атрибуту id связанного элемента, чтобы связать их вместе.

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

Элемент
<label> Yes Yes Yes Yes Yes

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

Совет: Метка может быть привязана к элементу либо с помощью атрибута «for» либо путем размещения элемента внутри элемента <label>.

Различия между HTML 4.01 и HTML5

Атрибут «form» новый в HTML5.

Атрибуты

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

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

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

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

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

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

HTML DOM справочник: Объект Label

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

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

seodon.ru | Теги HTML — Тег LABEL

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

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

Фактически — <LABEL> можно ассоциировать с любыми элементами формы, например: <BUTTON>, <INPUT>, <SELECT> и т.д. А так как он является инлайн-тегом, то его не обязательно размещать внутри формы, а можно просто указать внутри любого элемента, который может содержать данный тип.

Чтобы связать тег <LABEL> с элементом формы — надо присвоить этому элементу уникальный id (идентификатор), а в самом теге <LABEL> указать ссылку на этот id. Но можно обойтись и без идентификатора, а просто поместить элемент формы внутрь контейнера <LABEL>.

Атрибуты

Личные атрибуты:

  • for — Ассоциирует элемент формы с содержимым тега <LABEL>.

Общие атрибуты:

  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: формы.

Модель тега: inline (встроенный, уровня строки).

Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).

Не может содержать: другие теги <LABEL> на любом уровне вложенности.

Открывающий тег: необходим. Закрывающий тег: необходим.

Синтаксис

<label>содержимое</label>

Пример HTML: применение тега 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=utf-8">
  <title>seodon.ru - Применение тега LABEL</title>
 </head>
 <body>
  <form action="files/questions.php">
   <p>Что вы любите?<br>
    <label><input type="checkbox" name="food" value="1">Чай</label><br>
    <label><input type="checkbox" name="food" value="2">Кофе</label><br>
    <label><input type="checkbox" name="dance" value="3">Потанцуем</label></p>
   <p><input type="submit" name="ok" value="Отправить"></p>
  </form>
 </body>
</html>

Результат примера

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

HTML-тег легенды


Пример

Сгруппировать связанные элементы в форме:



Personalia:


















Попробуй сам »

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

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

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

.

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

Элемент
<легенда> Есть Есть Есть Есть Есть

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

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

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

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

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

Пример

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



Персоналии:


















Попробуй сам »

Пример

Используйте CSS для стилизации

и:




набор полей {
background-color: #eeeeee;
} Легенда

{
цвет фона: серый;
цвет: белый;
отступ: 5 пикселей 10 пикселей;
}

input {
margin: 5px;
}




Personalia:



















Попробуй сам »

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

Ссылка на HTML DOM: Legend Object

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

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

Пример

легенда {
дисплей: блок;
padding-left: 2px;
padding-right: 2px;
граница: отсутствует;
}

Попробуй сам »

HTML-тег — GeeksforGeeks

Тег