Що робить <select>?

HTMLJunior~1 хв читання

Елемент <select> створює випадний список (меню вибору) в HTML-формі. Він використовується, коли користувачу потрібно обрати один або декілька варіантів із заздалегідь заданого набору.

1. Базовий приклад

html

<form action="/submit">
  <label for="city">Оберіть місто:</label>
  <select id="city" name="city">
    <option value="kyiv">Kyiv</option>
    <option value="lviv">Lviv</option>
    <option value="warsaw">Warsaw</option>
  </select>
  <button type="submit">Надіслати</button>
</form>

Що тут відбувається:

<select> - контейнер для списку варіантів,
<option> - окремий пункт вибору,
під час відправлення форми надсилається значення атрибута value обраного варіанта.

Приклад надсилання:

javascript

city=lviv

2. Основні теги та атрибути

Використовуйте його, якщо:

користувач має обрати один варіант зі списку (наприклад, місто, країну, категорію);
кількість варіантів обмежена й заздалегідь відома;
потрібен компактний елемент інтерфейсу, що економить місце.

Не використовуйте <select>, якщо варіантів десятки чи сотні (краще автодоповнення / пошук).

Підсумок:

Властивість	Опис
Тег	`<select>`
Вкладені теги	`<option>`, `<optgroup>`
Призначення	Випадний список для вибору одного чи декількох значень
Надсилання даних	Через атрибут `name` і обране `value`
Часто використовувані атрибути	`multiple`, `required`, `disabled`, `size`, `selected`

Простими словами: <select> - це випадне меню, де користувач обирає варіант зі списку. Якщо <input> - це "введення", то <select> - це "вибір".

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Що робить <select>?

#1. Базовий приклад

#2. Основні теги та атрибути

#Підсумок:

Коротка відповідь

1. Базовий приклад

2. Основні теги та атрибути

Підсумок: