Тег HTML пункт списка
Тег <option> в HTML определяет пункт списка <select> — выпадающего списка или списка с выбором нескольких значений, а также списка вариантов для поля <input> со списком предопределенных вариантов <datalist>.
Тег <option> должен быть расположен внутри HTML тегов <select> или <datalist>.
Выбранным значением, передаваемым при отправке формы, считается содержимое атрибута value выбранного элемента option, если такой атрибут использован, либо содержимое тега, если атрибут value не указан.
Если HTML тег <option> используется как пункт списка <select>, выбранным пунктом по умолчанию будет считаться первый <option> в HTML коде, либо тег с атрибутом selected.
В обязательном для заполнения списке select (списке с атрибутом required), для корректной работы проверки на заполнение, первому либо выбранному по умолчанию пункту option необходимо задать атрибут value=»» (пустое значение атрибута value).
Несколько пунктов <option> можно объединять в группы с помощью тега <optgroup>.
Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
Синтаксис
Вариант 1:
<option>текст</option>
Вариант 2 (только для использования в datalist):
<option value="текст">
Примеры использования пункта списка <option> в HTML коде
Тег <option> может выступать в роли пункта списка, либо предопределенного варианта для поля формы.
Тег <option> как пункт выпадающего списка select
ЕвразияАвстралияСеверная АмерикаЮжная АмерикаАфрикаАнтарктида
HTML код выпадающего списка с пунктами option
<select name="continent_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>
Тег <option> в <datalist> как предопределенный вариант для поля input
Подходящие предопределенные варианты выводятся на экран в момент ввода. Попробуйте ввести «Америка» в поле ниже.
HTML код примера использования option в datalist
<input list="continents" name="continent_2" type="text">
<datalist>
<option value="Евразия">
<option value="Австралия">
<option value="Северная Америка">
<option value="Южная Америка">
<option value="Африка">
<option value="Антарктида">
</datalist>
Поддержка браузерами
Атрибуты тега option
Атрибут | Значения | Описание |
---|---|---|
disabled | не указывается / disabled |
Логический атрибут. Если указан, отключает возможность выбора данного пункта. |
label | текст | Название пункта, выводимое в выпадающем списке (подпись пункта). Обычно, это краткий вариант названия для пунктов с длинными названиями. |
selected | не указывается / selected |
Логический атрибут. Если указан, данный пункт списка считается выбранным. |
value | текст |
Значение пункта. Содержимое этого атрибута используется как значение, передаваемое на сервер при отправке формы. Если атрибут не указан, как значение используется содержимое тега <option>. |
Тег <option> также поддерживает глобальные HTML атрибуты.
Раскрывающийся список на HTML — тег SELECT — Формы — codebra
Первый раз на codebra.ru? Посмотри другие уроки по HTML и CSS!
Что такое раскрывающийся список?
Благодаря тегу <select>
появилась возможность создания раскрывающего списка и списка с множественным выбором. Если вы собираетесь отправлять данные на сервер, то тег <select>
должен быть помещен в форму (тег <form>
). Далее пример:
Код HTML
<form method = "POST">
<select size = "3" multiple name = "name[]">
<option disabled>Какие имена вам нравятся?</option>
<option selected value = "Никакие">Никакие</option>
<option value = "Иван">Иван</option>
<option value = "Петр">Петр</option>
<option value = "Николай">Николай</option>
</select>
<input type = "submit" value = "Ответить">
</form>
Какие есть атрибуты у тега select?
Тег <select>
имеет три полезных атрибута (остальные рассматривать не будем, про них уже я говорил). Первый атрибут multiple
, благодаря нему можно сделать возможность выбора нескольких элементов списка. Чтобы выбирать несколько элементов, нужно зажать shift или ctr и наживать мышкой на нужные элементы. Далее пример применения атрибута multiple
:
Код HTML
<form method = "POST">
<select size = "3" multiple name = "name[]">
<option disabled>Какие имена вам нравятся?</option>
<option selected value = "Никакие">Никакие</option>
<option value = "Иван">Иван</option>
<option value = "Петр">Петр</option>
<option value = "Николай">Николай</option>
</select>
<input type = "submit" value = "Ответить">
</form>
Второй атрибут required
, с помощью его можно «сказать» браузеру, что список должен быть выбран перед отправкой формы, иначе браузер запретит отправлять форму, и выведет вам соответствующее сообщение. Вид этого сообщения зависит полностью от браузера и пользователь не может его изменять. Далее пример применения атрибута
required
:Код HTML
<form method = "POST">
<select required size = "1" name = "name[]">
<option disabled>Да или нет?</option>
<option value = "Да">Да</option>
<option value = "Нет">Нет</option>
</select>
<input type = "submit" value = "Ответить">
</form>
Третий атрибут size
, с помощью его можно указать количество отображаемых элементов списка. Атрибут size
может содержать только целое число. Атрибут size
трансформирует список, например, если он равен 1, то тег
<select>
отображается как «выпадающий список», а если атрибут size
больше 1, то раскрывающийся список отображается как «список с прокруткой». Далее два примера применения атрибута size
:Код HTML
<form method = "POST">
<select required size = "1" name = "name[]">
<option disabled>Да или нет?</option>
<option value = "Да">Да</option>
<option value = "Нет">Нет</option>
</select>
<input type = "submit" value = "Ответить">
</form>
Код HTML
<form method = "POST">
<select required size = "3" name = "name[]">
<option disabled>Да или нет?</option>
<option value = "Да">Да</option>
<option value = "Нет">Нет</option>
</select>
<input type = "submit" value = "Ответить">
</form>
— HTML | MDN
HTML тэг <select>
представляет собой элемент управления который содержит меню опций:
Элемент включает глобальные атрибуты.
autofocus
HTML5- Этот атрибут указывает что при загрузке страницы данный элемент формы должен иметь фокус ввода, пока пользователь не переопределит это, к примеру печатая в разных элементах управления. Только один элемент формы может иметь атрибут
, элемент является логическим (булевым). disabled
- Этот логический атрибут указывает что пользователь не может взаимодействовать с элементом управления. Если атрибут не указан, элемент управления наследует настройки от содержащего его элемента, к примеру
fieldset
; если у родительского элемента не указан атрибутdisabled
, то элемент управления доступен для взаимодействия. form
HTML5- Этот атрибут указывает к какой конкретно форме относится элемент <select> . Если атрибут указан, его значением должно быть ID формы в том же документе. Это позволяет размещать элементы <select> где угодно в документе, а не только как потомки форм.
multiple
- Этот логический атрибут указывает что возможен выбор нескольких опций в списке. Если данный атрибут не указан, то только одна опция может быть выбрана.
name
- Этот атрибут используется для указания имени элемента управления.
required
HTML5- Этот логический атрибут указывает что обязательно должна быть выбрана опция и которая содержит не пустую строку.
size
- Если элемент управления представлен как прокручаваемый список, этот атрибут указывает количество строк в списке, которые должны быть видны за раз. Браузеру не требуется представлять <select> в виде прокручеваемого списка. Значение по умолчанию 0.
Примечания Firefox: Согласно спецификации HTML5, значение размера по умолчанию должно быть 1; однако на практике, оказывается что это портит некоторые веб сайты, и ни один браузер не придерживается этого на данный момент, поэтому Mozilla предпочла также указать 0 пока что в Firefox.
<select name="select">
<option value="value1">Значение 1</option>
<option value="value2" selected>Значение 2</option>
<option value="value3">Значение 3</option>
</select>
Результат
Примечания
BCD tables only load in the browser
Таблица совместимости на этой странице сгенерирована из структурированных данных. Если Вы хотите внести свой вклад, пожалуйста проверьте https://github.com/mdn/browser-compat-data и отправьте нам пул запросов.- Другие элементы форм:
<form>
,<legend>
,<label>
,<button>
,<option>
,<datalist>
,<optgroup>
,<fieldset>
,<textarea>
,<keygen>
,<input>
,<output>
,<progress>
and<meter>
. - События запускаемые
<select>
: change.
Элементы ввода | Учебник HTML
В этой главе описаны все различные элементы HTML форм.
Элемент <input>
Одним из наиболее часто используемых элементов формы является элемент <input>
.
Элемент <input>
может быть отображен несколькими способами, в зависимости от атрибута type
.
Если атрибут type
опущен, поле ввода получает значение по умолчанию тип: "text"
.
Все различные типы входных данных рассматриваются в следующей главе: HTML Типы ввода.
Элемент <select>
Элемент <select>
определяет раскрывающийся список:
Пример
<select name=»cars»>
<option value=»volvo»>Вольво</option>
<option value=»saab»>Сааб</option>
<option value=»fiat»>Фиат</option>
<option value=»audi»>Ауди</option>
</select>
Элемент <option>
определяет параметр, который может быть выбран.
По умолчанию выбирается первый элемент в раскрывающемся списке.
Чтобы определить предварительно выбранный параметр, добавьте атрибут selected
с параметром <option>
:
Видимые значения:
Используйте атрибут size
для указания количества видимых значений:
Пример
<select name=»cars» size=»3″>
<option value=»volvo»>Вольво</option>
<option value=»saab»>Сааб</option>
<option value=»fiat»>Фиат</option>
<option value=»audi»>Ауди</option>
</select>
Разрешить выбор:
Используйте атрибут multiple
, позволяющий пользователю выбрать более одного значения:
Пример
<select name=»cars» size=»4″ multiple>
<option value=»volvo»>Вольво</option>
<option value=»saab»>Сааб</option>
<option value=»fiat»>Фиат</option>
<option value=»audi»>Ауди</option>
</select>
Элемент <textarea>
Элемент <textarea>
элемент определяет многострочное поле ввода (текстовой области):
Атрибут rows
указывает видимое количество строк в текстовой области.
Атрибут cols
определяет видимую ширину текстовой области.
Именно так приведенный выше HTML код будет отображаться в браузере:
Кот играл в саду.Вы также можете определить размер текстовой области с помощью CSS:
Элемент <button>
Элемент <button>
определяет кликабельность button:
Именно так приведенный выше HTML код будет отображаться в браузере:
Нажмите на меня!Примечание: Всегда указывайте атрибут type
для элемента button
.
Различные браузеры могут использовать различные типы по умолчанию для элемента button
.
Элементы <fieldset> и <legend>
Элемент <fieldset>
используется для группировки связанных данных в форме.
Элемент <legend>
определяет заголовок для элемента <fieldset>
.
Пример
<form action=»/action_page.php»>
<fieldset>
<legend>Персональная информация:</legend>
<label for=»fname»>Имя:</label><br>
<input type=»text» name=»fname»
value=»Андрей»><br>
<label for=»lname»>Фамилия:</label><br>
<input type=»text» name=»lname» value=»Щипунов»><br><br>
<input type=»submit» value=»Отправить»>
</fieldset>
</form>
Именно так приведенный выше HTML код будет отображаться в браузере:
Элемент <datalist>
Элемент <datalist>
задает список предопределенных параметров для элемента <input>
.
При вводе данных пользователи будут видеть раскрывающийся список предопределенных параметров.
Атрибут list
элемента <input>
, обращается к атрибуту id
элемента <datalist>
.
Пример
<form action=»/action_page.php»>
<input list=»browsers»>
<datalist>
<option value=»Internet Explorer»>
<option value=»Firefox»>
<option value=»Chrome»>
<option value=»Opera»>
<option value=»Safari»>
</datalist>
</form>
Элемент <output>
Элемент <output>
элемент представляет собой результат вычисления (например, выполняемого скриптом).
Пример
Выполните расчет и покажите результат в виде элемента <output>
:
<form action=»/action_page.php»
oninput=»x.value=parseInt(a.value)+parseInt(b.value)»>
0
<input type=»range» name=»a» value=»50″>
100 +
<input type=»number» name=»b» value=»50″>
=
<output name=»x» for=»a b»></output>
<br><br>
<input type=»submit»>
</form>
HTML Упражнения
HTML Элементы формы
Тег | Описание |
---|---|
<form> | Определяет HTML форму для пользовательского ввода |
<input> | Определяет входной элемент управления |
<textarea> | Определяет многострочный элемент управления вводом (текстовая область) |
<label> | Определяет метку для элемента <input> |
<fieldset> | Группы связанных элементов в форме |
<legend> | Определяет заголовок для элемента <fieldset> |
<select> | Определяет раскрывающий список |
<optgroup> | Определяет группу связанных параметров в раскрывающемся списке |
<option> | Определяет параметр в раскрывающемся списке |
<button> | Определяет кликабельную кнопку |
<datalist> | Задает список предопределенных параметров для элементов управления вводом |
<output> | Определяет результат вычисления |
Выпадающий список в HTML — Тег в HTML и теги и .
В прошлый раз мы очень подробно обсудили атрибуты тега <input> и особенно подробно атрибут type
и его возможности.
Теперь мы познакомимся с еще тремя HTML-тегами предназначенными для форм. Это теги <select>
, <option>
и <optgroup>
. C помощью этих тегов мы сможем сделать выпадающий список в HTML-форме и сделать его структуру удобной для использования. Естественно кроме изучения самих тегов мы поговорим и об их HTML-атрибутах. С какими-то из них мы уже знакомы, а с какими-то еще нет.
Тег <select> в HTML.
Основной тег, который необходим для создания выпадающего списка это тег <select>
. Именно с него мы и начнем.
Это парный тег после добавления, которого в HTML документ появится раскрывающийся список. Но при использовании только тега <select>
самих пунктов для выбора не появится. А если нет пунктов, значит и нечего выбрать. Чтобы добавить пункты списка необходимо использовать тег <option>
, о котором мы поговорим чуть ниже.
Для начала рассмотрим синтаксис тега <select>
. Добавляется он внутрь элемента <form>
, это следует учитывать.
Таким образом, может выглядеть самый простой вариант HTML-кода для вывода HTML-тега <select>
.
Тег <option> в HTML.
Как я упоминал чуть выше, этот тег существует для добавления пунктов списка в выпадающий список, выводимый с помощью тега <select>
. Этот тег чем-то по предназначению напоминает тег <li> для создания элементов HTML-списка.
Синтаксис тега <option>
в HTML не представляет ничего особенного и в самом простом варианте его можно использовать так:
Пункт списка
То есть из сказанного выше становится понятно, что мы должны использовать два HTML-тега для создания выпадающего списка это тег <select>
и тег <option>
.
Тег <optgroup> в HTML.
Но для выпадающих списков существует еще один тег, который может помочь сделать список более удобным за счет того, что он предназначен для группировки пунктов списка. Это тег <optgroup>
.
Также стоит отметить, что у данного элемента существует обязательный атрибут label
, который мы должны использовать всегда. Этот атрибут отвечает за текст, который будет отмечать ту или иную группу списка.
Синтаксис также прост, но стоит учитывать, что внутри тега <optgroup>
должен присутствовать тег <option>
.
Второй пунктТретий пункт
Если же говорить о полном коде выпадающего списка, то он может выглядеть примерно так:
Первый пунктВторой пунктТретий пункт
Все довольно просто и прозрачно. В видео уроке мы подробно обсудим все эти теги и их атрибуты и рассмотрим, как это все работает на практике.
Видео урок: Выпадающий список в HTML — Тег <select> в HTML и теги <option> и <optgroup>.
HTML-справочник и другие материалы можно и нужно скачать здесь!
В следующем видео уроке мы познакомимся с двумя HTML-тегами. Один из них позволит добавить поле ввода многострочного текста, а с помощью другого мы познакомимся с еще одним способом добавления кнопок в HTML-форму.
Выпадающие элементы. Компоненты · Bootstrap. Версия v4.1.3
Переключайте контекстные оверлеи для отображения списков ссылок и многого другого с помощью модуля выпадающих меню Bootstrap.
Обзор
Выпадающие элементы — это переключаемые, контекстные элементы поверхностного наложения для отображения списков ссылок и т.п. Они интерактивны благодаря плагину JavaScript в BS4. Функциональность toggle в выпадающих элементах запускается по клику, а не по наведению – это сделано умышленно.
Выпадающие элементы «построены» на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и определение размера окна просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js
/ bootstrap.bundle.js
, который содержит Popper.js.
Если вы компилируете наши JS файлы, необходим util.js
.
Доступность
Стандарт WAI ARIA описывает и определяет виджет role="menu"
как настоящий виджет, но лишь для меню «а-ля приложение», запускающих действия или функции. Меню ARIA могут содержать лишь пункты меню, чекбоксы, «радио-кнопки», группы «радио-кнопок» и подменю.
Выпадающие элементы Bootstrap, с другой стороны, спроектированы для решения множества задач и могут работать в разных структурах разметки. Например, можно создать выпадающие элементы, содержащие дополнительные поля ввода и элементы контроля форм, такие как поиск или поле ввода логина. По этой причине BS4 не «ожидает» (и не добавляет автоматически) ни один из атрибутов (role
и aria-
), необходимых для меню согласно стандарту ARIA.
Однако Bootstrap всегда добавляет встроенную поддержку для большинства стандартных взаимодействий меню и клавиатуры, таких как возможность двигаться через отдельные элементы класса .dropdown-item
кнопками курсора на клавиатуре и закрывать меню кнопкой ESC.
Примеры
Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом .dropdown
или другим элементом с position: relative;
. При необходимости выпадающие элементы можно запускать из элементов <a>
или <button>
.
Выпадающие элементы одинарных кнопок
Любую одинарную кнопку .btn
можно превратить в «контролирующий» элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами <button>
:
<div>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Кнопка выпадающего списка
</button>
<div aria-labelledby="dropdownMenuButton">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
</div>
</div>
А вот так — с <a>
элементами:
<div>
<a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадающая ссылка
</a>
<div aria-labelledby="dropdownMenuLink">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
</div>
</div>
Самое забавное, что это можно сделать с любым из вариантов кнопок: «главная, вторичная, успех, инфо, предупреждение, опасность»:
Предупреждение<!-- Example single danger button -->
<div>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div>
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
<div></div>
<a href="#">Separated link</a>
</div>
</div>
Выпадающие элементы кнопок с разделенными зонами
По такому же принципу создавайте выпадающие элементы в кнопках с разделенными зонами, используя почти такую же разметку, как в пункте выше, но с добавлением класса .dropdown-toggle-split
для правильного отступа вокруг выпадающего элемента.
Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг padding
с обеих сторон выпадающей «каретки» и удаляет margin-left
, добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.
<!-- Example split danger button -->
<div>
<button type="button">Action</button>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Toggle Dropdown</span>
</button>
<div>
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
<div></div>
<a href="#">Separated link</a>
</div>
</div>
Размеры
Выпадающие элементы кнопок работают с кнопками любых размеров, включая кнопки по умолчанию и кнопки с выпадающими элементами с разделенными зонами.
<!-- Large button groups (default and split) -->
<div>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<div>
...
</div>
</div>
<div>
<button type="button">
Large button
</button>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Toggle Dropdown</span>
</button>
<div>
...
</div>
</div>
<!-- Small button groups (default and split) -->
<div>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
<div>
...
</div>
</div>
<div>
<button type="button">
Small button
</button>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Toggle Dropdown</span>
</button>
<div>
...
</div>
</div>
Направления
«Выпадающий вверх»
Добавьте класс .dropup
и выпадающий элемент будет «выпадать» вверх.
<!-- Default dropup button -->
<div>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div>
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropup button -->
<div>
<button type="button">
Split dropup
</button>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Toggle Dropdown</span>
</button>
<div>
<!-- Dropdown menu links -->
</div>
</div>
«Выпадающий вправо»
Добавьте класс .dropright
и выпадающий элемент будет «выпадать» вправо.
<!-- Default dropright button -->
<div>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div>
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropright button -->
<div>
<button type="button">
Split dropright
</button>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Toggle Dropright</span>
</button>
<div>
<!-- Dropdown menu links -->
</div>
</div>
«Выпадающий влево»
Добавьте класс .dropleft
и выпадающий элемент будет «выпадать» влево.
<!-- Default dropleft button -->
<div>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div>
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropleft button -->
<div>
<div role="group">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Toggle Dropleft</span>
</button>
<div>
<!-- Dropdown menu links -->
</div>
</div>
<button type="button">
Split dropleft
</button>
</div>
Исторически содержимым выпадающих элементов всегда были ссылки, но BS4 изменил это. Сейчас вы можете использовать в качестве содержимого выпадающих элементов <button>
, а не только <a>
.
<div>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div aria-labelledby="dropdownMenu2">
<button type="button">Action</button>
<button type="button">Another action</button>
<button type="button">Something else here</button>
</div>
</div>
Вы также можете создать неинтерактивные выпадающие элементы класса .dropdown-item-text
. Свободно стилизуйте их обычным CSS.
<div>
<span>Dropdown item text</span>
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
</div>
Активные элементы меню
Добавьте класс .active
к элементу выпадающего меню для его стилизации как «активированного».
<div>
<a href="#">Regular link</a>
<a href="#">Active link</a>
<a href="#">Another link</a>
</div>
Неактивные элементы меню
Добавьте класс .disabled
к элементу выпадающего меню для его стилизации как «деактивированного».
<div>
<a href="#">Regular link</a>
<a href="#">Disabled link</a>
<a href="#">Another link</a>
</div>
По умолчанию выпадающее меню автоматически расположено в 100% от вершины и на левой стороне родителя. Добавьте класс .dropdown-menu-right
к элементу класса .dropdown-menu
для выравнивания выпадающего меню по правой стороне.
Внимание! Выпадающие элементы позиционируются благодаря Popper.js (за исключением случаев, когда они содержатся в navbar).
<div>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div>
<button type="button">Action</button>
<button type="button">Another action</button>
<button type="button">Something else here</button>
</div>
</div>
Добавьте заголовок, чтобы обозначить секции действий любого выпадающего меню.
<div>
<h6>Dropdown header</h6>
<a href="#">Action</a>
<a href="#">Another action</a>
</div>
Разделители меню
Разделяйте группы родственных элементов меню разделителем.
<div>
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
<div></div>
<a href="#">Separated link</a>
</div>
Текст меню
Размещайте любой текст внутри выпадающего меню с текстом, используя утилиты отступа. Заметьте, что вам понадобится дополнительная настройка размеров для ограничения ширины меню.
<div>
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p>
And this is more example text.
</p>
</div>
Формы меню
Расположите форму внутри выпадающего меню, и используйте утилиты паддинга или марджина для ее уплотнения.
<div>
<form>
<div>
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" placeholder="email@example.com">
</div>
<div>
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" placeholder="Password">
</div>
<div>
<input type="checkbox">
<label for="dropdownCheck">
Remember me
</label>
</div>
<button type="submit">Sign in</button>
</form>
<div></div>
<a href="#">New around here? Sign up</a>
<a href="#">Forgot password?</a>
</div>
<form>
<div>
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" placeholder="email@example.com">
</div>
<div>
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" placeholder="Password">
</div>
<div>
<input type="checkbox">
<label for="dropdownCheck2">
Remember me
</label>
</div>
<button type="submit">Sign in</button>
</form>
Параметры раскрывающегося списка
Используйте data-offset
или data-reference
, чтобы изменить местоположение раскрывающегося списка.
<div>
<div>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
Offset
</button>
<div aria-labelledby="dropdownMenuOffset">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
</div>
</div>
<div>
<button type="button">Reference</button>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
<span>Toggle Dropdown</span>
</button>
<div aria-labelledby="dropdownMenuReference">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
<div></div>
<a href="#">Separated link</a>
</div>
</div>
</div>
Использование
Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса .show
элемента родительского списка. Атрибут data-toggle="dropdown"
отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.
На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики ($.noop
) mouseover
к непосредственным «детям» элемента <body>
. Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.
Через атрибуты
Добавьте к ссылке или кнопке атрибут data-toggle="dropdown"
для скрытия\показа выпадающего элемента.
<div>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
</button>
<div aria-labelledby="dLabel">
...
</div>
</div>
Через JS
Управляйте выпадающими элементами с помощью JavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
still required
Независимо от того, управляете вы выпадающим элементом через JavaScript или атрибутами, атрибут data-toggle="dropdown"
всегда необходим в элементе, запускающем выпадающий элемент.
Параметры
Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к data-
как в data-offset=""
.
Название | Тип | По умолч. | Описание |
---|---|---|---|
offset | number | string | function | 0 | Смещение выпадающего элемента относительно его триггера. См. отступы Popper.js |
flip | boolean | true | Позволяет выпадающему элементу «перевернуться», если произошло перекрытие другого элемента. Больше информации: flip docs. |
boundary | string | element | ‘scrollParent’ | Граница ограничения переполнения выпадающего меню. Принимает значения 'viewport' , 'window' , 'scrollParent' или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации preventOverflow от Popper.js. |
reference | string | element | ‘toggle’ | Reference element of the dropdown menu. Accepts the values of 'toggle' , 'parent' , or an HTMLElement reference. For more information refer to Popper.js’s referenceObject docs. |
display | string | dynamic | static | By default, we use Popper.js for dynamic positioning. Disable this with `static`. |
Обратите внимание, что если для boundary
установлено значение, отличное от 'scrollParent'
, позиция position: static
применяется к контейнеру .dropdown
.
Методы
Метод | Описание |
---|---|
$().dropdown('toggle') |
Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом. |
$().dropdown('update') |
Обновляет позицию «выпадения» элемента. |
$().dropdown('dispose') |
Уничтожает выпадающий элемент. |
События
Все события выпадающих элементов наступают в родительском элементе класса .dropdown-menu
и несут свойство relatedTarget
, значение которого равно элементу «якоря» (ссылка, т.е. <a>
), запускающего функциональность toggle.
Событие | Описание |
---|---|
show.bs.dropdown |
Это событие наступает немедленно по вызову экземпляра метода show. |
shown.bs.dropdown |
Это событие наступает, когда выпадающий элемент стал видимым юзеру (будет ждать завершения CSS-переходов). |
hide.bs.dropdown |
Это событие наступает немедленно по вызову экземпляра метода hide. |
hidden.bs.dropdown |
Это событие наступает, когда выпадающий элемент стал невидимым юзеру (будет ждать завершения CSS-переходов). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something…
})
HTML-элементов формы
В этой главе описаны все различные элементы формы HTML.
Элементы HTML
Элемент HTML
может содержать один или несколько из следующих элементов формы:
-
<вход>
-
<метка>
-
<выбрать>
-
Попробуй сам "
Атрибут
строк
определяет видимое количество строк в текстовая область.Атрибут
cols
определяет видимую ширину текста. площадь.Вот как HTML-код выше будет отображаться в браузере:
Кот играл в саду.Вы также можете определить размер текстовой области с помощью CSS:
Пример
Попробуй сам "Элемент
Элемент
Попробуй сам "Вот как HTML-код выше будет отображаться в браузере:
Нажми на меня!Примечание: Всегда указывайте атрибут
type
для элемента кнопки.Различные браузеры могут использовать разные типы по умолчанию для элемента кнопки.Элементы
Элемент