Хорошо продуманные формы помогают пользователям и повышают коэффициент конверсии. Одно маленькое исправление может иметь большое значение!
Вот пример простой формы оплаты, которая демонстрирует все лучшие практики:
Вот пример простой формы адреса, которая демонстрирует все лучшие практики:
Например, следующий HTML-код определяет ввод для года рождения между 1900 и 2020. Использование type="number"
ограничивает входные значения только числами в диапазоне, указанном min
и max
. Если вы попытаетесь ввести число за пределами диапазона, вход будет установлен в недопустимое состояние.
В следующем примере используется pattern="[\d ]{10,30}"
для обеспечения допустимого номера платежной карты, при этом допускаются пробелы:
Современные браузеры также выполняют базовую проверку входных данных типа email
или url
.
CSS-сетка
CSS Grid Layout позволяет легко создавать гибкие сетки. Если мы рассмотрим предыдущий пример с плавающим размещением, то вместо того, чтобы создавать столбцы с процентами, мы могли бы использовать макет сетки и единицу fr
, которая представляет часть доступного пространства в контейнере.
.container { display: grid; grid-template-columns: 1fr 3fr; }
Сетку также можно использовать для создания обычных макетов сетки, вмещающих столько элементов, сколько поместится. Количество доступных треков будет уменьшаться по мере уменьшения размера экрана. В приведенной ниже демонстрации у нас есть столько карточек, сколько поместится в каждой строке, с минимальным размером 200px
.
Узнайте больше о CSS Grid Layout.
Многоколоночный макет
Для некоторых типов макета вы можете использовать макет с несколькими столбцами (Multicol), который позволяет создавать гибкое количество столбцов с помощью свойства column-width
. В приведенной ниже демонстрации вы можете видеть, что столбцы добавляются, если есть место для еще одного столбца 200px
.