Выпадающий список css html: Выпадающие списки — Учебник CSS — schoolsw3.com

Разное 

Содержание

Тег HTML выпадающий список

Рейтинг: 4 из 5, голосов 44

28 декабря 2019 г.

Тег <select> в HTML используется для создания выпадающего списка в HTML форме.

С помощью атрибута multiple можно создать список с выбором нескольких значений (список с множественным выбором).

Пункты выпадающего списка определяются с помощью тега <option>. Тег <optgroup> определяет группы пунктов внутри выпадающего списка HTML.

Выпадающий список в HTML является одним из элементов форм. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

При отправке формы, на сервер будет отправлена переменная, в качестве названия имеющая имя списка select (значение атрибута name), содержащая значение выбранного пункта списка. Если в выбранном пункте списка <option> есть атрибут value, то значением считается его содержимое, в противном случае значением считается содержимое тега <option>.

Синтаксис

<select>элементы списка</select>

Примеры использования выпадающего списка <select> в HTML коде

Ниже представлены 4 основных варианта выпадающих списков HTML.

Простой HTML выпадающий список

СинийЗеленыйЖелтыйКрасныйОранжевыйЧерный

HTML код простого выпадающего списка

<select name="user_profile_color_1">
<option value="1">Синий</option>
<option value="2">Зеленый</option>
<option value="3">Желтый</option>
<option value="4">Красный</option>
<option value="5">Оранжевый</option>
<option value="6">Черный</option>
</select>

Выпадающий список с выбором нескольких значений

Добавить списку возможность множественного выбора (выбора одновременно нескольких значений) можно используя атрибут multiple. Количество одновременно выводимых на экран пунктов списка с множественным выбором регулируется с помощью атрибута size.

Атрибут name такого списка должен заканчиваться символами «[]», например, name=»cars[]».

NissanToyotaBMWWolksvagenSkodaMercedes-Benz

HTML код выпадающего списка с выбором нескольких значений

<select name="user_cars[]" multiple="multiple" size="4">
<option value="1">Nissan</option>
<option value="2">Toyota</option>
<option value="3">BMW</option>
<option value="4">Wolksvagen</option>
<option value="5">Skoda</option>
<option value="6">Mercedes-Benz</option>
</select>

Раскрывающийся список с группами пунктов

Пункты в HTML списке select можно группировать с помощью тега <optgroup>. Название группы не доступно для выбора, служит для удобства пользователей.

МоскваСанкт-ПетербургНовосибирскКиевХарьковЛьвовМинскБобруйскГомель

HTML код раскрывающегося списка с группами пунктов

<select name="user_city">
<optgroup label="Россия">
<option value="1">Москва</option>
<option value="2">Санкт-Петербург</option>
<option value="3">Новосибирск</option>
</optgroup>
<optgroup label="Украина">
<option value="4">Киев</option>
<option value="5">Харьков</option>
<option value="6">Львов</option>
</optgroup>
<optgroup label="Беларусь">
<option value="7">Минск</option>
<option value="8">Бобруйск</option>
<option value="9">Гомель</option>
</optgroup>
</select>

HTML список обязательный для заполнения (выбора)

Для того, чтобы создать список select, обязательный для заполнения (<select> список, где пользователь должен обязательно выбрать значение) нужно использовать атрибут required, а также добавить внутрь списка первым пунктом <option> с пустым значением атрибута value.

Выберите значениеСинийЗеленыйЖелтыйКрасныйОранжевыйЧерный

HTML код выпадающего списка обязательного для выбора (заполнения)

<select name="user_profile_color_2" required="required">
<option value="">Выберите значение</option>
<option value="1">Синий</option>
<option value="2">Зеленый</option>
<option value="3">Желтый</option>
<option value="4">Красный</option>
<option value="5">Оранжевый</option>
<option value="6">Черный</option>
</select>

Поддержка браузерами

Тег
<select> Да Да Да Да Да

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

Атрибут Значения Описание
autofocus не указывается / autofocus

Логический атрибут.

Если указан, при загрузке документа фокус будет переведен на список.
disabled не указывается / disabled

Логический атрибут. Если указан, делает список неактивным.

Данные списка, отмеченного этим атрибутом, не будут переданы на сервер при отправке формы. Атрибут также отключает возможность изменения состояния списка пользователем (например, изменение выбранного пункта).
form id формы

Указывает на форму, к которой относится список. Используется, если список <select> находится вне HTML кода формы.

Если список находится внутри тега <form>, то использовать атрибут form не нужно, список по умолчанию привязан к форме, внутри которой находится.
multiple не указывается / multiple

Логический атрибут. Открывает возможность множественного выбора. Если указан, вместо выпадающего списка будет выведен список с возможностью выбрать несколько значений (пунктов) одновременно. Количество элементов, доступных без скроллинга регулируется атрибутом

size.
name текст

Имя списка. Используется при передаче данных формы на сервер. Значение списка будет передано в переменной, имеющей имя, указанное в этом атрибуте.
required не указывается / required

Логический атрибут. Если указан, список будет определен как обязательный для заполнения (обязательный для выбора). Форма не будет отправлена на сервер, если в таком списке не будет выбрано ни одно значение.

