Что такое label?

HTML тег label: назначение и использование

<label> — это HTML-элемент, который связывает текстовое описание с интерактивным элементом формы (input, select, textarea, checkbox, radio и т.д.). Это делает интерфейс более удобным для пользователя и улучшает доступность (accessibility).

Зачем нужен label?

1. Удобство пользователя: кликнув на текст label, фокус переходит на связанный input
2. Доступность: экранные читалки объявляют label вместе с input
3. Семантика: явно показывает, что текст описывает input
4. Мобильная удобность: на мобильных устройствах увеличивает область клика

Способ 1: Атрибут for

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<label for="agree">I agree to terms</label>
<input type="checkbox" id="agree" name="agree">

Атрибут for на label должен совпадать с id input:

• При клике на текст label фокус переходит на input
• Для checkbox/radio фокус переходит на элемент, и он может быть выбран кликом на label

❌ Неправильно: id и for не совпадают
<label for="username">Username:</label>
<input type="text" id="user-field" name="username">

✅ Правильно:
<label for="user-field">Username:</label>
<input type="text" id="user-field" name="username">

Способ 2: Вложение input в label

<!-- ✅ Хорошо: input вложен в label -->
<label>
  Email:
  <input type="email" name="email">
</label>

<!-- ✅ Также хорошо: с checkbox -->
<label>
  <input type="checkbox" name="newsletter">
  Subscribe to newsletter
</label>

При этом не нужно указывать id и for.

React пример

// ❌ Плохо: нет label или неправильное использование
function LoginForm() {
  return (
    <form>
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Password" />
      <button>Login</button>
    </form>
  );
}

// ✅ Хорошо: правильное использование label
function LoginForm() {
  return (
    <form>
      <div>
        <label htmlFor="email">Email:</label>
        <input id="email" type="email" name="email" />
      </div>

      <div>
        <label htmlFor="password">Password:</label>
        <input id="password" type="password" name="password" />
      </div>

      <button>Login</button>
    </form>
  );
}

// ✅ Альтернативный способ: вложение
function LoginForm() {
  return (
    <form>
      <label>
        Email:
        <input type="email" name="email" />
      </label>

      <label>
        Password:
        <input type="password" name="password" />
      </label>

      <button>Login</button>
    </form>
  );
}

Использование с различными типами input

Текстовые поля

<label for="name">Your Name:</label>
<input id="name" type="text" name="name">

<label for="bio">Biography:</label>
<textarea id="bio" name="bio"></textarea>

<label for="country">Select country:</label>
<select id="country" name="country">
  <option>USA</option>
  <option>UK</option>
</select>

Checkbox и Radio

<!-- Checkbox -->
<label>
  <input type="checkbox" name="terms">
  I agree to terms and conditions
</label>

<!-- Radio buttons -->
<fieldset>
  <legend>Choose your plan:</legend>
  
  <label>
    <input type="radio" name="plan" value="free">
    Free Plan
  </label>
  
  <label>
    <input type="radio" name="plan" value="pro">
    Pro Plan ($9/month)
  </label>
  
  <label>
    <input type="radio" name="plan" value="enterprise">
    Enterprise (Custom)
  </label>
</fieldset>

Стилизация в CSS

/* Стилизация label */
label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333;
}

/* Стилизация label когда input focused */
input:focus + label {
  color: blue;
}

/* Или через родителя */
label:has(input:focus) {
  color: blue;
  font-weight: 600;
}

/* Для checkbox/radio */
label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

label input[type="checkbox"],
label input[type="radio"] {
  cursor: pointer;
}

Доступность (Accessibility)

Label критически важна для доступности:

// ❌ Плохо: экранная читалка не знает, что это email field
function BadForm() {
  return (
    <div>
      Email
      <input type="email" />
    </div>
  );
}

// ✅ Хорошо: экранная читалка объявит "Email, edit text"
function GoodForm() {
  return (
    <div>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" />
    </div>
  );
}

Когда пользователь с экранной читалкой фокусируется на input, читалка объявит:

• Текст из label
• Тип input
• Текущее значение
• Ошибки валидации (если указаны aria-describedby)

Практический пример: форма с ошибками

import { useState } from "react";

function SignupForm() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  const handleChange = (e) => {
    setEmail(e.target.value);
    
    // Валидация
    if (e.target.value && !e.target.value.includes("@")) {
      setError("Invalid email format");
    } else {
      setError("");
    }
  };

  return (
    <form>
      <div>
        <label htmlFor="email">Email Address:</label>
        <input
          id="email"
          type="email"
          value={email}
          onChange={handleChange}
          aria-describedby={error ? "email-error" : undefined}
          className={error ? "input-error" : ""}
        />
        {error && (
          <span id="email-error" className="error-message" role="alert">
            {error}
          </span>
        )}
      </div>

      <label htmlFor="subscribe">
        <input
          id="subscribe"
          type="checkbox"
          name="subscribe"
        />
        Subscribe to our newsletter
      </label>

      <button type="submit">Sign up</button>
    </form>
  );
}

Когда НЕ нужен label?

• Button: <button>Click me</button> — button уже содержит текст
• Скрытые input: <input type="hidden"> — они не видны пользователю
• Submit button: <input type="submit" value="Submit"> — значение в value

<!-- ✅ Правильно: button имеет текст -->
<button>Submit</button>

<!-- ❌ Неправильно: label для button -->
<label for="submit-btn">Submit</label>
<button id="submit-btn">Submit</button>

Передовые техники

Обязательное поле

<label for="required-field">
  Name: <span aria-label="required">*</span>
</label>
<input id="required-field" type="text" required>

Hint текст в label

<label for="password">
  Password: <span className="hint">(min. 8 characters)</span>
</label>
<input id="password" type="password" minLength="8" required>

Группировка с fieldset

<fieldset>
  <legend>Personal Information</legend>
  
  <label for="first-name">First Name:</label>
  <input id="first-name" type="text">
  
  <label for="last-name">Last Name:</label>
  <input id="last-name" type="text">
</fieldset>

Заключение

<label> — это простой, но мощный элемент для:

• Улучшения UX (больше область клика)
• Семантической разметки
• Доступности для экранных читалок
• Явной связи между описанием и input

Всегда используй label для каждого input (кроме button и hidden), и приложение будет удобнее и доступнее для всех пользователей.