Тег <label>

Тег <label> (укр. – “мітка”) використовується для прив’язки описового тексту до елементів форми, таких як <input>, <textarea>, <select>. Це дозволяє користувачам, зокрема тим, хто використовує пристрої для читання екрана, легше взаємодіяти з формами. Крім того, натискання на текст мітки автоматично активує пов’язаний елемент.

Атрибути

Специфічні атрибути

• for — вказує ідентифікатор (id) елемента форми, до якого прив’язана мітка. Наприклад:

<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username">

• aria- атрибути— використовуються для покращення доступності. Наприклад, можна використовувати aria-describedby, щоб вказати на додатковий текст, який описує призначення або вимоги для елемента:

<label for="password" aria-describedby="password-helper">Пароль:</label>
<input type="password" id="password" name="password">
<p id="password-helper">Пароль має містити щонайменше 8 символів.</p>

Глобальні атрибути

Тег <label> підтримує всі глобальні атрибути HTML, такі як:

• id — унікальний ідентифікатор для мітки. Наприклад:

<label id="username-label" for="username-input">Ваше ім'я:</label>

• class — клас для застосування стилів через CSS. Наприклад:

<label class="password-label" for="password-input">Пароль:</label>

• style — інлайн-стилізація елемента. Наприклад:

<label for="comment" style="font-weight: bold;">Ваш коментар:</label>

• title — текст підказки, який відображається при наведенні. Наприклад:

<label for="username-label" for="username-input" title="Введіть ваше ім'я користувача">Ім'я користувача:</label>

• lang — визначає мову для контенту. Наприклад:

<label lang="uk" for="email">Електронна пошта:</label>

Варіанти використання

Зв’язок за допомогою атрибута for

У цьому випадку мітка зв’язується з елементом форми через атрибут for в мітці та атрибут id на відповідному полі введення. Значення цих атрибутів повинні бути однаковими, щоб правильно встановити асоціацію між міткою та полем введення. Наприклад:

<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username">

Обгортання елемента форми

Якщо елемент форми вкладено всередину тега <label>, зв’язок створюється автоматично, і атрибут for не потрібен:

<label>
  Ім'я користувача:
  <input type="text" name="username">
</label>

Приклад використання

<form>
  <label for="username">Ім'я користувача:</label>
  <input type="text" id="username" name="username" placeholder="Введіть ваше ім'я" required>

  <label for="password">Пароль:</label>
  <input type="password" id="password" name="password" placeholder="Введіть ваш пароль" required>

  <label>
    <input type="checkbox" name="remember">
    Запам'ятати мене
  </label>

  <button type="submit">Увійти</button>
</form>

Додаткові моменти

• Використання тега <label> покращує доступність форми для пристроїв читання екрана, оскільки мітки оголошуються разом із відповідними полями.
• Ви можете стилізувати мітки окремо від елементів форми за допомогою CSS.
• Тег <label> дозволяє розташовувати мітку як перед елементом форми, так і після нього, або навіть обертати його, залежно від дизайну.
• Щоб позначити поле як обов’язкове, додайте відповідну візуальну підказку, наприклад червону зірочку до тексту в середині тега <label>.
• Використання тега <label> з атрибутом for є найкращою практикою для більшості форм, оскільки це забезпечує чіткий зв’язок між текстом мітки та елементом форми.
• Для покращення UX завжди використовуйте читабельний та інформативний текст у мітках, що відображає мету поля форми.
• Якщо форма складна або велика, корисно групувати мітки та елементи у структуровані блоки за допомогою тегів <fieldset> та <legend>.