HTML-тег <select>
HTML-тег <select> используется для создания выпадающего списка вариантов, который появляется при нажатии на элемент формы, и позволяет пользователю выбрать один из вариантов.
Тег <option> используется для определения возможных вариантов выбора. Этот тег помещается внутрь тега <select>.
Первый вариант из списка выбирается по умолчанию. Для изменения предварительно заданного варианта используется атрибут selected.
Тег <optgroup> используется для группировки нескольких вариантов в одну группу. Метка <optgroup> отображается в виде жирного заголовка.
Внешний вид списка зависит от атрибута size, который указывает количество видимых вариантов. Ширина списка зависит от длины текста внутри <option>. Ширину также можно регулировать с помощью стилей CSS.
Тег <select> сложно эффективно стилизовать с помощью CSS. Вы можете воздействовать на определенные части элемента. Например, можно управлять отображаемым шрифтом, блочной моделью и т. д., а также использовать свойство appearance для удаления стандартного системного вида. Однако эти свойства не дают стабильного результата во всех браузерах. Внутренняя структура тега <select> сложна, и ею трудно управлять. Для получения полного контроля может потребоваться библиотека с улучшенной стилизацией элементов форм или выпадающее меню с использованием не семантических элементов.
TIP
Если вам нужно отправить данные на сервер или обратиться к списку с помощью скриптов, тег <select> должен находиться внутри тега <form>.
Синтаксис
Тег <select> является парным. Содержимое записывается между открывающим (<select>) и закрывающим (</select>) тегами.
Пример HTML-тега <select>:
Пример HTML-тега <select>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>Результат
Books HTML CSS PHP JavaScript ---
Пример HTML-тега <select> с тегом <optgroup>:
Пример HTML-тега <select> с тегом <optgroup>
<!DOCTYPE html>
<html>
<head>
<title>Window title of the page</title>
</head>
<body>
<select aria-label="Books and Snippets">
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="java">Java</option>
</optgroup>
</select>
</body>
</html>В этом примере тег <optgroup> используется для объединения вариантов в группы.
Результат
HTML CSS Git Java ---
Пример HTML-тега <input> с тегом <datalist>:
Пример HTML-тега <input> с тегом <datalist>
<!DOCTYPE html>
<html>
<head>
<title>Window title of the page</title>
</head>
<body>
<p>Airport of departure:</p>
<form action="action_form.php" method="get">
<input type="text" list="airports" name="airports" />
<datalist id="airports">
<option value="Berlin">
<option value="Los Angeles">
<option value="Moscow">
<option value="Paris">
</datalist>
<input type="submit" value="confirm" />
</form>
</body>
</html>В этом примере используется тег <form>, поскольку нам нужно отправить информацию на сервер.
Результат
Airport of departure:
---
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| autofocus | autofocus | Определяет, что список должен быть в фокусе после загрузки страницы. |
| disabled | disabled | Указывает, что список отключен, пользователь не может взаимодействовать с ним. |
| form | form_id | Поддерживается во всех современных браузерах. |
| multiple | multiple | Указывает, что можно выбрать более одного варианта. Способ выбора нескольких вариантов зависит от операционной системы. В Windows нужно удерживать клавишу CTRL, в Mac — CMD. |
| name | name | Определяет имя для выпадающего меню. Может использоваться для доступа к данным формы после её отправки или для привязки к элементу JavaScript. |
| required | required | Указывает, что выбор варианта обязателен. |
| size | number | Указывает количество видимых вариантов в выпадающем списке. Если значение атрибута "size" больше 1 и меньше общего количества вариантов в списке, браузер автоматически добавит полосу прокрутки, чтобы указать, что есть больше вариантов для просмотра. |
Тег <select> поддерживает глобальные атрибуты и атрибуты событий.
Как стилизовать HTML-тег <select>
Практика
Какова функция HTML-элемента 'select'?