Заработок на разработке сайтов, фриланс, своя страничка в интернете, заработать в Интернете на написании сайтов, веб мастер, вебмастер, веб программист, вебпрограммист.
Заработок в Интернет. Удаленная работа на дому. Все о надомной работе.
Как сделать выпадающий текст в html: Выпадающий список HTML: учимся создавать и задавать стили с помощью CSS
Выпадающий текст — плагин WordPress Collapse-O-Matic
Сегодня рассмотрим как сделать выпадающий текст в вашей записи или странице WordPress. Для этой цели лучше всего подойдет плагин Collapse-O-Matic. Он очень простой, легкий и имеет только одну функцию — прячет под кат скрытый текст. Устанавливается плагин стандартным способом из админки WordPress или можете скачать плагин выпадающего текста на официальной странице плагина. Плагин имеет более 70 000 загрузок, то есть довольно востребован.
Содержание статьи
Для чего нужен выпадающий текст?
Во-первых, таким образом вы можете сэкономить место на странице, чтобы она была более компактной и более удобной к восприятию пользователями. Во-вторых вы сможете выделить основные разделы или информацию, а дополнительную информацию убрать под кат. При необходимости посетитель страницы кликнет по ссылке и появиться выпадающий текст. Примерно вот так:
**************************
Показать раскрывающийся текст.
Этот выпадающий скрытый текст создан с помощью простого плагина Collapse-O-Matic. В скрытом контенте можно размещать не только простой текст, но и изображения, ссылки, списки, да и все, что душе угодно.
**************************
Как реализовать выпадающий текст плагином Collapse-O-Matic
Реализовать раскрывающийся текст очень просто. Необходимо заключить скрытый текст в специальный шорткод, вот так:
Справа от вашего открытого текста стоит стрелка вниз. Если пользователь кликнет по не или по тексту, появляется раскрывается скрытый текст. Если кликнуть повторно, выпадающий текст снова скроется под кат.
У нас в примере у шорткода установлен один параметр «title», который содержит текст ссылки, т.е. открытого текста, при клике на которую будет открываться скрытый текст. Однако у плагина намного больше возможностей. Плагин имет много разных дополнительных опций по настройке функционала и внешнего вида. С помощью этих параметров можно изменять рамку блока, задавать стиль оформления элементов, показывать или не показывать стрелку перед открытым текстом и другое.
Прочитать обо всех параметрах можно в документации плагина. Но некоторые из опций уже присутствуют в настройках плагина в адм. панели WordPress.
Настройки плагина Collapse-O-Matic
В настройках плагина можно установить:
Style — светлый или темный фон, если выбрать «none»- можно установить свой цвет; Tag Attribute — тег для оборачивания открытого текста, по умолчанию — «span»; Trigclass Attribute — возможность установить класс CSS для открытого текста; Targtag — тег для оборачивания контейнера с выпадающим текстом Targclass Attribute — прописать класс для блока выпадающего текста; Collapse/Expand Duration — скорость, с которой появляется выпадающий текст; Animation Effect — анимационный эффект появления скрытого текста;
No Title — не показывать ссылку (открытый текст), будет только стрелка Initial Pause — установить паузу перед открытием выпадающего текста в миллисекундах Custom Style — прописать собственные CSS стили Ну и еще пара-тройка опций. В общем настроек не так много, но вполне достаточно, чтобы красиво оформить блок с раскрывающимся текстом. Если необходимо больше возможностей — обратитесь к документации на странице плагина.
Видео по установке и настройке плагина:
Конечно есть множество других плагинов выпадающего текста, плагинов — спойлеров и тому подобное. Можно реализовать данную функцию и без плагина. Но лично мое мнение, что плагин Collapse-O-Matic — самый простой и удобный для этой цели, особенно для начинающих пользователей WordPress.
Читайте материал еще об одном очень полезном плагине Table of Contents Plus для вставки содержания статьи.
Надеюсь, что статья была для Вас полезной. Удачи!
Учебник HTML 5. Статья «Раскрывающийся список и текстовая область»
В этой статье мы с Вами рассмотрим элементы, которые позволяют создавать раскрывающиеся списки, научимся формировать группы в этих списках, рассмотрим как отключать пункты и даже группы списков, познакомимся с элементом, который позволяет создать многострочное текстовое поле, его в дальнейшем вы можете использовать внутри HTML форм (элемент <form>).
Раскрывающийся список
Тег <select> представляет собой элемент управления, который позволяет создать раскрывающийся список.
Тег <option> определяет пункты раскрывающегося списка (параметры для выбора), он применяется как вложенный элемент тега <select>.
Первый пункт в списке, как правило, отображается как выбранный, но вы можете добавить к этому элементу атрибут selected, чтобы задать предопределенный вариант.
Давайте рассмотрим пример использования:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования элемента <select></title>
</head>
<body>
<select name = "blacklist">
<option value = "2PAC">Tupac Amaru Shakur</option>
<option value = "50cent">Curtis Jackson</option>
<option value = "Snoop Dogg" selected>Calvin Cordozar Broadus, Jr.</option>
</select>
</body>
</html>
В этом примере мы тегом <select> создали раскрывающийся список, внутри него мы поместили три элемента <option>, которые определяют его пункты.
Атрибутом selected указали, что третий пункт предопределен (будет выбран по умолчанию вместо первого).
Обращаю Ваше внимание на то, что необходимо использовать атрибут value (значение) тега <option>, чтобы указать какое значение отправляется на сервер для дальнейшей обработки.
В браузере это выглядит следующим образом:
Рис 38 HTML раскрывающийся список.
Отключение пункта меню
С помощью логического атрибута disabled (HTML тега <option>) допускается отключать определенный пункт меню (параметр). Атрибут может использоваться совместно со скриптами, например, пока какое-то условие не выполнено параметр неактивен.
<!DOCTYPE html>
<html>
<head>
<title>Пример использования HTML тега <option> в раскрывающемся списке</title>
</head>
<body>
<select>
<option value = "A">Option A</option>
<option value = "B">Option B</option>
<option value = "C" disabled>Option C</option>
</select>
</body>
</html>
В браузере это выглядит следующим образом:
Рис. 38а Пример использования атрибута disabled HTML тега <option> (отключение параметра).
Группировка пунктов меню
Давайте рассмотрим следующий тег <optgroup>, который используется для группировки связанных данных в раскрывающемся списке <select> и предназначен для более удобного представления информации пользователям.
Пример использования:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования HTML тега <optgroup></title>
</head>
<body>
<select name = "black&white">
<optgroup label = "Blacklist"> <!--Группа №1 -->
<option value = "2PAC"> Tupac Amaru Shakur </option>
<option value = "50cent"> Curtis Jackson </option>
<option value = "Snoop Dogg" selected > Calvin Cordozar Broadus, Jr. </option>
</optgroup>
<optgroup label = "Whitelist"> <!--Группа №2 -->
<option value = "Eminem">Marshall Bruce Mathers III</option>
</optgroup>
</select>
</body>
</html>
В данном примере мы выделили 2 группы тегом <optgroup>. Атрибут label элемента задает наименование выделенной группы, выполненное полужирным начертанием:
Рис. 39 Группировка данных в раскрывающемся списке HTML.
В следующем примере с использованием логического атрибута disabled мы отключим одну группу («Group B«):
39а Отключение группы (пример использования атрибута disabled HTML тега <optgroup>).
Отключение списка и мультивыбор
Далее мы с Вами рассмотрим пример в котором отключим целый список и составим список, в котором допускается выбрать несколько значений сразу:
<!DOCTYPE html>
<html>
<head>
<title>Атрибуты disabled и multiple тега <select></title>
</head>
<body>
<select name = "firstlist" disabled> <!-- список отключен -->
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select>
<select name = "secondlist" multiple> <!-- список с возможностью выбора нескольких значений -->
<option value = "A">A</option>
<option value = "B">B</option>
<option value = "C">C</option>
<option value = "D">D</option>
</select>
</body>
</html>
В этом примере мы создали два раскрывающихся списка. Для первого списка мы использовали атрибут disabled, который не дает взаймодействовать со списком (отключает его).
Для второго списка мы использовали атрибут multiple, который указывает, что допускается выбрать в списке несколько вариантов сразу (через Ctrl в Windows и через Command в Mac).
В браузере это выглядит следующим образом:
Рис. 39б Пример использования атрибутов disabled и multiple тега <select>.
Текстовая область
Тег <textarea> представляет собой поле формы для создания области многострочного ввода (текстовая область). Основное отличие от тега <input> (пользовательское поле для ввода информации) заключается в том, что допускаются переносы строк (они сохраняются при отправке данных на сервер).
Текстовая область может содержать неограниченное количество символов, как правило, текст внутри нее отображается браузерами моноширинным шрифтом Courier (курьер).
Давайте рассмотрим пример использования:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования тега <textarea></title>
</head>
<body>
<form>
<textarea name = "auth_msg" rows = "10" cols = "45">Здесь Вы можете написать информацию для автора…</textarea><br>
<input type = "submit" name = "submitInfo" value = "отправить">
</form>
</body>
</html>
В данном примере мы создали текстовую область (HTML тег <textarea>), атрибутом name присвоили ей имя (name = «auth_msg»), атрибутом rows задали высоту строк равной десяти символам (rows = «10»), и атрибутом cols указали ширину поля равной 45 символов (cols = «45»).
Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки «отправка формы»: type = «submit»).
Результат нашего примера:
Рис. 40 Текстовая область в HTML.
Размеры текстовой области
Если атрибуты cols или rows указаны, то их значение должно быть положительным целым числом. Значение атрибута cols (ширина) по умолчанию 20 символов, а rows (высота) 2 символа .
Обращаю Ваше внимание, что вы можете задавать значение ширины и высоты текстовой области не только в символах, но и с использованием CSS свойств width (ширина) и height (высота), в этом случае браузер будет игнорировать значение атрибутов cols и rows если они указаны.
Давайте рассмотрим пример:
<!DOCTYPE html>
<html>
<head>
<title>Использование атрибута cols HTML тега <textarea></title>
</head>
<body>
<form>
<textarea cols = "10">Текстовое поле шириной 10 символов. </textarea>
<textarea cols = "10" style = "width:200px">Текстовое поле шириной 10 символов и 200 пикселей.</textarea><br>
<input type = "submit" cols = "submitInfo" value = "отправить">
</form>
</body>
</html>
В этом примере мы создали две текстовые области (элемент <textarea>), для первой и второй области атрибутом cols мы задали видимую ширину текстовой области 10 символов. Для второй текстовой области мы задали ширину элемента 200 пикселей с использованием встроенного CSS (свойство width). Как вы можете заметить, при этом браузер начинает игнорировать значение атрибута cols.
Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки «отправка формы»: type = «submit»).
Результат нашего примера:
Рис. 40а Использование атрибута cols HTML тега <textarea> (ширина элемента в символах и пикселях).
Отключение текстовой области
По аналогии с ранее рассмотренными элементами тег <textarea> имеет логический атрибут disabled, который указывает, что текстовая область должна быть отключена (недоступна для взаимодействия с пользователем). Атрибут может использоваться совместно со скриптами, например, пока какое-то условие не выполнено элемент неактивен.
Рассмотрим пример использования:
<!DOCTYPE html>
<html>
<head>
<title>Атрибуты disabled и name тега <textarea></title>
</head>
<body>
<form>
<textarea name = "userInfo">Текстовое поле доступно к заполнению.</textarea>
<textarea name = "staticInfo" disabled>Текстовое поле не доступно к заполнению.</textarea><br>
<input type = "submit" name = "submitInfo" value = "отправить">
</form>
</body>
</html>
В этом примере мы создали две текстовые области (элемент <textarea>), для первой и второй области атрибутом name мы задали уникальные имена. Для второй текстовой области атрибутом disabled мы указали, что она будет отключена при загрузке страницы.
Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки «отправка формы»: type = «submit»).
Результат нашего примера:
Рис. 40б Пример использования атрибутов disabled и name тега <textarea>.
Подсказка для текстовой области
И так мы с Вами рассмотрим заключительный пример и перейдем к практическому заданию статьи этого учебника.
Благодаря атрибуту placeholder (HTML тега <textarea>) допускается указывать текст подсказки, которая описывает ожидаемое значение для ввода пользователем в элемент.
Текст подсказки скрывается, когда пользователь вводит значение (любой символ) в текстовое поле, если его убрать, то подсказка будет отображена снова.
Рассмотрим пример использования:
<!DOCTYPE html>
<html>
<head>
<title>Атрибуты placeholder и readonly тега <textarea></title>
</head>
<body>
<form>
<textarea placeholder = "Введите информацию в текстовое поле"></textarea>
<textarea placeholder = "Поле доступно только для чтения" readonly></textarea><br>
<input type = "submit" name = "submitInfo" value = "отправить">
</form>
</body>
</html>
В этом примере мы создали две текстовые области (элемент <textarea>), для первой и второй области атрибутом placeholder мы задали подсказку для пользователя, которая отображается бледным цветом текста внутри элемента. Для второй текстовой области атрибутом readonly мы указали, что оно будет доступно только для чтения (содержимое не может быть изменено).
Обратите внимание на то, что если текстовое поле доступно только для чтения, то при этом содержимое не может быть изменено, но пользователь при этом может перейти к содержимому, выделить и скопировать его.
Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки «отправка формы»: type = «submit»).
Результат нашего примера:
Пример использования атрибутов placeholder и readonly тега <textarea>.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Используя полученные знания составьте следующую форму размещения вакансии:
Практическое задание № 23.
Прежде чем преступить к выполнению задания откройте пример в новом окне и внимательно рассмотрите форму, чтобы повторить все её моменты. Для выполнения задания Вам потребуются знания из статьи «HTML формы». Если вы пропустили её, то вернитесь для её изучения.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.
Все что нужно знать о раскрывающихся списках (dropdown) — UXPUB
Раскрывающиеся списки (выпадающие списки / меню) получили большую популярность в мире интерфейсов – и, если честно, не без причины. Если они сделаны плохо, они становятся громоздкими, ошеломляющими и безобразными. Но в этой статье мы поговорим о том, что делать, когда вы вынуждены их использовать.
Я также хочу уточнить, что есть два основных типа раскрывающихся списков: те, которые используются для навигации, и те, которые используются в формах. В этой статье мы рассмотрим только второй тип, используемый в формах.
1. Анатомия
Анатомия раскрывающегося списка очень похожа на анатомию поля ввода текста. Чтобы сравнить их, прочтите предыдущую статью.
Анатомия раскрывающегося списка формы
2. Типы и варианты раскрывающихся списков
Хотя стандартные выпадающие списки широко известны, есть несколько различных типов и вариантов, которые вам, возможно, придется рассмотреть для вашего следующего проекта. Обратите внимание, что в эти примеры я включил только раскрывающиеся списки, используемые в формах, а не те, которые используются в навигации.
Стандартный раскрывающийся список
Стандартный раскрывающийся список – это то, о чем мы думаем, когда слышим словосочетание «раскрывающийся список» или «выпадающий список». В активном состоянии он должен быть внешне похож на поле ввода текста, пока вы не нажмете на него и не откроете меню.
Стандартный раскрывающийся список
Раскрывающийся список с автодополнением (autosuggest)
Я их люблю. Впервые я узнал об автодополнении в поле поиска Google, однако, я понятия не имею, где оно было впервые реализовано. (Пишите в комментариях, если знаете). Это особенно полезно, когда у вас есть длинные списки, а пользователь уже знает ответ (например, страну проживания).
Раскрывающийся список с автодополнением
Раскрывающийся список с автодополнением и автозаполнением (autocomplete)
Автодополнение не следует путать с автозаполнением (autocomplete). Автодополнение– это, когда в поле ввода отображаются варианты, из которых пользователь может выбирать. Автозаполнение – это, когда форма предлагает способ завершения слова или фразы.
Раскрывающийся список с автодополнением и автозаполнением
Иногда поля с автозаполнением замаскированы под поле ввода текста, пока вы не начнете печатать.
Раскрывающийся список со множественным выбором
Хотя большинство раскрывающихся списков являются расширением переключателей (вы можете выбрать только один элемент), этот раскрывающийся список является расширением флажков: пользователь может выбрать несколько элементов в одном поле ввода.
Раскрывающийся список со множественным выбором
Если возможно, постарайся избегать этого типа списков. Мне пришлось использовать его из-за безумно длинного перечня категорий, и я все еще просыпаюсь ночью в холодном поту из-за этого решения. В идеале, хотелось бы использовать автодополнение с автозаполнением.
Раскрывающийся список с группами
Хотя длинные выпадающие списки не идеальны, вы можете сгруппировать некоторые элементы по разным категориям, чтобы упростить поиск нужного варианта.
Раскрывающийся список с группами
Меню с множественным выбором
Хотя технически это не раскрывающийся список, меню с множественным выбором является альтернативой. В отличие от раскрывающегося списка, оно открыто с самого начала и представляет собой небольшое окно прокрутки.
Фиксированное прокручиваемое меню
Хотя они хороши для настольных компьютеров, они ужасны для мобильных устройств, поскольку являются «прокруткой внутри прокрутки».
Лично я использовал этот паттерн всего раз (должен сказать, что меня заставили), и я редко встречаю его. Если у вас есть дополнительная информация о нем, пожалуйста, пишите в комментариях 🙂
Выборщик дат (Date picker)
Выборщик даты следует использовать только для планирования собраний, событий и т. д. Наличие календаря с указанием дней недели прекрасно помогает вам решить, когда организовать бранч, но невероятно раздражает, если вы хотите ввести дату окончания срока действия паспорта. Мне нравятся формы, в которых вы можете печатать, а также выбирать дату из выпадающего списка – просто убедитесь, что ввод достаточно умный, чтобы добавить «/» между месяцами, днями и годами, в противном случае это немного запутывает.
Выборщик дат
Рекомендации Тесс, как заставить людей ненавидеть тебя:
Когда вы просите людей указать день, когда истекает срок действия карты или паспорта, используйте выпадающее меню календаря. Ведь им важно точно знать, в какой день недели истекает срок действия их карты.
При запросе пользователей ввести дату рождения, используйте выпадающий календарь. Бонус: убедитесь, что нажатие на каждый месяц –единственный способ, которым пользователи могут перемещаться по годам. Еще бонус: этот паттерн дизайна особенно полезен в онлайн-формах для домов престарелых.
Выборщики дат и диапазоны дат – это сложные звери, поэтому я не стал вдаваться в подробности, но, возможно, однажды я напишу про них отдельную статью. Возможно.
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.
Альтернатива выпадающего списка: если варианты числовые
Второй использует ползунок (слайдер), чтобы выбрать значение. Слайдеры особенно полезны для больших чисел или приблизительных значений.
Альтернатива выпадающего списка: если варианты числовые
Альтернатива выпадающего списка: если варианты имеют диапазон
Если вариантов много
Если в раскрывающемся списке много вариантов (которых по возможности следует избегать), позвольте пользователю «искать» нужный вариант. Чаще всего это можно увидеть в выпадающих списках стран, поскольку они длинные, но на них легко ответить. Как упоминалось ранее, это лучше всего работает в паре с автозаполнением.
Альтернатива выпадающего списка: если вариантов много, НО пользователь знает ответ, прежде чем кликнуть по раскрывающемуся списку
Итак, когда вы должны использовать раскрывающийся список?
Данные ввода должны соответствовать двум требованиям, чтобы рассмотреть возможность использования раскрывающегося списка:
Есть более шести вариантов.
Когда варианты не являются чем-то, что пользователь сразу узнает. Например, представьте, что ваш пользователь загружает видео, а хост должен знать, какую лицензию прикрепить к видео. Среднестатистический пользователь не будет знать все варианты, доступные на платформе, поэтому потребуется раскрывающийся список.
7. Нативные раскрывающиеся списки
Мы склонны использовать нативные или стандартные варианты, когда время и бюджет ограничены или, когда мы работаем над MVP. Наличие кастомных полей ввода – это глазурь на торте, но иногда у нас нет возможности сделать эту сладкую глазурь. В этом случае полезно знать, с чем вам придется работать.
Кроме того, нативные раскрывающиеся списки более безопасны, когда дело доходит до юзабилити на разных устройствах.
Наши широкомасштабные тесты юзабилити и сравнительный анализ показывают, что в то время как 82% сайтов электронной коммерции используют в процессе оформления заказа кастомные раскрывающиеся списки, 31% из них имеют значительные проблемы юзабилити. – Кристиан Хольст
Статью можно прочитать здесь
По умолчанию
Вот несколько примеров нативных раскрывающихся списков. Чтобы попробовать их, перейдите по ссылке: https://html.com/attributes/option-selected/
Как вы можете видеть в этих примерах, все они немного различаются в зависимости от платформы и браузера. Они не красивые, но очень удобны в использовании.
Использование оболочки
Раньше я называл подобные раскрывающиеся списки «полу-кастомными», но недавно нашел статью, в которой этот паттерн называется оболочкой (shell) – это звучит куда формальнее. Поэтому впредь я буду называть это оболочкой, и буду использовать этот термин на совещаниях. Я буду наслаждаться, когда люди будут спрашивать меня, что это значит, просто чтобы я мог показать, насколько я умен.
«НО, что такое оболочка?», спросите вы. Оболочка – это когда поле выглядит нестандартно, но, когда вы кликаете по нему, оно использует нативный стиль раскрывающегося списка. Это простой способ сохранить стиль страницы в соответствии с вашим брендом и снизить стоимость разработки. Это также помогает решить проблемы UX, которые могут возникнуть с кастомными полями ввода.
Оболочка раскрывающегося списка
8. Проверка доступности?
Активное состояние раскрывающегося списка (включая метку) превышает 44px? (Мы учитываем метку, потому что, если вы кликните по метке, раскрывающийся список все равно должен открыться).
Все варианты в раскрывающемся списке имеют высоту более 44px с расстоянием 8px между ними?
Соответствуют ли цвета стандартам доступности AAA?
У вашего раскрывающегося списка есть выделенное состояние?
Убедитесь, что выпадающие списки работают с tabbing map.
Если вы используете кастомный раскрывающийся список, убедитесь, что он может открываться вверх или вниз в том случае, если область просмотра браузера находится слишком низко.
И, если вы сомневаетесь, посетите https://webaim.org/techniques/forms/controls
Как знают мои постоянные читатели, прошло много времени с тех пор, как я написал предыдущую статью, и я сожалею, что это заняло так много времени. Знаете, нет ничего лучше, чем глобальная пандемия, которая заставит вас вернуться к написанию статей.
Многие ненавидят раскрывающиеся списки– и это правильно. Но иногда существует несколько возможных альтернатив, и, если это так, вы должны улучшить раскрывающиеся списки.
Спасибо Lesedi Hermans.
Выпадающий список. Справка
Тип поля: select — выпадающий список.
да
нет
Атрибут для поля выходных данных. Содержит имя поля выходных данных.
да
нет
Название выпадающего списка в интерфейсе.
нет
нет
Ширина поля. Указывается в следующих единицах:
Пиксели. Например: width="100px".
Доля от размера родительского элемента. Например: width="100%".
Можно также задать ширину формулой. Например: width="calc(100%-30px)".
нет
зависит от длины подписи
Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.
Допустимые значения:
Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).
Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).
Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).
Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).
Не показывать сообщение ("false").
нет
Размер поля.
Допустимые значения: "S", "M", "L".
нет
CSS-класс для поля. Например: class="annotation".
нет
".field" ".field_type_select"
Возможность редактирования:
disabled=true — поле закрыто для редактирования.
disabled=false — поле открыто для редактирования.
нет
Направление, в котором раскрывается список:
mode="dropdown" — вниз.
mode="dropup" — вверх.
нет
Текст, который записывается в файл с выходными данными при выборе данного элемента.
нет
нет
Название элемента списка.
нет
нет
Элемент списка, который выбран по умолчанию:
selected=true — сделать элемент списка выбранным по умолчанию.
selected=false — оставить элемент списка невыбранным по умолчанию.
нет
Как сделать раскрывающийся текст?
Размещение скрытых блоков текста улучшает визуальное восприятие страницы веб-сайта — она загружается в браузер именно в том виде, который разработал дизайнер, независимо от размещенного объема информации. Кроме того, это удобнее посетителю — в поисках нужного блока информации ему не приходится просматривать весь массив, а только лишь небольшие «верхушки айсбергов». Создать сайт самостоятельно с Wix.com
Вам понадобится
Базовые знания языков HTML и JavaScript.
Инструкция
Используйте пользовательскую функцию на языке JavaScript, чтобы организовать в HTML-странице сокрытие и отображение нужных блоков текста. Общая для всех блоков функция намного удобнее, чем добавление кода к каждому из них по отдельности. В заголовочную часть исходного кода страницы поместите открывающий и закрывающий теги script, а между ними создайте пустую пока функцию с названием, например, swap и одним обязательным входным параметром id:function swap(id) {}
Добавьте две строки JavaScript-кода в тело функции — между фигурными скобками. Первая строка должна считывать текущее состояние блока текста — включена его видимость или выключена. Таких блоков в документе может быть несколько, поэтому каждый должен иметь собственный идентификатор — именно его функция получает в качестве единственного входного параметра id. По этому идентификатору она и разыскивает в документе нужный блок, присваивая значение видимости/невидимости (состояние свойства display) переменной sDisplay:sDisplay = document.getElementById(id).style.display;
Вторая строка должна менять свойство display нужного блока текста на противоположное — скрывать, если текст видим, и отображать, если скрыт. Это можно делать таким кодом:document.getElementById(id).style.display = sDisplay == ‘none’ ? » : ‘none’;
Поместите в заголовочную часть еще и такое описание стилей:a {cursor: pointer}Оно понадобится для правильного отображения указателя мыши при наведении курсора на неполный тег ссылки. С помощью таких ссылок вы организуете в странице переключение видимости/невидимости текстовых блоков.
Разместите в тексте эти ссылки-переключатели перед каждым скрытым блоком, а в блоки — в конце текста — добавьте аналогичную ссылку. Невидимый текст заключите в теги span, у которых в атрибутах style задана невидимость. Например:Раскройте текст +++ Это скрытый текст —В этом образце щелчок по ссылке из трех плюсов будет вызывать описанную выше функцию по событию onClick, передавая ей идентификатор блока, который нужно сделать видимым. А внутрь блока помещена ссылка из трех минусов с такими же функциями — щелчок по ней будет скрывать текст.
Создайте нужное количество текстовых блоков, аналогичных описанному в предыдущем шаге, не забывая при этом менять идентификаторы в атрибуте id тега span и в переменной, передаваемой функции по событию onClick в двух ссылках.
Оцените статью!
HTML выберите тег | Синтаксис тега, примеры, атрибуты
HTML тег
Тег
По умолчанию выбран первый вариант из списка. Чтобы изменить предопределенный параметр, используется выбранный атрибут.
Тег
Внешний вид списка зависит от атрибута размера, который определяет высоту списка. Ширина списка зависит от длины текста внутри
Тег
Если вам нужно отправить данные на сервер или обратиться к списку со скриптами, тег следует поместить внутри тега
Попробуйте сами »Результат