От автора: как можно улучшить с помощью CSS формы? Недавно нам в SiloCreativo посчастливилось прочитать замечательную статью Феликса Ортеги о UX под названием «Прогрессивное раскрытие: Поиск простого в сложном» с отличными реальными примерами, позволяющими лучше понять эту технику прогрессивного раскрытия и как применить ее в нашей работе.
В веб-дизайне мы можем найти много мест, где применение этого метода будет означать улучшение пользовательского опыта, но, возможно, первым из них являются формы, те точки, в которых пользователь непосредственно взаимодействует с приложением.
Мы неоднократно говорили о формах и о том, какие улучшения мы можем применить к ним. Сегодня мы собираемся выполнить некоторые действия прогрессивного раскрытия в форме с той особенностью, что мы будем только применять CSS — никаких JS, библиотек или фреймворков — как мы уже делали с демо-версией индикатора прогресса времени прочтения.
Прогрессивное раскрытие формы с помощью только CSS
Для этой демо-версии мы выбрали очень простую форму с тремя полями ввода (имя, фамилия и адрес электронной почты) и текстовым полем, чтобы пользователи оставляли комментарии. Это может быть контактная форма для любого веб-сайта.
Применение прогрессивного раскрытия в этой демо-версии является чем-то экстремальным, потому что мы показываем только одно поле за раз, его правильное заполнение необходимо для отображения следующего поля.
Псевдоселекторы :valid и :invalid для перехода к следующему шагу
С самого начала все элементы формы будут скрыты, кроме первого (:first-of-type). Заполнив это поле, мы можем использовать два псевдо-селектора, чтобы определить, валиден ли контент (:valid) и можно переходить к следующему полю, или невалиден (:invalid) и нужно предупредить пользователя о том, что введенные данные неверны (не соответствуют шаблону или слишком длинны). Валидация форм является почти полностью совместимой.
Чтобы применить это корректно, нам нужно, чтобы все поля были обязательными, то есть они должны иметь в html атрибут required, иначе все поля будут действительны без заполнения каких-либо данных, и мы не сможем использовать следующий CSS:
#form input:valid + label + input,
#form input:valid + label + textarea,
#form textarea:valid + label + input,
#form textarea:valid + label + textarea { display: block;
}
Индикатор шагов и прогресса с помощью HTML-меток
HTML-метки является важным компонентом. Каждая метка связана с элементом формы, например, с элементом ввода или текстовым полем, указывая определенную информацию относительно него. Хотя благодаря атрибуту placeholder мы можем указать в поле ввода, что должно в нем вводиться (имя, фамилия, адрес электронной почты …), важно, чтобы метка присутствовал для чтения с экрана.
Поэтому, поскольку у нас в распоряжении есть этот элемент, мы собираемся использовать его для создания визуального индикатора прогресса благодаря псевдо-элементам CSS :after и :before. Было бы проще связывать эти псевдо-элементы с полями, но эти HTML-элементы не являются контейнерами, поэтому их невозможно определить.
#form input:focus + label:after,
#form textarea:focus + label:after { content: ""; width: 100%; height: 6px; background: linear-gradient(to right, #d8d8d8 0%,#d8d8d8 24%,transparent 24%,transparent 25%,#d8d8d8 25%,#d8d8d8 49%,transparent 49%,transparent 50%,#d8d8d8 50%, #d8d8d8 74%,transparent 74%,transparent 75%,#d8d8d8 75%,#d8d8d8 100%); display: block; margin: 0 auto;
}
Этот код задает отображение индикатора выполнения, указывая поле, с которым мы работаем, и верны ли или ошибочны данные.
Индикатор выполнения отображается только в поле, которое мы заполняем, поэтому мы используем псевдо-класс :focus для идентификации элемента ввода или текстового поля, с котором мы работаем. Но важно, чтобы пользователь знал, где он находится, и сколько времени нужно для завершения.
Сжатие HTML5 и CSS3 для улучшения UX
Это простой пример того, как мы можем улучшить веб-приложения с помощью имеющихся у нас инструментов (HTML5 и CSS3) и без необходимости создания громоздких плагинов или внешних библиотек, которые увеличивают время загрузки и в конечном итоге играют против пользователя. Мы уже рассматривали другие подобные случаи с примерами функции увеличения изображений на чистом CSS или иконок гамбургера с помощью анимацией CSS.
Сегодняшний пример немного экстремален; четыре поля вполне могут отображаться в одно и то же время, не вызывая у пользователя дискомфорта из-за перегруженности информацией. Но это иллюстрирует, как работать с прогрессивным раскрытием. Надеюсь, это вдохновит вас!
Автор: Ricardo Prieto
Источник: https://www.silocreativo.com/
Редакция: Команда webformyself.
