HTML тег <label>

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

Синтаксис

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

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

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

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

Пример

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

Результат

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

Пример

<!DOCTYPE html>
<html>
   <head>
      <title>Заголовок документа</title>
   </head>
  <body>
    <form>
      <label>Имя
      <input id="User" 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" id="barca" value="Барселона"><br />
              <label for="real">Реал Мадрид</label>
              <input type="radio" name="team" id="real" 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 id="User" name="Name" type="text"/>
    </form>
  </body>
</html>

Результат

Атрибуты

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

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

Browser support




Related articles