Хорошо продуманные формы помогают пользователям и повышают коэффициент конверсии. Одно маленькое исправление может иметь большое значение!
Вот пример простой формы оплаты, которая демонстрирует все лучшие практики:
Вот пример простой формы адреса, которая демонстрирует все лучшие практики:
Например, следующий 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 .