Випадаючі списки в HTML

Вивчаємо створення випадаючих списків за допомогою HTML-тега select та елемента option.

Випадаючі списки в HTML

Для створення випадаючого списку в HTML використовується тег select. Всередині нього розміщують варіанти вибору за допомогою тегів option.

Основна структура select

<select>
  <option>Варіант 1</option>
  <option>Варіант 2</option>
  <option>Варіант 3</option>
</select>

select — створює випадаючий список.
option — окремий пункт списку.
selected — робить пункт вибраним за замовчуванням.
value — задає значення пункту для відправки форми.

Приклад випадаючого списку

<label>
  Оберіть місто:
</label>

<select>
  <option>Київ</option>
  <option>Львів</option>
  <option>Одеса</option>
  <option>Харків</option>
</select>

Вибраний пункт за замовчуванням

За допомогою атрибута selected можна одразу встановити активний пункт списку.

<select>
  <option>Червоний</option>
  <option selected>Зелений</option>
  <option>Синій</option>
</select>

Використання value

Атрибут value задає значення, яке буде передано при відправці форми.

<select>
  <option value="uk">Україна</option>
  <option value="pl">Польща</option>
  <option value="de">Німеччина</option>
</select>

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

📌 Завдання:

№1. Створіть випадаючий список із кількома варіантами.
№2. Додайте label перед списком.
№3. Зробіть один пункт вибраним за замовчуванням.

<!-- Початковий код -->

<select>

</select>

💡 Показати підказку

Пункти випадаючого списку створюються тільки через option, який знаходиться всередині select.

✅ Показати відповідь

<label>
  Оберіть професію:
</label>

<select>
  <option>Розробник</option>
  <option selected>Електрик</option>
  <option>Дизайнер</option>
</select>