<select> - HTML-елемент для вибору опцій

HTML-елемент <select> представляє собою елемент керування, який надає меню опцій.

Елемент <select> створює випадаючий список опцій, з яких користувач може вибрати одну або декілька. Кожна опція в списку визначається за допомогою елемента <option>, який може бути згрупований в елементи <optgroup>.

Тег <select> приклад використання в HTML

HTML
<select>
  <option value="value1">Опція 1</option>
  <option value="value2">Опція 2</option>
</select>

Атрибути

Цей тег може мати глобальні атрибути.

autocomplete: Підказка для браузера щодо автозаповнення поля. Може мати значення on, off або більш детальні токени.
autofocus: Булевий атрибут, який вказує, що елемент має отримати фокус одразу після завантаження сторінки.
disabled: Булевий атрибут, який вимикає елемент керування. Він не буде отримувати фокус, а його значення не буде надсилатися з формою.
form: Атрибут id форми, до якої належить цей елемент. Дозволяє розміщувати <select> поза тегом <form>.
multiple: Булевий атрибут, який дозволяє користувачу вибирати декілька опцій одночасно. Якщо він відсутній, можна вибрати лише одну опцію.
name: Ім’я елемента керування, яке надсилається разом із даними форми.
required: Булевий атрибут, який вказує, що користувач повинен вибрати значення перед надсиланням форми.
size: Якщо елемент керування представлений як список, що прокручується, цей атрибут визначає кількість рядків, які будуть видимі одночасно.

Технічне резюме

Категорія контенту	Потоковий контент, фразовий контент, інтерактивний контент, відчутний контент.
Дозволений вміст	Нуль або більше елементів `<option>` або `<optgroup>`.
Пропуск тегів	Жоден, початковий та кінцевий теги є обов’язковими.
Дозволені батьківські елементи	Будь-який елемент, що приймає фразовий контент.
Роль ARIA	`listbox`
DOM інтерфейс	`HTMLSelectElement`

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

<label for="pet-select">Оберіть домашнього улюбленця:</label>
<select name="pets" id="pet-select">
  <option value="" disabled selected>--Будь ласка, оберіть опцію--</option>
  <option value="dog">Собака</option>
  <option value="cat">Кіт</option>
  <option value="hamster">Хом’як</option>
</select>

<label for="cars">Оберіть автомобіль:</label>
<select id="cars" name="cars">
  <optgroup label="Німецькі автомобілі">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
  <optgroup label="Японські автомобілі">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
  </optgroup>
</select>

<label for="topping-select">Оберіть топінги:</label>
<select name="toppings" id="topping-select" multiple size="4">
  <option value="mushrooms">Гриби</option>
  <option value="onions">Цибуля</option>
  <option value="peppers">Перець</option>
  <option value="olives">Оливки</option>
</select>

Стилі за замовчуванням

CSS
select {
  /* Стилі залежать від браузера та ОС */
  border: 1px solid #ccc;
  padding: 4px;
  background-color: white;
}

Підтримка браузерів



`<select>`
`autocomplete`
`disabled`
`form`
`hr_in_select`
`multiple`
`name`
`required`
`size`