Разное

Input выпадающий список: Тег HTML пункт списка

01.07.2018

Содержание

Тег 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
Этот атрибут указывает что при загрузке страницы данный элемент формы должен иметь фокус ввода, пока пользователь не переопределит это, к примеру печатая в разных элементах управления. Только один элемент формы может иметь атрибут 
autofocus, элемент является логическим (булевым).
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, добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.


 
 Главная
 
 Toggle Dropdown
 
 Вторичная
 
 Toggle Dropdown
 
 Успех
 
 Toggle Dropdown
 
 Предупреждение
 
 Toggle Dropdown
 
 Опасность
 
 Toggle Dropdown
 


<!-- 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 и выпадающий элемент будет «выпадать» вверх.


 
 
 Split dropup
 
 
 Toggle Dropdown
 


<!-- 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 и выпадающий элемент будет «выпадать» вправо.


 
 
 Split dropright
 
 
 Toggle Dropdright
 


<!-- 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 protected]">
    </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 protected]">
  </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  для элемента кнопки.Различные браузеры могут использовать разные типы по умолчанию для элемента кнопки.
     Элементы
     и 
     Элемент 
      используется для группировки связанных данных в форме.
     Элемент   определяет заголовок для 
      элемент.
     Пример 
     
     
     Personalia: 
      
     
      
     
      
     
      
     
     
      
     
     Попробуй сам "
     Вот как HTML-код выше будет отображаться в браузере:
     Элемент  
     Элемент    определяет список предопределенных опций для элемента   .
     Пользователи будут видеть раскрывающийся список предварительно определенных параметров при вводе данных.
     Атрибут  списка  элемента    должен ссылаться на  id  атрибут элемента   .
     Пример 
     
      
      
     
     Попробуй сам "
     Элемент 
     Элемент   представляет результат вычисления (например,
выполняется по сценарию).
     Пример 
     Выполните вычисление и покажите результат в элементе  :
     oninput = "x.value = parseInt (a.value) + parseInt (b.value)"> 
     0 
      
     100 + 
      
     = 
     
     
     
     
      
     Попробуй сам "
     Упражнения HTML 
     Элементы HTML-формы 
     Тег Описание
     <форма> Определяет HTML-форму для пользовательского ввода
     <вход> Определяет элемент управления вводом
     
     
      
     © Орфографика.рф, 2010 - 2019
     Расшифровки, размещенные на сайте, предназначены только для личного, некоммерческого использования.
     При перепосте материалов обязательна активная ссылка: «Текст подготовлен компанией Орфографика.рф». 
    Вопросы и предложения: info@орфографика.рф.