Чат веб-разработчиков
Раскрывающийся список в HTML: тег select

Делаем раскрывающийся список в HTML

Привет! В этом уроке поговорим про довольно часто используемый на формах элемент - селект. Раскрывающий список, по сути, выполняет ту же функцию, какую делает переключатель. А именно, он дает возможность указать на один из вариантов ответа среди всех присутствующих.

Создание такого списка осуществляется с помощью тега <select>. Он является парным и у него есть атрибуты, которые вам уже должны быть хорошо известны. Это name и id.

Чтобы добавить варианты ответов, следует использовать парный тег <option>, разместив его в теге <select>. На практике это выглядит вот так:

Код доступен только после покупки курса HTML для начинающих.

А результат в браузере выглядит вот так:
Пример селекта

Значение варианта ответа следует указывать в атрибуте value тега <option>. А вот внутри самого тега следует разместить подпись варианта ответа.

Следует понимать один важный нюанс. Что если атрибут value будет отсутствовать, то при выборе варианта сервер получит текст подписи. Например, в нашем случае, если его убрать, то будет передано значение "Красная". Если же атрибут будет присутствовать, то сервер получит его значение, например: "red".

Мультиселект

Иногда, при создании раскрывающихся списков, возникает необходимость позволить пользователю осуществить выбор не одного, а сразу нескольких вариантов. Раскрывающийся список, где такой выбор возможен, принято называть мультиселект.
Мультиселект

Сделать это можно, используя атрибут multiple, который добавляется к тегу <select>. Вот так:

Код доступен только после покупки курса HTML для начинающих.

Для того, чтобы в браузере выбрать несколько вариантов, следует зажать клавишу Ctrl и нажать на нужные варианты левой кнопкой мышки.

Чтобы задать высоту такого списка, необходимо использовать атрибут size тега <select>:

Код доступен только после покупки курса HTML для начинающих.

Результат:
Мультиселект с фиксированной высотой

Как видим, теперь высота списка ограничена двумя элементами, а также появилась полоса прокрутки.

Если же необходимо, чтобы какие-либо значения отмечались по умолчанию, как выбранные, то в таком случае следует прописать атрибут selected возле соответствующих тегов <option>:

Код доступен только после покупки курса HTML для начинающих.

Результат в браузере:
Мультиселект с выбранными значениями по умолчанию

Читайте также
Комментарии


trialex3
trialex3

А как можно задать разные цвета для каждой опции? Прописывая стайл не получается

<option style="color: black" value="black">Black</option>
Sony
Sony

Я не эксперт, но насколько мне известно, чтобы задать ФОН опции ,можно(нужно)прописать style="background-color: red" . В вашем случае вы задаете цвет шрифту.Для применения цвета шрифта ,вроде, нужно отдельно прописывать в <style>...</style>

omeluhin89
omeluhin89

Заметил минорную опечатку в названии id для мультиселекта. Не подумайте ничего плохого, просто решил помочь в улучшении качества кода)

ivashkevich
ivashkevich

Спасибо, исправил =)