HTML тег - select - определение и примеры использования
Меню
Веб-разработка
Тег select HTML

HTML - тег <select> используется для создания раскрывающегося списка опций, который появляется, когда пользователь нажимает на элемент формы, и позволяет выбрать один из вариантов.


Тег <select> - синтаксис и код

Тег <select> представлен парами. Содержимое записывается между открывающим (<select>) и закрывающим (</select>) тегами.

Пример, как создать раскрывающийся список с четырьмя опциями:

<label for="planets">Выберите планету:</label>

<select name="planets" id="planets">
  <option value="mars">Марс</option>
  <option value="jupiter">Юпитер</option>
  <option value="venus">Венера</option>
  <option value="saturn">Сатурн</option>
</select>


Определение и использование

  • Тег <select> используется для создания раскрывающегося списка;
  • Элемент select чаще всего используется в форме для сбора вводимых пользователем данных;
  • Атрибут name необходим для ссылки на данные формы после ее отправки (если вы опустите атрибут name, никакие данные из раскрывающегося списка не будут отправлены);
  • Атрибут id необходим для связи раскрывающегося списка с меткой;
  • Теги <option> внутри элемента select определяют доступные параметры в раскрывающемся списке.

HTML - тег <select> сложно эффективно стилизовать с помощью CSS. Вы можете воздействовать на определенные части элемента. Например, можно управлять отображаемым шрифтом, моделью блока и т. д., а также использовать CSS свойство appearance для удаления внешнего вида системы по умолчанию. Но эти свойства не дают стабильного результата во всех браузерах. Внутренняя структура тега <select> сложна, и ее сложно контролировать. Для получения полного контроля вам может понадобиться библиотека с улучшенными виджетами форм или раскрывающееся меню с использованием несемантических элементов.

✪ Рекомендация: всегда добавляйте тег <label>, чтобы обеспечить максимальную доступность!
★ Примечание: если вам нужно отправить данные на сервер или обратиться к списку с помощью скриптов, тег <select> следует поместить внутри тега <form>

Поддержка <select> браузерами

Chrome Поддерживает
Yandex Browser Поддерживает
Edge Поддерживает
Firefox Поддерживает
Safari Поддерживает
Opera Поддерживает

Атрибуты

Атрибут Значение Описание
autofocus autofocus Указывает, что раскрывающийся список должен автоматически получать фокус при загрузке страницы.
disabled disabled Указывает, что раскрывающийся список должен быть отключен
form

form_id

Определяет, к какой форме принадлежит раскрывающийся список
multiple multiple Указывает, что одновременно можно выбрать несколько параметров
name name Определяет имя раскрывающегося списка
required required Указывает, что пользователю необходимо выбрать значение перед отправкой формы
size number Определяет количество видимых опций в раскрывающемся списке

Глобальные атрибуты

Тег <select> также поддерживает глобальные атрибуты в HTML

Атрибуты событий

Тег <select> также поддерживает атрибуты событий в HTML


Настройки CSS по умолчанию

Отсутствуют.


Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

 

Поделиться ссылкой