Раскрывающийся список в html: Как сделать выпадающий список с помощью HTML

24.01.1984 alexxlab

Содержание

html input radio

Главная » HTML

Автор admin Просмотров 1к. Обновлено 20 октября 2019

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

Содержание

HTML-флажок
Кнопка HTML-радио
Выпадающий список HTML select

HTML-флажок

С помощью флажков мы можем позволить пользователю сделать несколько вариантов. Например:

<form action="">
<fieldset>
<legend>Известные языки</legend><br>
<input type="checkbox" name="html" value="html"/> html
<br />
<input type="checkbox" name="css" value="css"/> css
<br />
<input type="checkbox" name="javascript" value="javascript"/> JavaScript
</fieldset>
</form>

Известные языки
html
css
JavaScript

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

 <form action="">
<input name="html" type="checkbox" value="html" checked="checked"/>
</form>

Кроме того, благодаря отключенной функции мы можем сделать чекбокс недоступным:

<form action="">
<input name="html" type="checkbox" value="html" disabled="disabled"/>
</form>

Кнопка HTML-радио

radio button ( «радио — кнопка» ) эта кнопка чтобы позволить вам сделать эксклюзивный выбор.

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

<form action="">
<fieldset>
<legend>Известные языки</legend>
HTML <input type="radio" name="language" value="html"/>
CSS <input type="radio" name="language" value="css"/>
JavaScript <input type="radio" name="language" value="javascript"/>
</fieldset>
</form>

Известные языки HTML CSS JavaScript

Также в этом случае можно назначить значение по умолчанию или отключить кнопку.

<form action="">
<input type="radio" name="language" value="html" checked="checked" disabled="disabled"/>
</form>

Выпадающий список HTML select

Благодаря тегу <select> вы можете создавать меню опций. В этом случае каждая запись должна быть включена в тег <option> (закрытие тега необязательно), а значение должно быть указано с помощью атрибута

«value» . С атрибутом «selected» вы можете указать выбор по умолчанию:

<form>
<fieldset>
<legend>Выберите язык программирования</legend>
<select name="siti" >
<option value="html" selected="selected">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
</fieldset>
</form>

Выберите язык программирования htmlcssjavascript

Наконец, с помощью тега выбора также можно установить несколько вариантов. Как вы можете видеть, при использовании атрибута «multiple» внешний вид тега select значительно меняется:

<form>
<fieldset>
<legend>Выберите язык программирования</legend>
<select name="siti" multiple="multiple">
<option value="html" selected="selected">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
</fieldset>
</form>

Выберите язык программирования htmlcssjavascript

Используя клавишу CTRL, пользователь может сделать несколько вариантов.

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

 <form>
<fieldset>
<legend>Выберите язык программирования</legend>
<select name="siti" size="2" multiple="multiple">
<option value="html" selected="selected">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
</fieldset>
</form>

Выберите язык программирования htmlcssjavascript

Выпадающий список | Документация AnyLogic

Свойства
Функции

Работа с фигурами и элементамиСправочник классов — ShapeComboBox

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

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

Вы можете также связать этот элемент управления с переменной или параметром типа String, double или int. При этом выбор того или иного значения в списке будет присваивать выбранное значение связанной со списком переменной/параметру.

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

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

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

Демо-модель: Combo Box Controls Simulation Speed

Чтобы добавить выпадающий список

Перетащите элемент Выпадающий список из палитры Элементы управления в то место графического редактора, где вы хотите его нарисовать.
Перейдите в панель Свойства.
Если вы хотите связать выпадающий список с переменной или параметром (то есть, присваивать этой переменной имя выбранного в текущий момент элемента списка), установите флажок Связать с и введите имя соответствующей переменной или параметра в расположенном справа поле.
Если же вы хотите, чтобы при выборе пользователем в списке другого значения производилось какое-то другое, более сложное действие, введите код, который вы хотели бы выполнять в таком случае, в секции Действие (имя выбранного в данный момент времени элемента доступно здесь как value (локальная переменная типа String)).

Свойства

Основные

Имя — Имя выпадающего списка. Имя используется для идентификации элемента и доступа к нему из кода.

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

Отображается на верхнем агенте — Если опция выбрана, то выпадающий список будет виден на презентации типа агента, в который будет вложен данный агент.

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

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

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

Значение по умолчанию — [Видно, если не установлен флажок Связать с] Выражение, возвращающее значение типа String — имя элемента, который будет выбран в выпадающем списке по умолчанию. Например, вы задали Элементы Первый Вариант и Второй Вариант. Чтобы сделать Второй Вариант выбранным по умолчанию, напишите здесь его имя в кавычках: «Второй Вариант»

Доступность — Логическое выражение, определяющее, доступен ли элемент управления или нет.

Действие

Код, который будет выполняться при смене элемента, выбранного в выпадающем списке. Имя выбранного в данный момент времени элемента доступно здесь как value (локальная переменная типа String).

Внешний вид

Цвет фона — Задает цвет фона выпадающего списка. Щелкните мышью внутри элемента управления и выберите нужный цвет из списка наиболее часто используемых цветов или же выберите любой другой цвет с помощью диалога Цвета. Цвет фона корректно отображается в операционной системе Windows с классическим оформлением. В то же время некоторые операционные системы не поддерживают такие элементы управления с измененным пользователем цветом фона.

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

Шрифт — Задает тип шрифта текста, отображаемого в выпадающем списке. В расположенном справа поле вы можете выбрать размер шрифта.

Курсив — Если опция выбрана, то текст будет выделен курсивом.

Полужирный — Если опция выбрана, то текст будет выделен полужирным шрифтом.

Местоположение и размер

Уровень — Уровень, на котором расположен этот элемент.

X — X-координата верхнего левого угла выпадающего списка.

Y — Y-координата верхнего левого угла выпадающего списка.

Ширина — Ширина выпадающего списка (в пикселах).

Высота — Высота выпадающего списка (в пикселах).

Специфические

Видимость — Элемент будет виден, если заданное здесь выражение будет истинно (true), в противном случае он отображаться не будет.

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

Отображать имя — Если опция выбрана, то имя элемента будет отображаться в графическом редакторе.

Значок — Если опция выбрана, то выпадающий список будет считаться частью значка типа агентов.

Функции

Получение выбранного значения

Функция	Описание
String getValue()	Возвращает выбранную в данный момент строку.
int getIntValue()	Возвращает текущее значение типа int выпадающего списка. Если текущее значение не является числом, то функция выдает ошибку.
double getDoubleValue()	Возвращает текущее значение типа double выпадающего списка. Если текущее значение не является числом, то функция выдает ошибку.
int getValueIndex()	Возвращает индекс выбранной в данный момент строки или -1, если это редактируемый выпадающий список, не содержащий введенного значения.

Задание нового выбранного значения

Функция	Описание
void setValue(double value)	Задает новое численное значение (если выпадающий список связан с параметром/переменной типа int или double). При этом заданное пользователем действие не выполняется. value — новое значение (типа double или int)
void setValue(double value, boolean callAction)	Задает новое численное значение (если выпадающий список связан с параметром/переменной типа int или double). При этом если значение аргумента функции callAction равно true, то выполнится заданное пользователем действие. value — новое значение (типа double или int) callAction — если true, то будет выполнено заданное пользователем действие
void setValue(String text)	Задает выделенную строку выпадающего списка. При этом заданное пользователем действие не выполняется. text — новая выбранная строка
void setValue(String text, boolean callAction)	Задает выделенную строку выпадающего списка. При этом если значение аргумента функции callAction равно true, то выполнится заданное пользователем действие. Если значение принадлежит к численному типу, а данный текст не представляет собой число, ничего не изменится. text — новая выбранная строка callAction — если true, то будет выполнено заданное пользователем действие
void setValueIndex(int valueIndex)	Выбирает строку с заданным индексом. При этом заданное пользователем действие не выполняется. valueIndex — индекс строки
void setValueIndex(int valueIndex, boolean callAction)	Выбирает строку с заданным индексом. При этом если значение аргумента функции callAction равно true, то выполнится заданное пользователем действие. valueIndex — индекс строки callAction — если true, то будет выполнено заданное пользователем действие
void setValueToDefault()	Устанавливает заданный по умолчанию текст в качестве текущего значения выпадающего списка. При этом заданное пользователем действие не выполняется.

Управление доступом

Функция	Описание
boolean isEnabled()	Проверяет, доступен ли элемент управления в текущий момент времени. Возвращает true, если элемент доступен (и вы можете менять его состояние), либо же false, если элемент недоступен.
void setEnabled(boolean yes)	Делает элемент управления активным или недоступным (в зависимости от значения аргумента функции). yes — если true, то элемент управления будет активен; если false — то недоступен.

Программное выполнение заданного действия

Функция	Описание
void action()	Выполняет действие, заданное пользователем для этого элемента управления (в его свойстве Действие).

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

Функция	Описание
String[] getItems()	Возвращает массив из строк, используемых в данный момент в выпадающем списке. Возвращаемый массив не должен изменяться пользователем.

Добавление новых строк в выпадающий список

Функция	Описание
void setItems(String[] items)	Задает новые строки для данного выпадающего списка. Эта функция сохраняет текущее значение выпадающего списка: если он может быть отредактирован если он не может быть отредактирован, но текущее значение хранится в новых строках При этом действие, заданное пользователем, не выполняется (даже если текущее выделение поменяется). Если данный выпадающий список имеет численное значение (типы double или int), а некоторые строки не могут быть распознаны как числа, функция выдает ошибку. items — массив из строк для помещения в выпадающий список
void setItems(String[] items, boolean callAction)	Задает новые строки для данного выпадающего списка. Эта функция сохраняет текущее значение выпадающего списка: если он может быть отредактирован если он не может быть отредактирован, но текущее значение хранится в новых строках items — массив из строк для помещения в выпадающий список callAction — если true и выбор изменяется, то действие, заданное пользователем, будет выполнено

Функция

Описание

void setItems(String[] items)

Задает новые строки для данного выпадающего списка. Эта функция сохраняет текущее значение выпадающего списка:

если он может быть отредактирован
если он не может быть отредактирован, но текущее значение хранится в новых строках

При этом действие, заданное пользователем, не выполняется (даже если текущее выделение поменяется).

Если данный выпадающий список имеет численное значение (типы double или int), а некоторые строки не могут быть распознаны как числа, функция выдает ошибку.

items — массив из строк для помещения в выпадающий список

void setItems(String[] items, boolean callAction)

если он может быть отредактирован
если он не может быть отредактирован, но текущее значение хранится в новых строках

items — массив из строк для помещения в выпадающий список
callAction — если true и выбор изменяется, то действие, заданное пользователем, будет выполнено

Местоположение

Функция	Описание
double getX()	Возвращает координату X элемента управления (если точнее, то координату X его верхнего левого угла).
double getY()	Возвращает координату Y элемента управления (если точнее, то координату Y его верхнего левого угла).
void setX(double x)	Задает новую координату X выпадающего списка. x — новое значение координаты X
void setY(double y)	Задает новую координату Y выпадающего списка. y — новое значение координаты Y
void setPos(double x, double y)	Задает новое местоположение элемента управления. x — новое значение координаты X y — новое значение координаты Y

Видимость

Функция	Описание
boolean isVisible()	Возвращает видимость элемента управления. Если возвращает true, то элемент управления виден; если false — то нет.
void setVisible(boolean v)	Задает видимость элемента управления. v — видимость: если true, то элемент управления будет виден, если false — то нет.

Группа

Функция	Описание
ShapeGroup getGroup()	Возвращает группу, содержащую этот элемент управления.

Уровень

Функция	Описание
Level getLevel()	Возвращает уровень, на котором находится этот элемент управления.

Как мы можем улучшить эту статью?

Древовидный раскрывающийся список

Для создания древовидного раскрывающегося списка воспользуемся элементом управления ActiveX TreeView. Элемент управления TreeView вставляется в HTML-код с помощью тега

<object classid="clsid: C74190B6-8589-11D1-B16A-00C0F0283628"> </object>

Если содержимое древовидного списка не помещается в область, заданную атрибутами width и height, то автоматически появляются полосы прокрутки. В тег <object> для элемента TreeView можно вставить теги <param>, определяющие дополнительные параметры. Их список можно узнать с помощью выражения alert(myTreeView.innerHTML). На внешний вид списка влияют следующие параметры:

<param name='LineStyle' value='число'> <param name='Style' value='число'> <param name='BorderStyle' value='число'>

Каждый узел иерархического списка представляется объектом Node. Множество всех узлов списка хранится в коллекции Nodes. Каждый узел может быть корневым(не иметь родителя), конечным(не иметь потомков) или промежуточным(иметь родителя и потомков). Корневых узлов может быть несколько, и тогда список состоит из нескольких древовидных списков.

Объект Node(узел) имеет ряд свойств, с помощью которых описывается местоположение узла в списке: parent(узел-родитель), child(первый потомок), children(количество потомков) и root(корень).

Древовидный список создается путем добавления узлов в коллекцию Nodes посредством метода Add, который имеет следующие параметры.

Первый параметр определяет объект, относительно которого создается новый узел. Это или индекс, или уникальный идентификатор существующего объекта. Если данный параметр не указан, то создается корневой узел.

Второй параметр определяет отношение к уже существующим узлам.

Возможны следующие значения:

0 – новый узел создается перед всеми узлами того же уровня, что и узел, определенный первым параметром;
1 – новый узел создается после всех узлов того же уровня, что и узел определенный первым параметром;
2 – новый узел создается после узла, определенного первым параметром;
3 – новый узел создается перед узлом, определенным первым параметром;
4 – новый узел создается как потомок узла, определенного первым параметром.

Третий параметр – идентификатор – строка символов; по идентификатору можно ссылаться на создаваемый узел.
Четвертый параметр – текст, отображаемый рядом с меткой узла(обязательный параметр).
Пятый параметр определяет изображение, соответствующее узлу.
Шестой параметр определяет изображение, соответствующее узлу, когда он выбран щелчком или с помощью навигационных клавиш.

Только параметр, определяющий подписи узлов, является обязательным. Вместо пропускаемых параметров в вызове метода Add следует ставить null.

Рассмотрим пример, в котором код HTML-документа, содержит элемент управления TreeView, а также плавающий фрейм(<iframe>). В сценарии формируется древовидный список и определены процедуры, обрабатывающие события, связанные со списком. В результате их выполнения список можно развернуть, свернуть и загрузить в плавающий фрейм HTML-документ. В этом примере загрузка будет производиться при щелчке мыши на концевом узле. При этом адрес загружаемого документа формируется из подписи концевого узла путем приписывания к ней точки и расширени файла html. Возможны и другие алгоритмы формирования URL-адреса отображаемого документа.

В обработчике щелчка на элементах списка используется подобъект SelectedItem объекта TreeView, который содержит сведения о выделенном узле. Так, свойство Text содержит подпись выделенного узла, а children – количество дочерних узлов.

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Древовидный список</title> </head>

<body> <DIV id=mydiv width=100 HEIGHT=300> <button id=bt>Оглавление показать</button><br> <OBJECT classid="clsid:C74190B6-8589-11D1-B16A-00C0F0283628" WIDTH=300 HEIGHT=300" ALIGN=LEFT> </OBJECT> </DIV> <IFRAME WIDTH=800 HEIGHT=300 ></IFRAME> <script type="text/javascript"> aname=new Array() // массив заголовков aname[1]="Набор начинающего веб-мастера" aname[2]="Строим сайт" aname[3]="Основы JavaScrip" aname[4]="Изучаем JavaScript" aname[5]="Фреймы" aname[6]="Основы РНР" aname[7]="Характеристика языка" aname[8]="Переменные"

adocs=new Array() // массив ссылок adocs[1]="32.html" adocs[2]="" adocs[3]="" adocs[4]=". ./javapage.php" adocs[5]="../javapage38.php" adocs[6]="" adocs[7]="../phppage3.php" adocs[8]="../phppage5.php"

// Создание узлов myTreeView.Nodes.Add(null,null,"Ch0",aname[1]) myTreeView.Nodes.Add(null,null,"Ch2",aname[2]) myTreeView.Nodes.Add("Ch2",4,"Ch21",aname[3]) myTreeView.Nodes.Add("Ch21",4,"Ch211",aname[4]) myTreeView.Nodes.Add("Ch21",4,"Ch212",aname[5]) myTreeView.Nodes.Add("Ch2",4,"Ch22",aname[6]) myTreeView.Nodes.Add("Ch22",4,"Ch221",aname[7]) myTreeView.Nodes.Add("Ch22",4,"Ch222",aname[8]) // Некоторые параметры дерева myTreeView.Style=7 myTreeView.LineStyle=1 myTreeView.BorderStyle=1

myFrame.location.href =adocs[1] // начальное содержимое фрейма

function mydiv.onclick() { // обработка щелчков на заголовках if (!myTreeView.SelectedItem) return if (myTreeView.SelectedItem. Children == 0) myFrame.location.href =adocs[myTreeView.SelectedItem.Index] } function bt.onclick(){ // щелчок на кнопке if (myTreeView.style.visibility=="hidden") { myTreeView.style.visibility="visible" myTreeView.style.display='' bt.innerText="Оглавление скрыть" document.all.myFrame.style.width=500 } else { myTreeView.style.visibility="hidden" myTreeView.style.display='none' bt.innerText="Оглавление" document.all.myFrame.style.width=800 }} </script > </body> </html>

В окне веб-браузера это будет выглядеть ТАК.

, — HTML — Дока

Кратко
Пример
Как понять
Как пишется
Подсказки
На практике
1. Лена Райан советует
2. Татьяна Фокина советует

Кратко

Скопировано

Блок с раскрывающимся контентом на чистом HTML.

Пример

Скопировано

Самый простой раскрывающийся блок выглядит вот так:

<details>  <summary>Легенда</summary>  <p>Раскрывающийся текст</p></details>
          <details>
  <summary>Легенда</summary>
  <p>Раскрывающийся текст</p>
</details>

Открыть демо в новой вкладке

Как понять

Скопировано

Иногда нужно скрывать какую-то информацию на странице в специальном блоке. Чтобы в любой момент можно было кликнуть на этот блок и развернуть информацию. И свернуть обратно таким же кликом. Такой блок ещё называют «аккордеоном».

Как пишется

Скопировано

Тег <details> — это интерактивный элемент, при нажатии на который открывается блок с информацией — текстом или картинками. Нередко такие элементы можно встретить на страницах с часто задаваемыми вопросами (FAQ), где в заголовке (или легенде) написан вопрос, а ответом является содержимое «аккордеона».

Тег <summary> — это заголовок «аккордеона», так называемая легенда. Он необязателен — без него в качестве легенды будет написан текст «Подробнее», «Details» или нечто подобное — в зависимости от выбранного языка и браузера.

Собирается «аккордеон» очень просто: в <details> вкладываем <summary> и теги с информацией, которая будет показываться при нажатии.

По умолчанию «аккордеон» закрыт, но если мы хотим, чтобы его содержание показывалось сразу при загрузке страницы или открывать его из JavaScript, нужно добавить к нему атрибут open.

<details open>  <summary>Легенда</summary>  <p>Раскрывающийся текст</p></details>
          <details open>
  <summary>Легенда</summary>
  <p>Раскрывающийся текст</p>
</details>

Открыть демо в новой вкладке

Подсказки

Скопировано

💡 Можно вкладывать <details> в <details>.

💡 <details> — это интерактивный элемент, но вкладывать другие интерактивные элементы в него можно.

💡 В HTML-стандарте написано, что <summary> должен быть первым ребёнком в <details>, но на деле всё прекрасно работает, даже если <summary> находится между тегами содержательной части «аккордеона».

💡 Вёрстка не ломается, если вложить <summary> в <summary> — в таком случае будет только один элемент ::marker (треугольник перед легендой).

💡 Если в «аккордеоне» будет несколько <summary> подряд, браузер будет реагировать только на первый, а остальные даже не отобразятся, хотя будут стоять в разметке.

💡 Если указать просто <summary> без <details>, то он будет вести себя как обычный <div> — блочный элемент без интерактивности.

На практике

Скопировано

Лена Райан советует

Скопировано

🛠 Если присутствует тег <summary>, то псевдоэлемент ::marker можно стилизовать — правда, он реагирует не на все свойства, но как минимум вы сможете поменять цвет и размер шрифта. Раньше для его стилизации нужно было использовать ::-webkit-details-marker.

Татьяна Фокина советует

Скопировано

🛠 Можно заменить иконку по умолчанию с помощью <img>. В этом случае оставьте значение атрибута alt пустым, так как это декоративное изображение.

<details open>  <summary>    <img src="images/arrow-down.svg" alt="">    Сроки доставки  </summary>  <p>Если закажите экспресс-доставку голубями, она займёт от 6 до 8 дней. Обычная доставка улиткой занимает примерно 20 дней.</p></details>
          <details open>
  <summary>
    <img src="images/arrow-down.svg" alt="">
    Сроки доставки
  </summary>
  <p>Если закажите экспресс-доставку голубями, она займёт от 6 до 8 дней. Обычная доставка улиткой занимает примерно 20 дней. </p>
</details>

Открыть демо в новой вкладке

🛠 У <summary> есть встроенная роль button. На практике скринридеры определяют роль тега по-разному. NVDA считает его кнопкой, Narrator — раскрывающим треугольником (disclosure triangle), десктопный VoiceOver — саммари (summary), а TalkBack в Firefox и мобильный VoiceOver в Safari вообще не определяют роль <summary>.

Можно использовать явную роль button для <summary>, но так лучше не делать:

Это не та ситуация, где стоит явно задавать ARIA-роль и нарушать одно из правил использования WAI-ARIA.
VoiceOver перестанет определять состояние <details> — развёрнут или свёрнут элемент.
Не решит проблему с неопределяемой ролью <details> для TalkBack в Firefox и мобильного VoiceOver в Safari.

🛠 Если заменить на свою иконку с треугольником по умолчанию у <summary>, это может привести к проблемам с объявлением VoiceOver, NVDA и JAWS состояния, в котором сейчас находится элемент.

🛠 В Firefox есть баг, из-за которого VoiceOver читает название иконки по умолчанию и считает его частью имени элемента — краткого названия, которое скринридеры объявляют вместе с ролью.

🛠 VoiceOver в Safari и JAWS в Chrome, Edge или Firefox не считают <h2>–<h6> заголовками, если они вложены в <summary>.

🛠 Может показаться, что <details> и <summary> подходят для выпадающего меню. Они ведут себя похоже, но это не самое доступное решение. Вот несколько причин:

Пользователи голосового управления не смогут открыть такой элемент с помощью привычных команд. К примеру, «Нажать на кнопку».
Скринридеры не всегда понимают, раскрыт сейчас такой элемент или нет.
Содержимое <summary> не попадает в список всех кнопок или других интерактивных элементов на странице, который есть у скринридеров.
У пользователей скринридеров нет шортката для быстрого перехода к <details> или <summary>.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<embed>

alt + ←

→

<meter>

alt + →

Элементы формы HTML

❮ Назад Далее ❯

В этой главе описываются все различные элементы формы HTML.

HTML-элементы

HTML-элемент может содержать один или несколько следующих элементов формы:

<метка>
<выбрать>
<текстовое поле>
<кнопка>
<набор полей>
<легенда>
<список данных>
<выход>
<опция>
<оптгруппа>

Элемент

Одним из наиболее часто используемых элементов формы является элемент .

Элемент может отображаться несколькими способами, в зависимости от тип атрибут.

Пример

Имя:

Попробуйте сами »

Все различные значения типа атрибут рассматривается в следующей главе: Типы ввода HTML.

Элемент

Элемент определяет метку для несколько элементы формы.

Элемент полезен для пользователям программ чтения с экрана, потому что программа чтения с экрана будет читать метку вслух, когда пользователь фокусируется на элементе ввода.

Элемент также помогает пользователям, трудности с нажатием на очень маленькие области (например, переключатели или флажки) — потому что, когда пользователь щелкает текст внутри элемента , он переключается переключатель/флажок.

Атрибут for тега должен быть равным id атрибуту элемент, чтобы связать их вместе.

Элемент

определяет раскрывающийся список:

Пример

Выберите автомобиль:

Попробуйте сами »

Элементы определяют опцию, которая может быть выбрано.

По умолчанию выбирается первый элемент в раскрывающемся списке.

Чтобы определить предварительно выбранный параметр, добавьте атрибут selected к опции:

Пример

Попробуйте сами »

Видимые значения:

Используйте атрибут размера , чтобы указать количество видимых значений:

Пример

Выберите автомобиль:

Попробуйте сами »

Разрешить множественный выбор:

Используйте атрибут Multiple , чтобы позволить пользователю выбрать более одного значения:

Пример

Выберите автомобиль:

Попробуйте сами »

Элемент

Попробуйте сами »

Атрибут строк определяет видимое количество строк в текстовая область.

Атрибут cols определяет видимую ширину текста область.

Вот как приведенный выше HTML-код будет отображаться в браузере:

Кот играл в саду.

Вы также можете определить размер текстовой области с помощью CSS:

Пример

<br/> Кошка играла в саду. <br/>

Попробуйте сами »

Элемент

Попробуйте сами »

Вот как приведенный выше HTML-код будет отображаться в браузере:

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

Элементы

Элемент

используется для группировки связанных данных в форме.

Элемент определяет заголовок для <набор полей> элемент.

Пример

Персоналия:
    Первый имя:



    Фамилия:

Попробуйте сами »

Вот как приведенный выше HTML-код будет отображаться в браузере:

Персоналия: Имя:

Фамилия:

Элемент

Элемент указывает список предопределенных параметров для элемента .

При вводе данных пользователи увидят раскрывающийся список предопределенных параметров.

list атрибут элемента , должен ссылаться на id атрибут элемента .

Пример

Попробуйте сами »

Элемент

Элемент представляет результат вычисления (например, выполняется по сценарию).

Пример

Выполнить вычисление и показать результат в элементе :

Попробуйте сами »

HTML-упражнения

Проверьте себя с помощью упражнений

Упражнение:

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

Начать упражнение

Элементы формы HTML

Тег	Описание
<форма>	Определяет форму HTML для пользовательского ввода
<ввод>	Определяет элемент управления вводом
<текстовое поле>	Определяет элемент управления многострочным вводом (текстовая область)
<метка>	Определяет метку для элемента
<набор полей>	Группирует связанные элементы в форме
<легенда>	Определяет заголовок для элемента
<выбрать>	Определяет раскрывающийся список
<оптгруппа>	Определяет группу связанных параметров в раскрывающемся списке
<опция>	Определяет параметр в раскрывающемся списке
<кнопка>	Определяет нажимаемую кнопку
<список данных>	Указывает список предопределенных параметров для элементов управления вводом
<выход>	Определяет результат вычисления

Полный список всех доступных тегов HTML см. в нашем справочнике по тегам HTML.

❮ Предыдущий Далее ❯

python - Как отправить выбранное значение из раскрывающегося списка HTML в бэкэнд FastAPI?

Как передать значение , выбранное из раскрывающегося списка HTML, с помощью FastAPI в серверной части и шаблона HTML-Jinja2 во внешнем интерфейсе?

Вот мой код для приложения:

 из fastapi import FastAPI, Request, Form
из fastapi.templating импортировать Jinja2Templates
приложение = FastAPI()
шаблоны = Jinja2Templates(directory="templates/")
@app.get('/')
защита read_form():
    вернуть «привет мир»
@app.get("/форма")
def form_post (запрос: запрос):
    результат = "Выберите свое имя"
    return templates.TemplateResponse('form.html', context={'запрос': запрос, 'результат': результат})
@app.post ("/ форма")
def form_post (запрос: запрос, результат = форма (...)):
    return templates.TemplateResponse('form.html', context={'запрос': запрос, 'результат': результат})

Вот HTML:

 

<голова>
    <мета-кодировка="UTF-8">
    Образец формы

<тело>
<метод формы="сообщение">
    <выбрать имя="имена">
        
        
        
        
    
    

    
Результат: {{ результат }}

Вот сообщение об ошибке:

 {"detail":[{"loc":["body","result"],"msg":"поле обязательно","type":"value_error. missing"} ]}

Цель состоит в том, чтобы выбрать имя , затем нажать отправить , и, наконец, отобразить его ниже.

python
html
jinja2
html-select
fastapi

Обязательно включите атрибут action в атрибуте HTML

, который указывает, куда отправлять данные формы , когда отправляется (также см. W3schools tag docs). Кроме того, в элементе tag docs:

Атрибут имя необходим для ссылки на данные формы после форма отправлена (если вы опустите атрибут name , данные из раскрывающийся список будет отправлен).

Каждый элемент внутри

0

`Зарегистрируйтесь или войдите в систему`

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

`Опубликовать как гость`

Электронная почта

Требуется, но никогда не отображается

`Опубликовать как гость`

Электронная почта

Требуется, но не отображается

`Формы: выпадающее меню`

Выпадающие меню, вероятно, являются наиболее гибкими объектами, которые вы можете добавить в свои формы.

В зависимости от ваших настроек раскрывающиеся меню могут служить той же цели, что и радиокнопки (только один выбор) или флажки (можно выбрать несколько вариантов).

Преимущество раскрывающегося меню по сравнению с переключателями или флажками заключается в том, что оно занимает меньше места. Но это также и недостаток, потому что люди не могут сразу увидеть все опции в меню.

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

Итак, что бы вы ни решили - всегда есть бонус и цена.

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

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

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

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

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

НАСТРОЙКИ:

Ниже приведен список допустимых настроек для раскрывающихся меню:

 
 HTML  ОБЪЯСНЕНИЕ  ПРИМЕР 
 выберите 
 имя= 
 размер= 
 несколько= 
 опция 
 выбрано 
 значение= 
 Имя раскрывающегося меню 70367  
 Видимые элементы в списке. 
 Разрешает множественный выбор, если да. 
 Отдельные пункты меню. 
 По умолчанию выберите элемент. 
 Значение для отправки, если оно выбрано. 
 ButterCheeseMilk 
 Раскрывающиеся меню объединяют  
 
 
 
  
 Тег  
 
 9А результирующий вывод из него: 
 
 Свежий хлеб с сыром Milkold 
 
 
 << Предыдущий 7666666666666666666666666666666666666666666666666666666666666.0359  ПОДРОБНЕЕ >>  
 
 HTML ВЫПАДАЮЩИЙ СПИСОК с примерами программирования. »StudyMuch 
 Опубликовано  StudyMuch   2 января 2022 г.   2 января 2022 г. 
  HTML -учебник N0: 12 
 
  HTMLML. элемент, это элемент управления, предоставляющий меню опций. 
 
  Он использует любой элемент, чтобы открыть раскрывающееся меню, раскрывающееся меню HTML представляет собой список параметров, мы также можем видеть навигацию по меню любого веб-сайта.

В раскрывающемся списке HTML элемент в HTML. По крайней мере, в 1995 году это было так.

Я также работал с рекламными агентствами, когда они создавали свои веб-команды. Перевод их навыков HyperCard или Director означал, что их жаргон также нашел свое применение в веб-проектах. Но мы все еще можем утверждать, что гипертекстовая область в макете дизайна, вероятно, была ссылкой в HTML.

Слово 9Раскрывающийся список 1026 (раскрывающийся список , drahp-daughn , daft-dolt ) был общим для обеих групп клиентов. Однако если вы использовали этот термин с одной группой, вы можете получить определенный элемент управления, который не будет транслироваться в Интернете. С другой группой вы можете получить дизайн, который делает невозможным создание конкретного элемента управления.

Со сломанными процессами, которые не получили всех в комнате одновременно и без общего понимания раскрывающегося списка , мы закостенели в нашей нынешней ситуации.

Приступая к проектированию, сборке или спецификации, важно понимать, что вы производите и почему. Когда вы говорите раскрывающийся список , что вы имеете в виду? А как насчет вашего клиента? Ваш дизайнер? Ваш разработчик? Пользователь (кто звонит в службу поддержки)? Программа чтения с экрана? Программа для голосового управления?

1.

<выбрать>
Как
, я утверждаю, что самая большая причина, по которой все ненавидят элемент в наличии.
Если вы намерены использовать собственный HTML . Обязательные дочерние элементы списка имеют параметр роль, соответствующая родной .
Если вы имеете в виду эту конструкцию, назовите ее списком ARIA .
Этот термин устанавливает ожидания для реализации и подразумевает дизайн, не ограниченный настройками браузера по умолчанию, как как на поле со списком , слово со списком имеет очень специфическое значение, особенно для разработчиков форм Windows старой школы. С точки зрения веб-технологий, это аналог , </code> полей. </p> <p> В противном случае, предполагая, что предыдущие параметры не подходят, и требования требуют, чтобы XMLHttpRequest заполнял параметры по мере ввода, у вас есть другой вид контроля. В качестве альтернативы, если элемент управления поддерживает сопоставление значений, которые пользователь не вводит (например, ввод слова на одном языке и просмотр результата на другом языке, как в этом примере автозаполнения), то у вас также есть другой тип элемента управления. </p> <p> Для этого сценария, зная, что вам все еще может понадобиться собрать требования, назовите это автозаполнением <em> </em> . </p> <p> Если вы пытаетесь воссоздать родное меню, которое вы получите, щелкнув правой кнопкой мыши, то вам подойдет роль меню </code> ARIA <code>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fsd.videouroki.net/html/2020/01/06/v_5e12ecf4147ae/img25.jpg' /><noscript><img loading='lazy' src='/800/600/http/fsd.videouroki.net/html/2020/01/06/v_5e12ecf4147ae/img25.jpg' /></noscript> Если вам нужно родное меню, похожее на то, что вы найдете в приложении для Windows или Mac, тогда вам подойдет роль <code> menubar </code>. </p> <p> Вы можете обойтись без обращения к любой из этих опций как к меню </em> ARIA </em> . </p> <p> При обсуждении этого варианта должно быть ясно, что меню ARIA предназначено для воспроизведения собственных функций ОС, а не для навигации по веб-сайту или других общих целей веб-контента. Если вам нужна помощь в обосновании вашего дела, я подробно написал на <cite> Не используйте роли меню ARIA для навигации по сайту </cite> . </p> <h3><span class="ez-toc-section" id="7"> 7. </span></h3><code> <детали> </code> / <code> <резюме> </code> </h3> <p> Хотя поддержка <code> <details> </code> и <code> <summary> </code> в браузерах появилась относительно недавно (и отсутствует в IE и устаревшем Edge), это удобный встроенный элемент для скрытия и отображения контента. Для неподдерживающих браузеров вам все равно понадобится JavaScript для полифилла. </p> <p> По сути, <code> <details> </code> / <code> <summary> </code> являются собственным виджетом раскрытия информации.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf2.ppt-online.org/files2/slide/9/9ZeVxEHFczPLRy6wqYOru4B7ogmpXUn0k2TIsh/slide-9.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/9/9ZeVxEHFczPLRy6wqYOru4B7ogmpXUn0k2TIsh/slide-9.jpg' /></noscript> Вот об этом. <code> <детали> </code>/<code> <summary> </code> - это <em>, а не </em> и много других вещей (я думал, что они не являются модальными, это очевидно, но люди должны экспериментировать). </p> <p> Обычно вы можете ссылаться на них как <em> детали </em> / <em> сводка </em> или <em> детали и сводка </em> . </p> <p> Компетентный веб-человек поймет, что вы говорите об интерактивном виджете, а не об элементе управления формы. </p> <h3><span class="ez-toc-section" id="8"> 8. Виджет раскрытия информации </span></h3> <p> Думайте об этом как о версии ARIA <code> <details> </code> и <code> <summary> </code> , но в этом случае вы не используете роли ARIA для улучшения общих элементов управления. Вам нужен <code> <button> </code> с <code> aria-expanded </code> (и <code> aria-controls </code>, несмотря на падение поддержки) и связанный контейнер содержимого, видимость которого переключается. </p> <p> Виджет раскрытия в документе ARIA Authoring Practices — один из немногих зрелых шаблонов в этом примечании, и вы можете использовать его в качестве основы для своего кода.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/s/sb4yTH1Stjgunk0RqMce6ZWfxQlBzaPG7UYKr5/slide-26.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/s/sb4yTH1Stjgunk0RqMce6ZWfxQlBzaPG7UYKr5/slide-26.jpg' /></noscript> Шаблон надежен и может даже использоваться для навигации. </p> <p> Используйте термин <em> виджет раскрытия информации </em> для обозначения этого шаблона. </p> <h3><span class="ez-toc-section" id="9"> 9. Аккордеон </span></h3> <p> Подобно шаблону виджета раскрытия, в ARIA не определена роль аккордеона. В отличие от виджета раскрытия, здесь нет соответствующего нативного HTML-элемента. Шаблон вкладок ARIA, даже вертикальный, не подходит, потому что панели вкладок не сворачиваются для освобождения места. При этом убедитесь, что ваша потребность не соответствует шаблону вкладки ARIA. </p> <p> Виджет аккордеона в документе ARIA Authoring Practices является одним из других зрелых шаблонов в этом примечании, который вы можете использовать в качестве основы для своего кода. Вам нужен <code> <button> </code> с <code> aria-expanded </code> (и <code> aria-controls </code>, несмотря на падение поддержки) в заголовке и связанном контейнере контента, видимость которого переключается, а также переключается видимость других контейнеров контента.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/myaprel.ru/uploads/posts/2016-11/1479908347_7.jpg' /><noscript><img loading='lazy' src='/800/600/http/myaprel.ru/uploads/posts/2016-11/1479908347_7.jpg' /></noscript> </p> <p> Обсуждая этот паттерн, называйте его <em> аккордеон </em> . </p> <h3><span class="ez-toc-section" id="10"> 10. Выдвижная навигация </span></h3> <p> В течение многих лет навигация по веб-сайту называлась раскрывающимся списком. Для доказательства того, насколько это распространено, и его возраста, раскрывающиеся списки Suckerfish были выпущены в 2003 году и опирались на уже распространенный термин. </p> <p> Если вы ищете навигацию, в которой табуляция или перемещение мышью по параметрам верхнего уровня открывает вложенные параметры, то нам нужен более значимый термин. WAI предоставляет учебные пособия для различных шаблонов, а <cite> Всплывающие меню </cite> подходит. Это не новый термин, существовавший еще до Suckerfish. </p> <p> Если у вас есть навигация, которая в целом соответствует этому шаблону, см. это <em> всплывающая навигация </em> или <em> всплывающая навигация </em> . </p> <h3><span class="ez-toc-section" id="11"> 11. Селектор пользовательского дисплея </span></h3> <p> Это своего рода ловушка. Я видел, как разработчики придумали все методы создания элементов управления, которые, по сути, работают, скрывая некоторые вещи, а затем показывая их, анимируя или выталкивая какой-то контейнер.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/4/5/8/458160f7cd55c7bffa056dfea63a70fe.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/4/5/8/458160f7cd55c7bffa056dfea63a70fe.jpeg' /></noscript> Как правило, они недоступны, и это может быть прекрасной возможностью убедиться, что вы выбрали что-то, что соответствует одному из приведенных выше шаблонов. </p> <p> Если вы обнаружите, что заходите на эту территорию, возможно, остановитесь. Вернитесь назад и выясните, каковы на самом деле требования, а не полагайтесь на предположения или странное желание изобрести новый шаблон, который никто не поймет. </p> <p> Обсуждая этот подход, назовите его <em> консалтинг </em>. </p> <p> Я подозреваю, что кто-то может упомянуть <code> <menu> </code> и <code> <menuitem> </code> , но эти элементы устарели из-за отсутствия реализации. Я отсылаю вас к меню ARIA выше, если вы считаете, что у вас есть вариант использования. </p> <p> Я слышал термин <em> всплывающее окно </em> вместо раскрывающегося списка <em> </em> . Всплывающее окно — еще более запутанный термин, поскольку оно может также означать всплывающую подсказку, собственный диалог, модальный диалог или даже новое окно (помните всплывающие окна?).<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/redaksi.pens.ac.id/wp-content/uploads/2020/03/10-2-768x799.png' /><noscript><img loading='lazy' src='/800/600/http/redaksi.pens.ac.id/wp-content/uploads/2020/03/10-2-768x799.png' /></noscript> Это не помогает, когда программы чтения с экрана ссылаются на некоторые <code> <select> </code>-подобные элементы управления как на всплывающие окна. </p> <p> Если кто-то запрашивает всплывающее окно, вам сначала нужно устранить неоднозначность (эй, слово из Википедии!) между чем-то вроде диалога, элементом управления формы или элементом отображения виджета. Тогда вам нужно быть усердным в том, какие термины вы используете. </p> <p> Термин <em> меню </em> также используется при ссылке на <code> <select> </code> , поле со списком или навигацию, и все это способствует путанице. Возможно, у меню меньше потенциальных значений, чем у раскрывающегося списка, но вы можете применить ту же логику, чтобы попытаться сократить то, что имеет в виду каждый, кто его использует. </p> <p> Для более глубокого изучения шаблонов <code> <select> </code> , <code> listbox </code> или <code> combobox </code> , особенно если вы планируете реализовать какой-либо из них, я настоятельно рекомендую следующие статьи Сары Хигли: </p> <ul> <li> <cite> <code> <выбрать> </code> твой яд </cite> </li> <li> <cite> <code> <select> </code> твой яд часть 2: испытай все </cite> </li> </ul> <h3><span class="ez-toc-section" id="TLDR"> TL;DR </span></h3> <p> Прекратите использовать слово <em> в раскрывающемся списке </em> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/N94a5.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/N94a5.png' /></noscript> Вместо этого выберите термин, точно описывающий нужный вам элемент управления. </p> <h3><span class="ez-toc-section" id="_16_2020"> Обновление: 16 апреля 2020 г. </span></h3> <p> В сообщении Nielsen Norman Group, <cite> Listboxes vs. Dropdown Lists </cite>, автор описывает разницу между двумя элементами управления на основе их визуальной доступности. Учитывая, что в статье говорится об этих концепциях в целом, справедливо не ожидать, что в ней будут использоваться конкретные технические термины. </p> <p> Однако в веб-контексте их пример раскрывающегося списка <em> </em> сопоставляется с <code> <select> </code> или списком ARIA. </p> <p> Их пример <em> listbox </em> сопоставляется с <code> <select size="[>0]"> </code> , <code> <select size="[>0]" multiple> </code> , параллельными версиями этих элементов управления (для перемещения элементов между их) или набор флажков в контейнере, который может прокручиваться или не прокручиваться. Или он может сопоставляться со списком ARIA. </p> <p> Приведенный пример — фильтры товаров на сайте Sephora, каждый из которых может быть конструкцией <code> <fieldset> </code> / <code> <legend> </code> с фиксированной высотой, допускающей прокрутку и содержащей чекбоксы.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/4/7/f/47fd100f12e2f704a74f8f0ae8f86530.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/4/7/f/47fd100f12e2f704a74f8f0ae8f86530.jpeg' /></noscript> </p> <p> В конце поста есть таблица, которая поможет вам определить, какой из двух шаблонов подходит для ваших нужд. Однако, учитывая потенциальную разницу во взаимодействиях между возможными пятью различными способами их кодирования, он не дает руководства по взаимодействию. Например, является ли шаблон более громоздким для пользователя программы чтения с экрана? Что следует выбрать при рассмотрении пользователей, использующих только клавиатуру? </p> <p> С точки зрения пользовательского опыта статья является удобным справочником для начальных обсуждений. С точки зрения разработки, он упускает возможность устранить неоднозначность и предложить руководство по конкретным взаимодействиям, потенциально продолжая путаницу в отношении того, что означают эти имена. </p> <h3><span class="ez-toc-section" id="_1_2021"> Обновление: 1 июля 2021 г. </span></h3> <p> У этого поста теперь есть брат: <cite> Прекратить использование всплывающих окон </cite> </p> <p> Если вас интересует мое мнение (и альтернативы) для часто неправильно применяемого термина <em> всплывающее окно </em> , тогда этот пост для вас.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/3/a/c/3ac7e18b8a659c29f575653e7f089f48.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/3/a/c/3ac7e18b8a659c29f575653e7f089f48.jpeg' /></noscript> Он также использует изображение из IKEA. </p> <h3><span class="ez-toc-section" id="i-41"> Метки </span></h3> <p> html, шаблон, стандарты </p> <h3><span class="ez-toc-section" id="i-42"> Другие сообщения </span></h3> <p> Предыдущая запись: <cite> Ролевая игра </cite> </p> <p> Более свежая публикация: <cite> CSUN 2020: свойства отображения CSS и семантика HTML </cite> </p> <h2><span class="ez-toc-section" id="_CSS_HTML"> раскрывающихся списков CSS | HTML Собака </span></h2> <p> Раскрывающийся список <strong> — довольно распространенный вид навигации.0175, где списки вспомогательной навигации появляются только при наведении курсора на ссылку. </p> <p> HTML Dog имеет долгую историю с раскрывающимися списками — мы выделили популярный метод Suckerfish Dropdowns еще в 2003 году. Однако с тех пор стандарты и браузеры прошли долгий путь, и теперь мы можем безопасно использовать гораздо более простую технику, используя CSS без необходимости для любого JavaScript. </p> Многоуровневые выпадающие списки. <p> Прежде чем начать, подумайте, не будет ли разумнее всего применить раскрывающиеся списки к вашему сайту.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/lqUZI.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/lqUZI.png' /></noscript> Хотя скрытие основной части навигации может сделать дизайн более чистым, это добавляет пользователю дополнительный уровень сложности при переходе к этим скрытым ссылкам. Это не будет существенной проблемой для большинства, но будет для тех, кто не использует или не может использовать указывающее устройство, такое как мышь. Это может быть случай для людей с двигательными или зрительными нарушениями или для тех, кто использует мобильные устройства с сенсорным экраном. Вы должны, по крайней мере, подумать о том, как предоставить этим пользователям возможность навигации (см. пункты об использовании ссылок позже). Если вы решили использовать раскрывающиеся списки, давайте двигаться вперед и применять их наилучшим образом… </p> <p> <strong> Ссылка на нас! </strong> Если вы нашли HTML Dog полезным, рассмотрите возможность ссылки на нас. </p> <h3><span class="ez-toc-section" id="HTML-4"> HTML: Красиво вложенные списки </span></h3> <p> Как и любая хорошая навигация, <strong> списка </strong> ссылок — лучший вариант для структурирования раскрывающихся списков.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/wikihow.com/images/thumb/d/db/3234689-6.jpg/v4-728px-3234689-6.jpg' /><noscript><img loading='lazy' src='/800/600/http/wikihow.com/images/thumb/d/db/3234689-6.jpg/v4-728px-3234689-6.jpg' /></noscript> Так как мы хотим, чтобы один элемент раскрывал группу подэлементов, нам наверняка нужно <strong> вложенных списка </strong>, то есть список списков: </p><pre> <ул> <li> <a href="">Птицы</a> <ул> <li><a href="">Ратиты</a></li> <li><a href="">Птица</a></li> <li><a href="">Неоавес</a></li> </ul> </li> <li> <a href="">Млекопитающие</a> <ул> <li><a href="">Монотремы</a></li> <li><a href="">Сумчатые</a></li> <li><a href="">Плацентарные</a></li> </ul> </li> </ul> </pre><p> Итак, у нас есть «Птицы» и «Млекопитающие» в качестве предметов верхнего уровня, а «Крысы», «Однопроходные» и так далее в качестве предметов второго уровня, подкатегории. </p> <p> <strong> Используйте ссылки. </strong> Всегда используйте ссылки. Если вас больше всего интересуют подкатегории (например, «Крысоловы» и «Однопроходные»), подумайте, по крайней мере, о том, чтобы основные элементы (например, «Птицы» и «Млекопитающие») ссылались на страницу со стандартной навигацией.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/AwaHp.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/AwaHp.png' /></noscript> на страницы подкатегорий. Основная причина этого — доступность — как уже отмечалось, посетители вашей страницы не всегда будут использовать указывающее устройство (которое, конечно, требуется для наведения и открытия подменю). </p> <h3><span class="ez-toc-section" id="CSS"> CSS: самое необходимое </span></h3> <p> Чтобы настроить все это визуально, давайте обнулим отступы по умолчанию (и поля для старых браузеров) списков: </p><pre> ул { заполнение: 0; маржа: 0; } </pre><p> Далее, для каждого элемента списка мы хотим расположить их горизонтально. Забегая вперед, мы также хотим указать, что источником для позиционирования всех подсписков является их родительский элемент списка: </p>.<pre> ли { дисплей: встроенный; положение: родственник; } </pre><p> Теперь займемся списками внутри списка. Мы хотим расположить их абсолютно, размещая их поверх всего, и мы хотим их скрыть: </p><pre> уль уль { положение: абсолютное; дисплей: нет; } </pre><p> Для поддержки старых браузеров вы также можете явно расположить подсписки, добавив к этому <code> слева: 0 </code> и <code> сверху: 100% </code>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/image2.slideserve.com/3995011/combobox-l.jpg' /><noscript><img loading='lazy' src='/800/600/http/image2.slideserve.com/3995011/combobox-l.jpg' /></noscript> </p> <p> Наконец, чтобы показать эти подсписки при наведении курсора на основной элемент списка: </p><pre> ли: наведите ул { дисплей: блок; } </pre><p> Первый сопровождающий пример показывает это в действии вместе с поясняющими встроенными комментариями (см. исходный код). </p> <h3><span class="ez-toc-section" id="i-43"> Многоуровневые раскрывающиеся списки </span></h3> <p> Размещение более одного уровня раскрывающегося меню потребует большего вложения списка: </p><pre> <li> <a href="">Млекопитающие</a> <ул> <li> <a href="">Монотремы</a> <ул> <li><a href="">Ехидны</a></li> <li><a href="">Утконос</a></li> </ul> </li> <li> <a href="">Сумчатые</a> <ул> <li><a href="">Опоссумы</a></li> <li><a href="">Нумбаты и т. д.</a></li> <li><a href="">Бандикуты и т. д.</a></li> <li><a href="">Кенгуру, коалы, вомбаты и т. д.</a></li> </ul> </li> <li> <a href="">плацентарные</a> <ул> <li><a href="">Приматы, копытные и т.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/wikihow.com/images/thumb/7/78/3234689-4.jpg/aid3234689-v4-728px-3234689-4.jpg' /><noscript><img loading='lazy' src='/800/600/http/wikihow.com/images/thumb/7/78/3234689-4.jpg/aid3234689-v4-728px-3234689-4.jpg' /></noscript> д.</a></li> <li><a href="">Муравьеды, ленивцы и т. д.</a></li> <li><a href="">Слоны и т. д.</a></li> </ul> </li> </ul> </li> </pre><p> Теперь, чтобы обрабатывать эти новые под-подсписки немного по-другому, мы хотим, чтобы они отображались сбоку от своих элементов родительского списка, а не под ними: </p><pre> ул уль уль { слева: 100%; сверху: 0; } </pre><p> Нужна небольшая поправка. В его нынешнем виде <strong> будут показаны все </strong> списков потомков элемента списка, на который наведен курсор. Таким образом, при наведении курсора на «Млекопитающие» в этом примере будут показаны не только «Однопроходные», «Сумчатые» и «Плацентарные», но и все виды сумчатых — «Оппоссумы» и так далее. Нам нужен только первый потомок — <strong> детей </strong> (не внуков) — показать. Поэтому мы изменяем <code> li:hover ul </code>, вставляя дочерний селектор <strong> </strong> : </p>.<pre> li: наведите курсор > ул { дисплей: блок; } </pre><p> Другие базовые изменения, которые вы, возможно, захотите внести, включают плавающие элементы списка вместо использования <code> display: inline </code> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/f/4/1/f4147a06043e8e2e7f207e6ac4b01eb4.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/f/4/1/f4147a06043e8e2e7f207e6ac4b01eb4.jpeg' /></noscript> </div> <div class="post-meta"> </div> </article> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/krasnoe-derevo-tekstura-krasnoe-derevo-tekstura-besshovnaya-27-foto.html" rel="prev"><span class="meta-nav">Предыдущая запись</span> Красное дерево текстура: Красное дерево текстура бесшовная — 27 фото</a></div><div class="nav-next"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/kak-pereimenovat-ssylku-v-slovo-vkontakte-kak-izmenit-nazvanie-i-ssylku-gruppy-v-vk.html" rel="next"><span class="meta-nav">Следующая запись</span> Как переименовать ссылку в слово вконтакте: Как изменить название и ссылку группы в вк</a></div></div> </nav> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/raskryvayushhijsya-spisok-v-html-kak-sdelat-vypadayushhij-spisok-s-pomoshhyu-html.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--80aahvkuapc1be.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>
Имя *
Email *
Сайт