Кратко
СкопированоЭлемент <select>
используется, когда нужно показать выпадающий список.
Пример
Скопировано<form> <label for="city-select">Ваш город</label> <select name="city" id="city-select"> <option value="">-- Выберите город --</option> <option value="petersburg">Санкт-Петербург</option> <option value="samara">Самара</option> <option value="perm">Пермь</option> <option value="novosibirsk">Новосибирск</option> </select></form>
<form> <label for="city-select">Ваш город</label> <select name="city" id="city-select"> <option value="">-- Выберите город --</option> <option value="petersburg">Санкт-Петербург</option> <option value="samara">Самара</option> <option value="perm">Пермь</option> <option value="novosibirsk">Новосибирск</option> </select> </form>
Подробно
СкопированоВ примере выше показано типовое использование элемента <select>
. Это своего рода обёртка над списком опций, которые задаются тегом <option>
. Чтобы иметь возможность отправить выбранное значение на сервер, необходимо выполнить несколько условий:
- задать тегу
<select>
атрибутname
; - задать каждому тегу
<option>
атрибутvalue
. Если этот атрибут не задан, то его значение будет равно текстовому содержимому тега<option>
.
Если нужно, чтобы изначально был выбран какой-то элемент из списка, нужно задать соответствующему тегу <option>
атрибут selected
.
Внутри тега <select>
могут использоваться только теги <option>
, <optgroup>
и <hr>
.
Атрибуты
СкопированоТег <select>
используется совместно с несколькими специфическими, а так же с большинством атрибутов для элементов форм.
autocomplete
СкопированоРазрешает автозаполнение. Автозаполнение — это когда браузер предлагает сохранить, например, выбранный город, чтобы данные подставлялись при следующем входе.
autofocus
СкопированоАтрибут булевого типа (без значения, либо атрибут есть в теге, либо его нет совсем). Если он указан, то при загрузке страницы фокус будет автоматически помещён на наш выпадающий список.
disabled
СкопированоАтрибут булевого типа. Если задан, то выпадающий список отключается для взаимодействия с пользователем. Если атрибут не задан, то он может быть унаследован у одного из предков (например, у контейнера <fieldset>
или <form>
). Если ни у одного предка вверх по дереву этот атрибут не задан, то выпадающий список доступен для взаимодействия.
form
СкопированоАтрибут указывает на элемент <form>
, с которым связан выпадающий список. Значением атрибута должен быть id
формы в пределах текущего документа. Если атрибут не задан, то <select>
обязательно должен находиться внутри тега <form>
. Но если задать атрибут, то нахождение внутри формы не обязательно и <select>
может находиться в любом месте страницы.
multiple
СкопированоАтрибут булевого типа. Включает возможность выбора сразу нескольких пунктов списка. Если атрибут задан, то внешний вид списка поменяется с однострочного на многострочный с возможностью скроллинга.
name
СкопированоИмя выпадающего списка. При отправке формы значение атрибута name
будет ключом в отправляемом объекте.
required
СкопированоАтрибут булевого типа. Указывает, должен ли обязательно быть выбран какой-то пункт выпадающего списка, значение атрибута value
которого — это не пустая строка. Атрибут учитывается при валидации формы при отправке. Если поле не заполнить, то при попытке отправки формы браузер покажет ошибку.
size
СкопированоЧисловой атрибут. Если включён атрибут multiple
, то это число указывает на количество видимых пунктов списка.
Подсказки
Скопировано💡 Выбрать несколько элементов списка, когда включён атрибут multiple
, можно, используя клавиши Ctrl, Cmd и Shift. Клавиши Ctrl (Windows, Linux) и Cmd (Mac OS) работают одинаково. Мы зажимаем эту клавишу на клавиатуре, а затем кликаем мышкой в нужные пункты списка. Этим способом можно выбрать несколько пунктов, находящихся на разном расстоянии друг от друга. Если выбрать пункт списка, зажать клавишу Shift и выбрать любой другой, то будут выбраны последовательно все пункты списка между этими двумя.
На практике
Скопированосоветует Скопировано
🛠 Выпадающий список — это один из элементов формы, почти не поддающийся стилизации. Мы можем немного изменить внешний вид самого элемента <select>
, но стилизовать выпадающий список опций можно не для всех браузеров. Многие дизайнеры любят рисовать нестандартные выпадающие списки в угоду красоте, но реализация таких списков очень трудоёмка на чистом HTML и CSS. Рекомендуется для выпадающих списков оставлять родной вид, потому что такие списки обладают рядом преимуществ перед нестандартными. Например, выпадающий список опций может выходить за границы окна браузера, давая пользователю возможность выбрать нужный элемент.
🛠 Несмотря на вышесказанное, немного стилизовать выпадающий список всё же можно. Вот как можно изменить вид стрелочки:
<form> <label for="city-select">Нестандартная стрелочка</label> <div class="select-wrapper"> <select name="city" id="city-select"> <option selected disabled>-- Выберите город --</option> <option value="petersburg">Санкт-Петербург</option> <option value="moscow">Москва</option> <option value="kazan">Казань</option> <option value="samara">Самара</option> <option value="perm">Пермь</option> <option value="novosibirsk">Новосибирск</option> </select> </div></form>
<form> <label for="city-select">Нестандартная стрелочка</label> <div class="select-wrapper"> <select name="city" id="city-select"> <option selected disabled>-- Выберите город --</option> <option value="petersburg">Санкт-Петербург</option> <option value="moscow">Москва</option> <option value="kazan">Казань</option> <option value="samara">Самара</option> <option value="perm">Пермь</option> <option value="novosibirsk">Новосибирск</option> </select> </div> </form>
В данном случае мы оборачиваем наш <select>
дополнительным блоком, чтобы задействовать псевдоэлемент :
этого блока. К сожалению, <select>
относится к такому типу элементов, у которых нет своих псевдоэлементов :
и :
.
.select-wrapper { position: relative;}.select-wrapper::after { content: "⬇️"; position: absolute; right: 0; margin-top: -2px; pointer-events: none;}select { appearance: none; width: 200px; padding: 4px; border-color: #aaa; border-radius: 3px;}
.select-wrapper { position: relative; } .select-wrapper::after { content: "⬇️"; position: absolute; right: 0; margin-top: -2px; pointer-events: none; } select { appearance: none; width: 200px; padding: 4px; border-color: #aaa; border-radius: 3px; }
Используем свойство appearance
, чтобы отключить браузерную стрелку справа. В качестве стрелки ставим псевдоэлемент :
от родительского блока. Не забываем про позиционирование, а также отключаем у псевдоэлемента взаимодействие с мышкой, иначе при клике на него выпадающий список раскрываться не будет.