HTML тег используется для создания раскрывающегося (выпадающего) списка, который появляется при щелчке мышью по элементу формы и позволяет посетителю сайта выбрать один из предопределенных вариантов.
Ширина раскрывающегося списка будет определяться самым длинным текстом, указанным в теге .
Атрибуты
autofocus: Указывает, что элемент должен автоматически получить фокус при загрузке веб-страницы. Возможные значения логического атрибута autofocus :
Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях, и в Firefox.
disabled: Указывает, что элемент неактивен, то есть пользователь не сможет взаимодействовать с элементом. Возможные значения логического атрибута disabled :
Примечание: атрибут form не поддерживается в Firefox.
Windows: удерживайте нажатой клавишу CTRL для выбора нескольких вариантов.
Mac: удерживайте нажатой клавишу CMD для выбора нескольких вариантов.
Примечание: из-за различных способов выбора нескольких элементов и дополнительного уведомления пользователей о доступности выбора нескольких вариантов, рекомендуется вместо раскрывающегося списка использовать флажки.
name: Определяет имя для раскрывающегося списка. Оно может быть использовано для доступа к данным формы после ее отправки или для ссылки на элемент в JavaScript. required: —> size: Указывает количество видимых вариантов в раскрывающимся списке. Если значение атрибута size больше 1, но меньше общего количества вариантов списка, то браузер автоматически добавит полосу прокрутки, чтобы указать, что есть еще варианты для просмотра. Пример »
Благодаря тегу появилась возможность создания раскрывающего списка и списка с множественным выбором. Если вы собираетесь отправлять данные на сервер, то тег должен быть помещен в форму (тег ). Далее пример:
Какие есть атрибуты у тега select?
Тег имеет три полезных атрибута (остальные рассматривать не будем, про них уже я говорил). Первый атрибут multiple , благодаря нему можно сделать возможность выбора нескольких элементов списка. Чтобы выбирать несколько элементов, нужно зажать shift или ctr и наживать мышкой на нужные элементы. Далее пример применения атрибута multiple :
Второй атрибут required , с помощью его можно «сказать» браузеру, что список должен быть выбран перед отправкой формы, иначе браузер запретит отправлять форму, и выведет вам соответствующее сообщение. Вид этого сообщения зависит полностью от браузера и пользователь не может его изменять. Далее пример применения атрибута required :
Третий атрибут size , с помощью его можно указать количество отображаемых элементов списка. Атрибут size может содержать только целое число. Атрибут size трансформирует список, например, если он равен 1, то тег отображается как «выпадающий список», а если атрибут size больше 1, то раскрывающийся список отображается как «список с прокруткой». Далее два примера применения атрибута size :
Раскрывающийся список и текстовая область
В этой статье мы с Вами рассмотрим элементы, которые позволяют создавать раскрывающиеся списки, научимся формировать группы в этих списках, рассмотрим как отключать пункты и даже группы списков, познакомимся с элементом, который позволяет создать многострочное текстовое поле, его в дальнейшем вы можете использовать внутри HTML форм (элемент ).
Раскрывающийся список
Первый пункт в списке, как правило, отображается как выбранный, но вы можете добавить к этому элементу атрибут selected, чтобы задать предопределенный вариант.
Давайте рассмотрим пример использования:
Пример использования элемента name ="blacklist"> value ="2PAC">Tupac Amaru Shakur value ="50cent">Curtis Jacksonvalue ="Snoop Dogg"selected>Calvin Cordozar Broadus, Jr.
В этом примере мы тегом создали раскрывающийся список, внутри него мы поместили три элемента , которые определяют его пункты. Атрибутом selected указали, что третий пункт предопределен (будет выбран по умолчанию вместо первого).
Обращаю Ваше внимание на то, что необходимо использовать атрибут value (значение) тега , чтобы указать какое значение отправляется на сервер для дальнейшей обработки.
В браузере это выглядит следующим образом:
Отключение пункта меню
Пример использования HTML тега в раскрывающемся списке "A">Option A value = "B">Option B value = "C"disabled>Option C
В браузере это выглядит следующим образом:
> label ="Blacklist">value ="2PAC"> Tupac Amaru Shakur value ="50cent"> Curtis Jackson value ="Snoop Dogg"selected> Calvin Cordozar Broadus, Jr. label ="Whitelist">value ="Eminem">Marshall Bruce Mathers III
