Как сделать выбор в html. Горизонтальное выпадающее меню

Благодаря тегу появилась возможность создания раскрывающего списка и списка с множественным выбором. Если вы собираетесь отправлять данные на сервер, то тег должен быть помещен в форму (тег

). Далее пример:

Какие имена вам нравятся?
Никакие
Иван
Петр
Николай

Какие есть атрибуты у тега select?

Тег имеет три полезных атрибута (остальные рассматривать не будем, про них уже я говорил). Первый атрибут multiple , благодаря нему можно сделать возможность выбора нескольких элементов списка. Чтобы выбирать несколько элементов, нужно зажать shift или ctr и наживать мышкой на нужные элементы. Далее пример применения атрибута multiple:

Какие имена вам нравятся?
Никакие
Иван
Петр
Николай

Второй атрибут required , с помощью его можно «сказать» браузеру, что список должен быть выбран перед отправкой формы, иначе браузер запретит отправлять форму, и выведет вам соответствующее сообщение. Вид этого сообщения зависит полностью от браузера и пользователь не может его изменять. Далее пример применения атрибута required:

Да или нет?
Да
Нет

Третий атрибут size , с помощью его можно указать количество отображаемых элементов списка. Атрибут size может содержать только целое число. Атрибут size трансформирует список, например, если он равен 1, то тег отображается как «выпадающий список», а если атрибут size больше 1, то раскрывающийся список отображается как «список с прокруткой». Далее два примера применения атрибута size:

Да или нет?
Да
Нет

Да или нет?
Да
Нет

Последнее обновление: 08.04.2016

Элемент select создает список. В зависимости от настроек это может быть выпадающий список для выбора одного элемента, либо раскрытый список, в котором можно выбрать сразу несколько элементов.

Создадим выпадающий список:

Выберите модель: iPhone 6S Lumia 950 Nexus 5X Galaxy S7

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

iPhone 6S

С помощью атрибута selected мы можем установить выбранный по умолчанию элемент - это необязательно должен быть первый элемент в списке:

iPhone 6S Lumia 950 Nexus 5X

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

Выберите модель iPhone 6S Lumia 950 Nexus 5X

Для создания списка с множественным выбором к элементу select надо добавить атрибут multiple :

Выберите модель:
iPhone 6S Lumia 950 Nexus 5X Galaxy S7

Зажав клавишу Ctrl, мы можем выбрать в таком списке несколько элементов:

Select также позволяет группировать элементы с помощью тега :

Выберите модель: iPhone 6S iPhone 6S Plus iPhone 5SE Lumia 950 Lumia 950 XL Lumia 650

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

Сегодня хочу представить небольшой «рецепт» создания списка на CSS. Никакого JQuery, никакого CSS3 — только старый, добрый, кроссбраузерный CSS. Пример достаточно простой, поэтому опытным товарищам, возможно, будет неинтересно. Будем реализовывать выпадающий список с социальными кнопками.

Итак, не будем долго рассуждать, перейдем сразу к делу

HTML

Я сознательно опускаю общие моменты, вроде подключения стилей, чтобы код не разрастался. Внизу страницы я дам ссылку на исходники — там все есть.
Что у нас в HTML — обычный список и необычный заголовок. Его необычность в том, что сделан он гиперссылкой, которая позволяет отследить событие :hover , то есть наведение. Выпадающий список будет работать при наведении курсора на заголовок.

CSS

Для начала рассмотрим базовые стили выпадающего списка. Я старался комментировать каждую строку кода, чтобы было понятнее:

/*Сбросим отступы*/ .droplink ul,.droplink h3,.droplink h3 a{ padding:0;margin:0 } /*Базовая обертка*/ .droplink { width:200px; position:absolute; margin:10px 0 0 25px } /*Стиль блока при наведении*/ .droplink:hover{ height:auto; background-color:#3E403D; border:solid 1px #3A3C39 } /*Заголовок в обычном состоянии*/ .droplink h3 a{ text-align:center; width:100%; display:block; padding:12px 0px; color:#999; text-decoration:none } .droplink h3 a img{border:none} /*Стиль для заголовка при наведении*/ .droplink:hover h3 a { color:#FFF; font-weight:bold; position:absolute }

Тут ничего особенного, указали размеры и стиль блока, стиль заголовка и для обеих элементов — их стили при наведении курсора. Идем дальше:

/*Скрываем список без наведения*/ .droplink ul{ list-style:none; display:none } /*Отображаем список при наведении*/ .droplink:hover ul{ display:block; margin-top:40px } .droplink li{display:block}

Этот код уже поинтереснее и показывает, как ведет себя выпадающий список при наведении курсора. В обычном состоянии стоит display:none, то есть он не отображается. При наведении — показываем его блоком. Вот и весь секрет. Теперь немного оформим элементы списка и вставим иконки:

/*Стиль элемента списка*/ .droplink li a{ padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none; font-size:12px; background-repeat:no-repeat; background-position: 10px 3px } /*Стиль элемента при наведении*/ .droplink li a:hover{ background-color:#999 } /*Иконки*/ .facebook a {background-image:url("icons/facebook.png")} .twitter a {background-image:url("icons/twitter.png")} .vk a {background-image:url("icons/vk.png")} .rss a {background-image:url("icons/rss.png")} .gplus a {background-image:url("icons/gplus.png")}

Вот, собственно, и все. Выпадающий список готов и смотрится достаточно симпатично. Можно оформить элементы на свое усмотрение, добавить закругленных углов и прочих «примочек».

Если необходимо, чтобы список «перекрывал» текст под ним при наведении — смотрите в сторону z-index .

Если что-то непонятно или не получается — спрашивайте в комментариях или воспользуйтесь кнопкой «Отправить сообщение», она там —>

Описание

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

Синтаксис

Пункт 1 Пункт 2

Атрибуты

Позволяет перейти к списку с помощью некоторого сочетания клавиш. Устанавливает, что список получает фокус после загрузки страницы. Блокирует доступ и изменение элемента. Связывает список с формой. Позволяет одновременно выбирать сразу несколько элементов списка. Имя элемента для отправки на сервер или обращения через скрипты. Список обязателен для выбора перед отправкой формы. Количество отображаемых строк списка. Определяет последовательность перехода между элементами при нажатии на клавишу Tab

Закрывающий тег

Обязателен.

HTML5 IE Cr Op Sa Fx

Выберите героя Чебурашка Крокодил Гена Шапокляк Крыса Лариса

Выпадающий список в HTML можно сделать при помощи тега select . Помимо выпадающего (или "раскрывающегося") списка, тег select позволяет создавать элемент-список с множественным выбором. Синтаксис использования тега select HTML выглядит следующим образом:

Электроник Сыроежкин Чижиков Кукушкина

Здесь с помощью тега option задаются элементы списка.

Результат применения:

Электроник Сыроежкин Чижиков Кукушкина

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

Рассмотрим атрибуты тега select :

• name
• size - число отображаемых строк в списке (число);
• multiple - включает функцию множественного выбора элементов выпадающего списка;
• disabled - блокирует доступ к элементу;
• form - позволяет связать выпадающий список с формой (может понадобиться, если сам список находится вне формы, к которой должен быть привязан). В качестве аргумента передается id формы.

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

Электроник Сыроежкин Чижиков Кукушкина

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

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

• disabled - устанавливает запрет на выбор данного элемента списка;
• label - позволяет установить метку для текущего элемента списка (вместо текста, указанного в теге, выводится значение метки, что позволяет выводить сокращенное значение); Внимание: атрибут не поддерживается в браузере Firefox
• selected - текущий пункт списка будет выбран по умолчанию;
• value - значение, которое будет передано на сервер;

Посмотрим на расширенный вариант использования тега option :

Господин Электроник Сыроежкин Чижиков Кукушкина

Выглядеть результат приведенного примера будет следующим образом:

Господин Электроник Сыроежкин Чижиков Кукушкина

В конструкторе сайтов "Нубекс" есть возможность создавать произвольные формы с помощью модуля конструктора форм. Работа выпадающих списков в "Нубекс" описана в статье: