Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить <select>?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Елемент `<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> - контейнер списку

| Атрибут | Призначення |
|---|---|
| `name` | Ім'я поля (ключ під час надсилання даних) |
| `id` | Зв'язок з `<label>` |
| `multiple` | Дозволяє обрати **декілька варіантів** |
| `size` | Показує одразу декілька пунктів (без розкриття) |
| `required` | Робить вибір обов'язковим |
| `disabled` | Вимикає весь список |

Приклад множинного вибору:

```html
<select name="fruits" multiple size="3">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="banana">Banana</option>
</select>
```

Користувач може обрати одразу декілька пунктів, утримуючи **Ctrl / Cmd**.

---

#### <option> - окремий варіант

| Атрибут | Призначення |
|---|---|
| `value` | Значення, яке буде надіслане на сервер |
| `selected` | Робить варіант обраним за умовчанням |
| `disabled` | Вимикає варіант |

Приклад:

```html
<option value="lviv" selected>Lviv</option>
```

---

#### <optgroup> - групування варіантів

Дозволяє розбити список на логічні групи:

```html
<select name="car">
  <optgroup label="Німецькі марки">
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
  </optgroup>
  <optgroup label="Японські марки">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
  </optgroup>
</select>
```

---

### 3. Як працює під час відправлення форми

Якщо користувач обирає **один варіант**, сервер отримує:

```javascript
city=lviv
```

Якщо використовується `multiple` і обрано декілька:

```javascript
fruits=apple&fruits=banana
```

---

### 4. Коли використовувати <select>

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

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

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

---

### Підсумок:

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

---

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати405 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.