Как делается в html выпадающий список?

Приветствую всех читателей моего блога. Сегодня я вам расскажу, как делать в html выпадающий список, какие теги и атрибуты нужно использовать, а также для каких целей это вам может понадобиться.

Тег select и создание выпадающего списка

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

Выберите животное
<select>
        <option value = "Бык">Бык</option>
        <option value = "Корова">Корова</option>
        <option value = "Овца">Овца</option>
        <option value = "Конь">Конь</option>
</select>

При этом то, что выводится между открывающей и закрывающей частью option, вы увидите на экране, а значение, которое содержится в атрибуте value, будет отправлено на сервер или обработано с помощью скрипта.

Список в html может быть обычным, и с множественным выбором. Чтобы сделать возможность выбирать несколько пунктов, нужно добавить в select пустой атрибут multiple. Чтобы выбрать несколько значений, удерживайте ctrl и жмите левую кнопку мыши.

Другой полезный атрибут – size. Он позволяет выбирать, сколько строк будет показывать в раскрывающемся списке.

Еще один атрибут – disabled. Он делает список недоступным для нажатия и просмотра пунктов, но при этом его видно на странице.

Required – html5-атрибут. Если он задан, форма не будет отправлена без выбора значения из раскрывающегося списка. В общем, он становится обязательным для выбора. Пока атрибут работает далеко не во всех браузерах.

Атрибуты тега option

Собственно, select служит лишь контейнером для пунктов списка, сами они задаются с помощью тега option. У него есть параметр value, как мы уже выяснили, но кроме этого еще есть и другие. Например:
Disabled – делает пункт списка недоступным для выбора. Отображается он будет, но кликнуть на него нельзя.

Selected – элемент будет выбранным по умолчанию. В обычном списке этот атрибут без значения можно задать только одному пункту, во множественном – нескольким.

Важное уточнение для правильной работы

Если результат выбора нужно будет отправить на сервер или обработать через скрипты, то помещайте select в форму, чтобы не возникало никаких ошибок. Дело в том, что раскрывающийся список изначально создавался именно как один из элементов формы.

Для чего нужен select

Обычно он может пригодиться вам, если вы делаете на своем сайте регистрация, либо хотите провести опрос. Элемент имеет недостаток – он не очень хорошо меняет внешний вид через css.

По умолчанию при нажатию на список появляется синяя рамка, таким же цветом выделяются те пункты списка, на которые наведен курсор. Чтобы при нажатии рамка не появлялась, либо выделялась другим цветом, можно написать такой селектор:

Теперь рамка будет оранжевой.

Option тоже можно стилизовать, но вот при наведении на пункт его фон становится синим и через стили это почему-то не меняется.

Кстати, может кто-то из вас знает, как изменить фоновый цвет при наведении на пункт через css?

Вот, собственно, пока и все по тегу select и его применению. Никаких дополнительных возможностей в html для него не предусмотрено. Все остальные операции с ним можно производить с помощью javascript и php. Например, если вам нужно создать список для выбора года рождения и там может быть 80-100 разных вариантов, не будете же вы вручную их писать?

Как раз для этого и нужно использовать программирование, а именно цикл. Ну да ладно, это уже тема для другого разговора, а на сегодня это вся информация, которую я хотел вам сообщить. С другими основными тегами в html вы можете познакомиться здесь.