Прогрессивное раскрытие формы с помощью CSS

Прогрессивное раскрытие формы с помощью CSS

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

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

Мы неоднократно говорили о формах и о том, какие улучшения мы можем применить к ним. Сегодня мы собираемся выполнить некоторые действия прогрессивного раскрытия в форме с той особенностью, что мы будем только применять CSS — никаких JS, библиотек или фреймворков — как мы уже делали с демо-версией индикатора прогресса времени прочтения.

Прогрессивное раскрытие формы с помощью только CSS

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

Псевдоселекторы :valid и :invalid для перехода к следующему шагу

С самого начала все элементы формы будут скрыты, кроме первого (:first-of-type). Заполнив это поле, мы можем использовать два псевдо-селектора, чтобы определить, валиден ли контент (:valid) и можно переходить к следующему полю, или невалиден (:invalid) и нужно предупредить пользователя о том, что введенные данные неверны (не соответствуют шаблону или слишком длинны). Валидация форм является почти полностью совместимой.

Чтобы применить это корректно, нам нужно, чтобы все поля были обязательными, то есть они должны иметь в html атрибут required, иначе все поля будут действительны без заполнения каких-либо данных, и мы не сможем использовать следующий CSS:

Индикатор шагов и прогресса с помощью HTML-меток

HTML-метки является важным компонентом. Каждая метка связана с элементом формы, например, с элементом ввода или текстовым полем, указывая определенную информацию относительно него. Хотя благодаря атрибуту placeholder мы можем указать в поле ввода, что должно в нем вводиться (имя, фамилия, адрес электронной почты …), важно, чтобы метка присутствовал для чтения с экрана.

Поэтому, поскольку у нас в распоряжении есть этот элемент, мы собираемся использовать его для создания визуального индикатора прогресса благодаря псевдо-элементам CSS :after и :before. Было бы проще связывать эти псевдо-элементы с полями, но эти HTML-элементы не являются контейнерами, поэтому их невозможно определить.

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

Индикатор выполнения отображается только в поле, которое мы заполняем, поэтому мы используем псевдо-класс :focus для идентификации элемента ввода или текстового поля, с котором мы работаем. Но важно, чтобы пользователь знал, где он находится, и сколько времени нужно для завершения.

Сжатие HTML5 и CSS3 для улучшения UX

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

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

Автор: Ricardo Prieto

Источник: https://www.silocreativo.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree