HTML-тег <select>

Характеристики

• Тип: строчный, интерактивный, семантический
• Назначение: Предоставляет выпадающий список опций для выбора пользователем.
• Родители: <form>, <fieldset>, <label>, любые HTML-теги, которые могут содержать строчные элементы.
• Потомки: <option>, <optgroup>.
• Глобальные атрибуты: все
• Атрибуты событий: все

Атрибуты

• name — имя элемента формы.
• multiple — позволяет выбрать несколько значений.
• disabled — отключает элемент.
• required — указывает, что поле является обязательным.
• size — определяет количество видимых опций.
• autofocus — автоматически устанавливает фокус на элемент при загрузке страницы.
• form — связывает элемент с формой, если он находится вне её.

Пример использования

<select id="mySelect" name="options">
  <option value="option1">Опция 1</option>
  <option value="option2">Опция 2</option>
</select>

Использование в JavaScript

// Получение элемента по ID
const select = document.getElementById('mySelect');

// Изменение выбранного значения
select.value = 'option2';

// Добавление класса
select.classList.add('new-class');

// Отключение элемента
select.disabled = true;

Рекомендации по обеспечению доступности (a11y)

• Связывайте <select> с <label> для улучшения доступности.
• При использовании атрибута multiple убедитесь, что пользователи понимают, как выбрать несколько опций.

Полезные ссылки