Тег HTML выпадающий список
Тег в HTML используется для создания выпадающего списка в HTML форме.
С помощью атрибута multiple можно создать список с выбором нескольких значений (список с множественным выбором).
Выпадающий список в HTML является одним из элементов форм. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
При отправке формы, на сервер будет отправлена переменная, в качестве названия имеющая имя списка select (значение атрибута name ), содержащая значение выбранного пункта списка. Если в выбранном пункте списка есть атрибут value , то значением считается его содержимое, в противном случае значением считается содержимое тега .
Синтаксис
Примеры использования выпадающего списка в HTML коде
Ниже представлены 4 основных варианта выпадающих списков HTML.
Простой HTML выпадающий список
HTML код простого выпадающего списка
Выпадающий список с выбором нескольких значений
Добавить списку возможность множественного выбора (выбора одновременно нескольких значений) можно используя атрибут multiple . Количество одновременно выводимых на экран пунктов списка с множественным выбором регулируется с помощью атрибута size .
Атрибут name такого списка должен заканчиваться символами «[]», например, name=»cars[]» .
HTML код выпадающего списка с выбором нескольких значений
Раскрывающийся список с группами пунктов
HTML код раскрывающегося списка с группами пунктов
HTML список обязательный для заполнения (выбора)
Для того, чтобы создать список select , обязательный для заполнения ( список, где пользователь должен обязательно выбрать значение) нужно использовать атрибут required , а также добавить внутрь списка первым пунктом с пустым значением атрибута value .
HTML код выпадающего списка обязательного для выбора (заполнения)
Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| Да | Да | Да | Да | Да |
Атрибуты тега select
Логический атрибут. Если указан, при загрузке документа фокус будет переведен на список.
Логический атрибут. Если указан, делает список неактивным.
Данные списка, отмеченного этим атрибутом, не будут переданы на сервер при отправке формы. Атрибут также отключает возможность изменения состояния списка пользователем (например, изменение выбранного пункта).
Указывает на форму, к которой относится список. Используется, если список находится вне HTML кода формы.
Если список находится внутри тега , то использовать атрибут form не нужно, список по умолчанию привязан к форме, внутри которой находится.
Логический атрибут. Открывает возможность множественного выбора. Если указан, вместо выпадающего списка будет выведен список с возможностью выбрать несколько значений (пунктов) одновременно. Количество элементов, доступных без скроллинга регулируется атрибутом size.
Имя списка. Используется при передаче данных формы на сервер. Значение списка будет передано в переменной, имеющей имя, указанное в этом атрибуте.
Логический атрибут. Если указан, список будет определен как обязательный для заполнения (обязательный для выбора). Форма не будет отправлена на сервер, если в таком списке не будет выбрано ни одно значение.
Заполнение контролируется браузером. При попытке отправить форму с незаполненным обязательным списком браузеры обычно выводят на экран ошибку заполнения.
Количество пунктов списка, одновременно выводимых на экран. Для выпадающего списка используется значение 1. Это значение по умолчанию.
Если значение больше чем 1, вместо выпадающего списка будет выведен список со скроллингом.
Как создать выпадающий список в форме
Узнайте, как создать выпадающий список в форме и обработать выбор пользователя с помощью HTML и JavaScript!
Алексей Кодов
Автор статьи
1 июня 2023 в 13:26
В процессе создания веб-страницы, иногда возникает потребность добавить выпадающий список в форму. Выпадающие списки являются удобным способом предоставления пользователю возможности выбора из предопределенного набора опций. В этой статье мы рассмотрим, как создать выпадающий список с использованием HTML и немного JavaScript для обработки выбора пользователя.
Создание выпадающего списка с помощью HTML
Для создания выпадающего списка в HTML используется тег в сочетании с тегом . Тег определяет контейнер для списка, а тег используется для определения каждого элемента списка.
Пример создания выпадающего списка:
В этом примере создается форма с выпадающим списком, содержащим три опции: яблоко, банан и апельсин. Значения опций ( value ) будут отправлены на сервер при отправке формы.
Python-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Обработка выбора пользователя с помощью JavaScript
Чтобы сделать выпадающий список более интерактивным, можно добавить обработчик событий с использованием JavaScript. В этом примере мы добавим обработчик события change , который будет вызываться при изменении выбранного элемента списка.
function handleFruitChange() В этом примере при изменении выбранного элемента списка вызывается функция handleFruitChange() , которая выводит сообщение с выбранным фруктом.
�� Теперь вы знаете, как создать выпадающий список в форме и обработать выбор пользователя с использованием HTML и JavaScript! Это базовые знания, которые пригодятся при создании веб-страниц с формами. Не забывайте продолжать изучать и экспериментировать с HTML, CSS и JavaScript для создания еще более интересных и функциональных сайтов.
Если вам нужна дополнительная помощь или вы хотите углубить свои знания в веб-разработке, рекомендую посетить
Выпадающий список HTML
Выпадающий список в HTML можно сделать при помощи тега select. Помимо выпадающего (или «раскрывающегося») списка, тег select позволяет создавать элемент-список с множественным выбором. Синтаксис использования тега select HTML выглядит следующим образом:
Здесь с помощью тега option задаются элементы списка.
Атрибуты тега SELECT
Рассмотрим атрибуты тега select:
- name
- size — число отображаемых строк в списке (число);
- multiple — включает функцию множественного выбора элементов выпадающего списка;
- disabled — блокирует доступ к элементу;
- form — позволяет связать выпадающий список с формой (может понадобиться, если сам список находится вне формы, к которой должен быть привязан). В качестве аргумента передается id формы.
Пожалуй, это все основные атрибуты тега select, которые чаще всего используются. Посмотрим теперь, как сделать выпадающий список в HTML с использованием указанных атрибутов:
Выпадающий список с помощью HTML - Нубекс Атрибуты тега OPTION
Тег option, как уже отмечалось, позволяет определить дочерние элементы выпадающего списка select, который, в свою очередь, играет роль контейнера. Тег option имеет собственные атрибуты:
- disabled — устанавливает запрет на выбор данного элемента списка;
- label — позволяет установить метку для текущего элемента списка (вместо текста, указанного в теге, выводится значение метки, что позволяет выводить сокращенное значение); Внимание: атрибут не поддерживается в браузере Firefox
- selected — текущий пункт списка будет выбран по умолчанию;
- value — значение, которое будет передано на сервер;
Посмотрим на расширенный вариант использования тега option:
Выглядеть результат приведенного примера будет следующим образом:
В конструкторе сайтов «Нубекс» есть возможность создавать произвольные формы с помощью модуля конструктора форм. Работа выпадающих списков в «Нубекс» описана в статье: Добавление поля выбора
Как сделать выпадающий список в html
Поле выбора значения из раскрывающегося списка.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 20 декабря 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Элемент используется, когда нужно показать выпадающий список.
Пример
Скопировать ссылку «Пример» Скопировано
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>
Подробно
Скопировать ссылку «Подробно» Скопировано
В примере выше показано типовое использование элемента . Это своего рода обёртка над списком опций, которые задаются тегом . Чтобы иметь возможность отправить выбранное значение на сервер, необходимо выполнить несколько условий:
- задать тегу атрибут name ;
- задать каждому тегу атрибут value . Если этот атрибут не задан, то его значение будет равно текстовому содержимому тега .
Если нужно, чтобы изначально был выбран какой-то элемент из списка, нужно задать соответствующему тегу атрибут selected .
Внутри тега могут использоваться только теги и .
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
Тег используется совместно с несколькими специфическими, а так же с большинством атрибутов для элементов форм.
autocomplete
Скопировать ссылку «autocomplete» Скопировано
Разрешает автозаполнение. Автозаполнение — это когда браузер предлагает сохранить, например, выбранный город, чтобы данные подставлялись при следующем входе.
autofocus
Скопировать ссылку «autofocus» Скопировано
Атрибут булевого типа (без значения, либо атрибут есть в теге, либо его нет совсем). Если он указан, то при загрузке страницы фокус будет автоматически помещён на наш выпадающий список.
disabled
Скопировать ссылку «disabled» Скопировано
Атрибут булевого типа. Если задан, то выпадающий список отключается для взаимодействия с пользователем. Если атрибут не задан, то он может быть унаследован у одного из предков (например у контейнера или . Если ни у одного предка вверх по дереву этот атрибут не задан, то выпадающий список доступен для взаимодействия.
form
Скопировать ссылку «form» Скопировано
Атрибут указывает на элемент , с которым связан выпадающий список. Значением атрибута должен быть id формы в пределах текущего документа. Если атрибут не задан, то обязательно должен находиться внутри тега . Но если задать атрибут, то нахождение внутри формы не обязательно и может находиться в любом месте страницы.
multiple
Скопировать ссылку «multiple» Скопировано
Атрибут булевого типа. Включает возможность выбора сразу нескольких пунктов списка. Если атрибут задан, то внешний вид списка поменяется с однострочного на многострочный с возможностью скроллинга.
name
Скопировать ссылку «name» Скопировано
Имя выпадающего списка. При отправке формы значение атрибута name будет ключом в отправляемом объекте.
required
Скопировать ссылку «required» Скопировано
Атрибут булевого типа. Указывает, должен ли обязательно быть выбран какой-то пункт выпадающего списка, значение атрибута value которого — это не пустая строка. Атрибут учитывается при валидации формы при отправке. Если поле не заполнить, то при попытке отправки формы браузер покажет ошибку.
size
Скопировать ссылку «size» Скопировано
Числовой атрибут. Если включён атрибут multiple , то это число указывает на количество видимых пунктов списка.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Выбрать несколько элементов списка, когда включён атрибут multiple , можно, используя клавиши Ctrl , Cmd и Shift . Клавиши Ctrl (Windows, Linux) и Cmd (Mac OS) работают одинаково. Мы зажимаем эту клавишу на клавиатуре, а затем кликаем мышкой в нужные пункты списка. Этим способом можно выбрать несколько пунктов, находящихся на разном расстоянии друг от друга. Если выбрать пункт списка, зажать клавишу Shift и выбрать любой другой, то будут выбраны последовательно все пункты списка между этими двумя.
На практике
Скопировать ссылку «На практике» Скопировано
Денис Ежков советует
Скопировать ссылку «Денис Ежков советует» Скопировано
�� Выпадающий список — это один из элементов формы, почти не поддающийся стилизации. Мы можем немного изменить внешний вид самого элемента , но стилизовать выпадающий список опций можно не для всех браузеров. Многие дизайнеры любят рисовать нестандартные выпадающие списки в угоду красоте, но реализация таких списков очень трудоёмка на чистом 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>
В данном случае мы оборачиваем наш дополнительным блоком, чтобы задействовать псевдоэлемент : : after этого блока. К сожалению, относится к такому типу элементов, у которых нет своих псевдоэлементов : : before и : : after .
.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 , чтобы отключить браузерную стрелку справа. В качестве стрелки ставим псевдоэлемент : : after от родительского блока. Не забываем про позиционирование, а также отключаем у псевдоэлемента взаимодействие с мышкой, иначе при клике на него выпадающий список раскрываться не будет.