Урок 30 із 104
29%
← Назад

Мітка для елементів форми в HTML

Вивчаємо тег label для створення підписів до елементів HTML-форми та покращення зручності користування.

Мітка для елементів форми в HTML

Тег label використовується для створення підпису до елементів форми. Він допомагає користувачу зрозуміти, що потрібно вводити у поле.

Тег label

Мітку можна зв'язати з елементом input за допомогою атрибута for. Значення for повинно збігатися зі значенням атрибута id у поля форми.

<label for="name">
  Ваше ім'я
</label>

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

  <input
    id="email"
    type="text"
  >

  <button>
    Відправити
  </button>
</form>

Label без атрибута for

Існує ще один спосіб — помістити input всередину label. У цьому випадку зв'язок створюється автоматично.

<label>
  Ім'я:
  <input type="text">
</label>
  • label робить форму зрозумілішою.
  • Клік по тексту label активує відповідне поле.
  • Атрибут for повинен відповідати id елемента форми.
  • Label покращує доступність сайту для користувачів.
❗ Важливо:

Рекомендується завжди використовувати label для полів форми. Форма без підписів змушує користувача вгадувати, що потрібно вводити.

Практичне завдання

📌 Завдання:
  1. №1. Створіть поле введення імені.
  2. №2. Додайте до нього мітку за допомогою label.
  3. №3. Зв'яжіть label та input через for і id.
<!-- Початковий код -->

<input type="text">
💡 Показати підказку

Додайте label перед input. Вкажіть однакові значення для for у label та id у input.

✅ Показати відповідь
<label for="username">
  Ім'я користувача:
</label>

<input
  id="username"
  type="text"
>