Заполнение контролируется браузером. При попытке отправить форму с незаполненным обязательным списком браузеры обычно выводят на экран ошибку заполнения.
size число

Количество пунктов списка, одновременно выводимых на экран. Для выпадающего списка используется значение 1. Это значение по умолчанию.

Если значение больше чем 1, вместо выпадающего списка будет выведен список со скроллингом.

Тег <select> также поддерживает глобальные HTML атрибуты.

by Lebedev

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

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

ЧебурашкаКрокодил ГенаШапоклякКрыса ЛарисаВыберите герояЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Список множественного выбораРаскрывающийся список

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Атрибуты

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

Также для этого тега доступны универсальные атрибуты и события.

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

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT</title>
 </head>
 <body>  
 
  <form action="select1.php" method="post">
   <p><select size="3" multiple name="hero[]">
    <option disabled>Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option selected value="Крокодил Гена">Крокодил Гена</option>
    <option value="Шапокляк">Шапокляк</option>
    <option value="Крыса Лариса">Крыса Лариса</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Строчные элементыФормы

  • Поле со списком

Раскрывающийся список CSS — Studytonight

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

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

Давайте лучше разберемся с помощью примеров.

Пример: Создать раскрывающийся список CSS

В данном примере мы собираемся создать раскрывающийся список. Итак, мы создали раскрывающуюся кнопку с помощью тега <дел> Элемент 1 Элемент 2 Элемент 3

Мы должны применить код CSS, чтобы обеспечить стиль и правильное расположение кнопки раскрывающегося списка и ее элементов.

  • Здесь позиция : относительная; Свойство указано для класса .dropdown , чтобы разместить элементы раскрывающегося списка прямо под кнопкой раскрывающегося списка .
  • Элементы раскрывающегося списка, которые по умолчанию скрыты, стилизованы путем применения всех свойств CSS в классе .dropdown_item .
  • Свойство :hover используется для отображения раскрывающегося меню, когда пользователь наводит курсор на кнопку раскрывающегося списка.

// Код CSS 

 .dropdown_btn {
  цвет фона:#f25e13;
  белый цвет;
  отступ: 16px;
  высота: 55 пикселей;
  ширина: 160 пикселей;
  размер шрифта: 16px;
  граница: нет;
  курсор: указатель;
}
.падать {
  положение: родственник;
  отображение: встроенный блок;
}
.dropdown_item {
  дисплей: нет;
  положение: абсолютное;
  цвет фона: #f9ф9f9;
  минимальная ширина: 160 пикселей;
  z-индекс: 1;
}
.dropdown_item {
  черный цвет;
  отступ: 12px 16px;
  выравнивание текста: по центру;
  текстовое оформление: нет;
  дисплей: блок;
}
.dropdown_item a: hover {цвет фона: # f25e13;
белый цвет;
}
.dropdown: наведите курсор .dropdown_item {
  дисплей: блок;
}
. dropdown: наведите курсор .dropdown_btn {
  цвет фона: #f25e13;
}

Выходные данные:

Выпадающее меню с выравниванием по правому краю в CSS

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

Пример: создание раскрывающегося меню с выравниванием по правому краю в CSS

В этом примере мы создали раскрывающееся меню с выравниванием по правому краю. Шаги создания кнопки раскрывающегося списка с выравниванием по правому краю такие же, как и в предыдущем шаге. Мы только что добавили еще одно свойство CSS float со значением right . Это свойство размещает кнопку раскрывающегося списка справа от веб-страницы.

// Код HTML 

 

<голова>
Раскрывающийся список CSS

<тело>
<дел>
  
  <дел>
  Элемент 1
  Элемент 2
  Элемент 3

// Код CSS 

 . dropdown_btn {
цвет фона:#f25e13;
белый цвет;
отступ: 16px;
высота: 55 пикселей;
ширина: 160 пикселей;
размер шрифта: 16px;
граница: нет;
курсор: указатель;
}
.падать {
положение: родственник;
отображение: встроенный блок;
}
.dropdown_item {
дисплей: нет;
положение: абсолютное;
справа: 0;
цвет фона: #f9f9f9;
минимальная ширина: 160 пикселей;
z-индекс: 1;
}
.dropdown_item {
черный цвет;
отступ: 12px 16px;
выравнивание текста: по центру;
текстовое оформление: нет;
дисплей: блок;
}
.dropdown_item a: hover {цвет фона: # f25e13;
белый цвет;
}
.dropdown: наведите курсор .dropdown_item {
дисплей: блок;
}
.dropdown: наведите курсор .dropdown_btn {
цвет фона: #f25e13;
}

Выходные данные:

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

Ниже приведен пример раскрывающегося списка панели навигации.

HTML: В данном примере мы добавили элемент

вместе с классом .navbar для создания меню панели навигации.

Кнопка раскрывающегося списка создается с использованием элемента <дел> Ссылки Раскрывающийся список Поле ввода Кнопка Переключатели

Выпадающий список будет открыт при наведении.

Вывод:

Заключение

Мы можем сделать вывод, что раскрывающийся список используется для выбора опции из списка выбора.

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *