Как называется выпадающий список в программировании

Выпадающий список. Тег

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

Все опции списка должны быть обёрнуты в тег .

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

• autocomplete — подсказка для функции автозаполнения формы;
• disabled — делает элемент неактивным;
• form — связывает список с формой;
• multiple — позволяет выбрать несколько опций;
• name — задает имя элемента, которое будет отправляться на сервер;
• required — делает элемент обязательным для заполнения;
• size — задает количество строк в списке.

Чем заменить этот тег

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

Полезные ссылки

• �� Спецификация
• ��️ Зачем нужна семантическая вёрстка

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Контейнер для чего угодно. Тег

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

 
Заголовок секции
 
Какое-нибудь содержимое секции
 
 

• 6 октября 2023

Как добавить подпись в HTML. Тег

Устаревший атрибут align — выравнивание подписи относительно элемента .

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

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

• 6 октября 2023

Метаданные HTML-страницы. Тег

Тег содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.

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

• charset — кодировка символов в документе.
• name — имя метаданных.
• content — значение метаданных.
• http-equiv — HTTP-заголовок для значения атрибута content .

Атрибут charset должен быть первым атрибутом в теге , а name и http-equiv нельзя использовать вместе.

• 4 октября 2023

Просто кнопка. Тег

Тег создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.

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

• name — имя кнопки.
• type — тип кнопки, по умолчанию — submit . Атрибут type необходим, если указан атрибут value .
• value — значение, которое будет отправлено на сервер при нажатии на кнопку.
• disabled — указывает, что кнопка должна быть отключена.
• form — одна или несколько форм, к которым принадлежит кнопка.
• formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
• formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
• formmethod — метод HTTP, используемый при отправке данных формы.
• formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
• formtarget — указывает, где отображать ответ после отправки формы.

• 4 октября 2023

Независимый контент. Тег

Тег в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.

 
Заголовок статьи
 
Текст статьи.
 
 

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

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

• 3 октября 2023

Как встроить страницу через

Тег позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.

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

Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.

Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).

• 3 октября 2023

Встроенные CSS-стили для страницы с тегом

Тег используется для определения стилей для HTML-документов. Он является важным компонентом CSS, которые позволяют разработчикам создавать визуально привлекательные веб-страницы, определяя различные стили, такие как цвета, шрифты и макеты.

    body 
Добро пожаловать на мой сайт!
   

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

• type — MIME-тип таблицы стилей.
• media — типы носителей, для которы будет использоваться стиль.

• 29 сентября 2023

Изображение в HTML. Тег

Элемент используется для вставки изображений на веб-страницы.

У нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.

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

• 28 сентября 2023

Все что нужно знать о раскрывающихся списках (dropdown)

Усе що потрібно знати про списки, що розкриваються (dropdown)

Редакція ・ Серп 1

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

1. Анатомия

Анатомия раскрывающегося списка очень похожа на анатомию поля ввода текста. Чтобы сравнить их, прочтите предыдущую статью. Анатомия раскрывающегося списка формы

2. Типы и варианты раскрывающихся списков

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

Стандартный раскрывающийся список

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

Раскрывающийся список с автодополнением (autosuggest)

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

Раскрывающийся список с автодополнением и автозаполнением (autocomplete)

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

Раскрывающийся список со множественным выбором

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

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

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

Меню с множественным выбором

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

Выборщик дат (Date picker)

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

Рекомендации Тесс, как заставить людей ненавидеть тебя:

1. Когда вы просите людей указать день, когда истекает срок действия карты или паспорта, используйте выпадающее меню календаря. Ведь им важно точно знать, в какой день недели истекает срок действия их карты.
2. При запросе пользователей ввести дату рождения, используйте выпадающий календарь. Бонус: убедитесь, что нажатие на каждый месяц –единственный способ, которым пользователи могут перемещаться по годам. Еще бонус: этот паттерн дизайна особенно полезен в онлайн-формах для домов престарелых.

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

3. Стили раскрывающихся списков

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

Стандартный стиль с прикрепленным списком (attached)

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

Стандартный стиль (attached)

Стандартный стиль с отдельным списком (detached)

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

Стандартный стиль (detached)

Закругленные границы

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

С иконками

Добавление простой иконки в начало поля ввода может сделать его более «спроектированным». Когда кто-то жалуется, что форма выглядит слишком скучно («Стив, это форма с 20 полями ввода – как думаешь, на что она будет похожа?»), я просто добавляю иконки.

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

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

С изображениями

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

Раскрывающийся список с изображениями. Фото с Unspalsh.Фото: Strawberry cake — @alinasagirova , Cheese cake — @patuphotos, Chocolate cake — @tuvaloland

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

Раскрывающийся список Material Design с заливкой

Мои постоянные читатели знают, что я большой поклонник Material Design, включая их выпадающие списки.

Поле «только линия» больше не используется в руководстве Material Design, но вы все равно встретите его в Интернете. Если вы хотите узнать больше, я написал об этом в предыдущей статье, а Dave Chui ответил здесь.

Раскрывающийся список Material Design с линией

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

Раскрывающийся список Material Design с заливкой

Раскрывающийся список Material Design с рамкой

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

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

Раскрывающийся список Material Design с рамкой

4. Состояния раскрывающихся списков

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

Активное состояние

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

Отключенное состояние

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

Наведение курсора

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

Состояние наведения курсора

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

Состояние выделения

Состояние выделения – это когда пользователь использует tabbing map (т.е. использует «tab» для навигации по интерфейсу и «enter» для ввода информации) и выделяет раскрывающийся список перед его выбором. Обычно мы видим это как «синий ореол» на интерактивных элементах.

Однако некоторые сайты сочетают в себе состояние выделения и фокуса, поэтому, даже, если пользователь не нажимает клавишу «Enter», раскрывающийся список сразу же открывается. Я не знаю, какая система лучше. Логично, что объединение двух состояний имеет смысл. Однако меня запутывает, когда раскрывающиеся списки открываются, а я не говорил им это делать. Кто-нибудь имел подобный опыт? Пишите в комментариях.

Альтернативные состояния выделения

Состояние фокуса

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

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

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

Состояние фокуса при наведении курсора

Завершенный ввод

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

Ошибка обратной связи

При свободном вводе текста пользователь может сделать опечатку. Однако, поскольку варианты ответа в раскрывающемся списке предопределены, должен быть только один тип обратной связи при ошибке – «Пожалуйста, заполните поле», если пользователь нажмет кнопку «Отправить» до того, как закончит заполнение формы.

Ошибка обратной связи

5. Что должен сказать плейсхолдер

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

Пустой плейсхолдер

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

Раскрывающийся список с пустым плейсхоледром

Общие подсказки в плейсхолдере

«- Select -», «Choose» и т.д. – это классические подсказки для раскрывающихся списков.

Раскрывающийся список с общими подсказками

Побуждающая фраза в плейсхолдере

Использование универсальных «Select» / «Choose», а затем того, что вы хотите, чтобы пользователи выбрали, является классным способом сохранить согласованность в раскрывающихся списках, а также дать вашим пользователям подсказку относительно того, что делать.

Раскрывающийся список с побуждающей фразой

Выбранный вариант в качестве плейсхолдера

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

Раскрывающийся список с выбранным вариантом в качестве плейсхолдера

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

6. Когда не использовать выпадающий список (а когда нужно)

Этот раздел посвящен всем сайтам, которые заставляют меня вводить год рождения, используя выпадающий список: f *** you. Не нужно напоминать мне о быстро растущем возрасте, пролистывая длинный список месяцев, пока я в конце концов не найду год своего рождения.

Если у вас меньше пяти вариантов

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

Альтернатива выпадающего списка: если у вас меньше пяти вариантов

Примечание: некоторые люди говорят, что должно быть меньше шести вариантов, но вы сами решите какое правило вам подходит.

Если проще напечатать, чем выбрать

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

Альтернатива выпадающего списка: если легче напечатать

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

Если у вас есть два варианта, и это «on» и «off» (или «да» и «нет»)

Раскрывающийся список с двумя вариантами немного раздражает. Особенно с вопросами «да / нет». Переключатели прекрасно подходят для подобных вопросов.

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

Если варианты ответа числовые

Если варианта ответа числовые, у вас есть несколько вариантов.

Первый – позволить пользователю напечатать ответ. Степперы также полезны, но я бы предложил использовать их только в том случае, если ожидается, что будет не больше пяти вариантов. В противном случае ваш бедный пользователь будет долго сидеть, кликая до 100.

Альтернатива выпадающего списка: если варианты числовые

Второй использует ползунок (слайдер), чтобы выбрать значение. Слайдеры особенно полезны для больших чисел или приблизительных значений.

Альтернатива выпадающего списка: если варианты числовые

Альтернатива выпадающего списка: если варианты имеют диапазон

Если вариантов много

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

Альтернатива выпадающего списка: если вариантов много, НО пользователь знает ответ, прежде чем кликнуть по раскрывающемуся списку

Итак, когда вы должны использовать раскрывающийся список?

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

1. Есть более шести вариантов.
2. Когда варианты не являются чем-то, что пользователь сразу узнает. Например, представьте, что ваш пользователь загружает видео, а хост должен знать, какую лицензию прикрепить к видео. Среднестатистический пользователь не будет знать все варианты, доступные на платформе, поэтому потребуется раскрывающийся список.

7. Нативные раскрывающиеся списки

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

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

Наши широкомасштабные тесты юзабилити и сравнительный анализ показывают, что в то время как 82% сайтов электронной коммерции используют в процессе оформления заказа кастомные раскрывающиеся списки, 31% из них имеют значительные проблемы юзабилити.

Статью можно прочитать здесь

По умолчанию

Вот несколько примеров нативных раскрывающихся списков. Чтобы попробовать их, перейдите по ссылке: https://html.com/attributes/option-selected/

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

Использование оболочки

Раньше я называл подобные раскрывающиеся списки «полу-кастомными», но недавно нашел статью, в которой этот паттерн называется оболочкой (shell) – это звучит куда формальнее. Поэтому впредь я буду называть это оболочкой, и буду использовать этот термин на совещаниях. Я буду наслаждаться, когда люди будут спрашивать меня, что это значит, просто чтобы я мог показать, насколько я умен.

«НО, что такое оболочка?», спросите вы. Оболочка – это когда поле выглядит нестандартно, но, когда вы кликаете по нему, оно использует нативный стиль раскрывающегося списка. Это простой способ сохранить стиль страницы в соответствии с вашим брендом и снизить стоимость разработки. Это также помогает решить проблемы UX, которые могут возникнуть с кастомными полями ввода.

Оболочка раскрывающегося списка

8. Проверка доступности?

1. Активное состояние раскрывающегося списка (включая метку) превышает 44px? (Мы учитываем метку, потому что, если вы кликните по метке, раскрывающийся список все равно должен открыться).
2. Все варианты в раскрывающемся списке имеют высоту более 44px с расстоянием 8px между ними?
3. Соответствуют ли цвета стандартам доступности AAA?
4. У вашего раскрывающегося списка есть выделенное состояние?
5. Убедитесь, что выпадающие списки работают с tabbing map.
6. Если вы используете кастомный раскрывающийся список, убедитесь, что он может открываться вверх или вниз в том случае, если область просмотра браузера находится слишком низко.

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

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

Спасибо Lesedi Hermans.

Выпадающий список с наполнением

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

Способ 1. Если у вас Excel 2007 или новее

Простой и удобный способ почти без формул. Использует новую возможность последних версий Microsoft Excel начиная с 2007 версии — «Умные Таблицы». Суть его в том, что любой диапазон можно выделить и отформатировать как Таблицу. Тогда он превращается, упрощенно говоря, в «резиновый», то есть сам начинает отслеживать изменения своих размеров, автоматически растягиваясь-сжимаясь при добавлении-удалении в него данных. Выделите диапазон вариантов для выпадающего списка (A1:A5 в нашем примере выше) и на Главной (Home) вкладке нажмите кнопку Форматировать как таблицу (Home — Format as Table). Дизайн можно выбрать любой — это роли не играет: Обратите внимание на то, что таблица должна иметь строку заголовка (в нашем случае это А1 со словом Сотрудники). Первая ячейка играет роль «шапки» и содержит название столбца. На появившейся после превращения в Таблицу вкладке Конструктор (Design) можно изменить стандартное имя таблицы на свое (без пробелов!). По этому имени мы сможем потом адресоваться к таблице на любом листе этой книги: Теперь выделите ячейки где вы хотите создать выпадающие списки (в нашем примере выше — это D2) и выберите в старых версиях Excel в меню Данные — Проверка (Data — Validation), а в новых нажмите кнопку Проверка данных (Data Validation) на вкладке Данные (Data). В открывшемся окне на вкладке Параметры (Settings) выберите вариант Список (List) и введите в поле Источник (Source) вот такую формулу: =ДВССЫЛ(«Таблица1[Сотрудники]») =INDIRECT(«Таблица1[Сотрудники]») Смысл этой формулы прост. Выражение Таблица1[Сотрудники] — это ссылка на столбец с данными для списка из нашей умной таблицы. Но проблема в том, что Excel почему-то не хочет понимать прямых ссылок в поле Источник (Source), т.е. нельзя написать в поле Источник выражение вида =Таблица1[Сотрудники]. Поэтому мы идем на тактическую хитрость — вводим ссылку как текст (в кавычках) и используем функцию ДВССЫЛ (INDIRECT), которая преобразовывает текстовую ссылку в настоящую, живую. Осталось только нажать на ОК. Если теперь дописать к нашей таблице новые элементы, то они будут автоматически в нее включены, а значит — добавятся к нашему выпадающему списку. С удалением — то же самое. Если вам лень возиться с вводом формулы ДВССЫЛ, то можно чуть упростить процесс. После создания умной таблицы просто выделите мышью диапазон с элементами для выпадающего списка (A2:A5) и введите в поле адреса имя для этого диапазона (без пробелов), например Стажеры, и нажмите на Enter: Фактически, этим мы создаем именованный динамический диапазон, который ссылается на данные из нашей умной таблицы. Теперь имя этого диапазона можно ввести в окне создания выпадающего списка в поле Источник (Source):

Способ 2. Если у вас Excel 2003 или старше

В старых версиях Excel до 2007 года не было замечательных «умных таблиц», поэтому придется их имитировать своими силами. Это можно сделать с помощью именованного диапазона и функции СМЕЩ (OFFSET), которая умеет выдавать ссылку на динамический диапазон заданного размера. Откройте меню Вставка — Имя — Присвоить (Insert — Name — Define) или нажмите Ctrl+F3. В открывшемся окне нажмите кнопку Добавить (New), введите имя диапазона (любое, но без пробелов и начинающееся с буквы, например — Люди) и в поле Ссылка (Reference) введите вот такую формулу: =СМЕЩ(A2;0;0;СЧЁТЗ(A2:A100);1) =OFFSET(A2;0;0;COUNTA(A2:A100);1) Функция СЧЁТЗ (COUNTA) подсчитывает количество непустых ячеек в столбце с фамилиями, т.е. количество строк в диапазоне для выпадающего списка. Функция СМЕЩ (OFFSET) формирует ссылку на диапазон с нужными нам именами и использует следующие аргументы:

• A2 — начальная ячейка
• 0 — сдвиг начальной ячейки по вертикали вниз на заданное количество строк
• 0 — сдвиг начальной ячейки по горизонтали вправо на заданное количество столбцов
• СЧЁТЗ(A2:A100) — размер получаемого на выходе диапазона по вертикали, т.е. столько строк, сколько у нас занятых ячеек в списке
• 1 — размер получаемого на выходе диапазона по горизонтали, т.е. один столбец

Теперь выделите ячейки, где вы хотите создать выпадающие списки, и выберите в старых версиях Excel в меню Данные — Проверка (Data — Validation). В открывшемся окне на вкладке Параметры (Settings) выберите вариант Список (List) и введите в поле Источник (Source) вот такую формулу:

После нажатия на ОК ваш динамический список в выделенных ячейках готов к работе.

Ссылки по теме

• 4 способа создания выпадающих списков в ячейках листа Excel
• Связанные выпадающие списки
• Быстрое создание выпадающих списков с помощью надстройки PLEX

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

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

Связанные понятия

Combo box (рус. Комбинированный список; в некоторых других источниках — Поле со списком) — элемент (виджет) графического интерфейса пользователя. Сочетание выпадающего списка (раскрывающегося при щелчке мыши) и однострочного текстового поля, которое позволяет пользователю ввести значение вручную или выбрать из списка.

Список (англ. List box) — элемент (виджет) графического интерфейса пользователя, который отображает прокручиваемый список с элементами. Позволяет пользователю выбрать один или несколько элементов из списка, как правило с удержанной клавишей Ctrl или Shift, чтобы сделать множественный выбор. Все элементы содержатся в списке статически, но могут быть добавлены и динамически.

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

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

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

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

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

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

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

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

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

Примечание. Направление перехода курсора при вводе данных в ячейку указывается при помощи опции Переход к другой ячейке после нажатия клавиши ВВОД и выпадающего списка Направление, расположенных на странице Дополнительно окна Параметры Excel, которое вызывается одноименной командой из меню кнопки Office.

Связанные понятия (продолжение)

Окно инспектора объектов (англ. Object inspector window) — в вычислительной технике, это окно, которое отображает текущие параметры выделенного (выбранного) объекта, а также позволяет на лету изменять их. Подобные окна используются в файловых менеджерах, которые показывают свойства и параметры файла, к примеру, размер или создание файла.

Курсо́ркурсо́р на gramota.ru (лат. cursor — бегун; англ. cursor — указатель, стрелка прибора) в интерфейсе пользователя — элемент графического интерфейса, который указывает на объект, с которым будет производиться взаимодействие с помощью клавиатуры, мыши или другого устройства управления. Различают текстовый курсор, обозначающий место ввода с клавиатуры; курсор мыши (или указатель мыши) и других указывающих устройств; курсор меню. Кроме указания на объект курсор может также отображать его состояние.

Вёрстка веб-страниц — создание структуры гипертекстового документа на основе HTML разметки, как правило, при использовании таблиц стилей и клиентских сценариев, таким образом, чтобы элементы дизайна выглядели аналогично макету.

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

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

Флажок, флаговая кнопка, чекбокс (от англ. check box), галочка — элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ отключено. Во включённом состоянии внутри чекбокса отображается отметка (галочка (✓), или реже крестик(×)). По традиции флажок имеет квадратную форму. Рядом с флажком отображается его обозначение, обычно — подпись, реже — значок. Для увеличения площади активного элемента обычно одинаково реагирует на.

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

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

Масштабируемый интерфейс пользователя (англ. Zooming User Interface или Zoomable User Interface, сокр. ZUI)) — графический интерфейс пользователя, где рабочее пространство представляет собой большую или неограниченную плоскость, на которой расположены основные элементы, свойства и содержимое которых становятся доступны по мере их «приближения» путём увеличения. Дальнейшее приближение содержимого делает доступным более глубокие уровни.

Надпись или текст, а также метка (англ. label) — элемент пользовательского интерфейса, который отображает текст на форме окна. В некоторых вариантах разрешён текст длиной не более 255 символов.

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

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

И́мя фа́йла — строка символов, однозначно определяющая файл в некотором пространстве имён файловой системы (ФС), обычно называемом каталогом, директорией или папкой. Имена файлов строятся по правилам, принятым в той или иной файловой и операционной системах (ОС). Многие системы позволяют назначать имена как обычным файлам, так и каталогам и специальным объектам (символическим ссылкам, блочным устройствам и т. п.).

Ярлы́к (англ. shortcut) — файл, служащий указателем на объект (например, файл, который требуется определённым образом обработать), программу или команду и содержащий дополнительную информацию.

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

Микроформат (англ. microformat; иногда сокращённо μF или uF) — способ семантической разметки сведений о разнообразных сущностях (событиях, организациях, людях, товарах и так далее) на веб-страницах с использованием стандартных элементов языка HTML (или XHTML). Пользователь-человек может воспринимать страницу с микроформатом как обычную веб-страницу (через браузер), тогда как программы-обработчики способны извлечь из такой страницы структурированную информацию, следуя определённым соглашениям.

Рамка, или фрейм (англ. Frame), а также англ. group box (контейнер групп) — элемент (виджет) графического интерфейса пользователя, который является контейнером для других объектов. Очень схож с окном по своим свойствам, но отличается от него тем, что не может находиться внутри аналогичного контейнера. Разработчики программного обеспечения используют подобные виджеты для группировки компонентов в окне.

Шаблон поиска (англ. wildcard pattern, glob pattern) — метод описания поискового запроса с использованием метасимволов (символов-джокеров).

Ribbon (Лента) или Microsoft Fluent Interface — тип интерфейса в GUI-приложениях, основанный на панелях инструментов, разделенных вкладками. Приложения пакета Microsoft Office начиная с версии 2007, выпущенные компанией Microsoft, применяют эту форму интерфейса, главной частью которой является модульная лента с пиктограммами вместо текстовых пунктов меню.

Тег, те́ги (иногда тэг, англ. tag — именованная метка, читается /tæg/; более правильное название — дескриптор). В SGML (HTML, WML, AmigaGuide, языках семейства XML) — элемент языка разметки гипертекста. Текст, содержащийся между начальным и конечным тегом, отображается и размещается в соответствии со свойствами, указанными в начальном теге.

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

Метатеги (англ. meta tags) — (X)HTML-теги, предназначенные для предоставления структурированных метаданных (дополнительных, сопроводительных) о веб-странице. Как правило, указываются в заголовке (теге ) (X)HTML-документа.

Тема оформления, скин, стиль, «шкурка» в вычислительной технике — пакет данных, предназначенный для настройки внешнего вида графического интерфейса какой-либо компьютерной программы.

Тре́нер, тре́йнер (англ. trainer) — программа, предназначенная для изменения игровых параметров (например, «очков жизни», чтобы сделать игрока «бессмертным»), обычно они работают непосредственно с оперативной памятью компьютера. Наиболее полезен для игр, в которых не предусмотрены чит-коды.

Область уведомлений (англ. notification area) — элемент панели инструментов среды рабочего стола («панель задач» в Windows), используемый для нужд длительно запущенных, но при этом не постоянно используемых программ. Обычно находится в правом нижнем углу (левом нижнем, если порядок чтения — справа налево), но в настраиваемых GUI может помещаться в произвольное место. Имеет также неофициальное название «системный трей» (англ. system tray, от англ. tray — «поднос, поддон»)

Сниппет (англ. snippet — отрывок, фрагмент) — фрагмент исходного текста или кода программы, применяемый в поисковых системах, текстовых редакторах и средах разработки.

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

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

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

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

Радиокно́пка (от англ. radio button), или переключа́тель, — элемент интерфейса, который позволяет пользователю выбрать одну опцию (пункт) из предопределенного набора (группы).

Список с пропусками (англ. Skip List) — вероятностная структура данных, основанная на нескольких параллельных отсортированных связных списках с эффективностью, сравнимой с двоичным деревом (порядка O(log n) среднее время для большинства операций).

Многодокументный интерфейс с вкладками (англ. tabbed document interface) — разновидность графического интерфейса пользователя, в котором каждый документ отображается на отдельной вкладке общего окна.

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

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

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

Панель инструментов (англ. toolbar) — элемент графического интерфейса пользователя, предназначенный для размещения на нём нескольких других элементов.

Переменная среды́ (англ. environment variable) — текстовая переменная операционной системы, хранящая какую-либо информацию — например, данные о настройках системы.

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

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

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

Семейство шрифтов (font family) и другие презентационные атрибуты шрифта могут быть использованы в HTML-коде в каскадных таблицах стилей (CSS) или с помощью устаревшего HTML-элемента font.

Принцип (правило) наименьшего удивления (калька с англ. principle of least astonishment) в эргономике гласит, что если назначение элемента или сочетания неясно, то его поведение должно быть наиболее ожидаемым со стороны пользователя.

Свя́зный спи́сок — базовая динамическая структура данных в информатике, состоящая из узлов, каждый из которых содержит как собственно данные, так и одну или две ссылки («связки») на следующий и/или предыдущий узел списка. Принципиальным преимуществом перед массивом является структурная гибкость: порядок элементов связного списка может не совпадать с порядком расположения элементов данных в памяти компьютера, а порядок обхода списка всегда явно задаётся его внутренними связями.

Страничная память — способ организации виртуальной памяти, при котором единицей отображения виртуальных адресов на физические является регион постоянного размера (т. н. страница). Типичный размер страницы — 4096 байт, для некоторых архитектур — до 128 КБ.