Главная » Справочник » Справочник по HTML » Справочник по тегам HTML элементов » Тег select HTML

Тег 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> браузерами

	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает

Атрибуты

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

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

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

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

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

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

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

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

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