Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

RedDeveloper
18.04.2022 13:17
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно использовать выбранный нами фреймворк, и он становится основным подходом к каждому новому продукту. Однако существует и другой подход к разработке. Вы начинаете со старого доброго HTML/CSS и создаете полностью функциональный инструмент. Затем вы добавляете новые возможности с помощью JavaScript. Это называется прогрессивным совершенствованием.

Прогрессивное улучшение гарантирует, что ваш сайт будет работать в максимальном количестве браузеров и конфигураций. HTML и CSS прошли долгий путь с 90-х годов. Даже без JavaScript вы можете обеспечить большую визуальную привлекательность и функциональность.

Форма

Недавно я написал статью о проверке форм с помощью Quasar Framework и Vue.js. Я хотел вернуться к этой форме и показать, как много из этой формы можно воссоздать, используя только HTML и CSS.

Если вас интересует только конечный результат, вы можете перейти к нижней части статьи чтобы увидеть завершенную разметку и стилизацию.

HTML

Открыть Github Gist

Если вы не знакомы с тегами section, header и footer, то это новые семантические элементы. На странице может быть много тегов заголовков и колонтитулов, если они относятся к собственному тегу section.

Вы заметите, что теги label идут после тегов input. Это сделано для того, чтобы мы могли использовать селектор + в CSS для изменения их стиля в зависимости от различных состояний ввода.

SCSS

Открыть Github Gist

Вы заметите, что мы используем rem для изменения размеров. Сделав базовый размер шрифта 8px, вы можете изменять размер шрифта с коэффициентом 8 (1: 0.125rem, 2: 0.25rem... 16: 2rem и т.д.). Это делает все связанным с размером шрифта и сохраняет пропорциональность при изменении размера шрифта пользователем для удобства чтения.

Мы также используем фоновое изображение для рисования границы. Таким образом, граница не вычисляется как часть размера ввода и станет важной, когда мы перейдем к шагу анимации.

Примечание: Я использую SCSS. Вам нужно будет предварительно обработать его, используя что-то вроде node-sass в файл CSS под названием material.css, прежде чем использовать его.

Теперь у нас есть форма, которая выглядит следующим образом...

Не вся форма может быть создана без JavaScript. Но мы должны быть в состоянии получить следующее:

  • Ярлыки label, которые анимируются над полем при фокусе
  • Нижняя граница ввода, которая анимируется при фокусе
  • Валидация, которая предотвращает отправку формы для полей require, email, телефон и критериев пароля.
  • Базовый эффект пульсации при нажатии кнопок.

Анимация label

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

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

label {
...
transition: all ease 300ms}

Затем мы захотим изменить свойства label, чтобы переместить ее вверх с новым цветом, когда у ввода будет фокус. Внутри нашего стиля form.material .field input мы добавим.

&:not(:placeholder-shown) + label
,&:focus + label {
color: $primary;
font-size: 1.5rem;
top: 0;
}

В каждый из тегов input нужно добавить пустой атрибут placeholder, чтобы сработал селектор :not(:placeholder-shown).

<input type="name" name="name" id="name" placeholder=" "/>

Теперь у нас должно получиться что-то похожее на это.

Анимация границы поля ввода

Когда пользователь фокусируется на поле ввода, мы хотим, чтобы линия в нижней части поля анимировалась в соответствии с основным цветом. Мы также хотим, чтобы линия оставалась немного темнее, если поле ввода после потери фокуса.

Для этого мы добавим несколько фоновых изображений и анимируем их независимо друг от друга.

input {
background-image:
linear-gradient(
to bottom,
transparent calc(100% - 0.25rem),
$primary 0.25rem
),
linear-gradient(
to bottom,
transparent calc(100% - 0.125rem),
#ccc 0.125rem
);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 0, 100%;
...
transition: all ease 300ms;
  &:focus {
background-size: 100%, 100%;
}
  &:not(:placeholder-shown) {
background-image:
linear-gradient(
to bottom,
transparent calc(100% - 0.25rem),
$primary 0.25rem
),
linear-gradient(
to bottom,
transparent calc(100% - 0.125rem),
#999 0.125rem
);
}
...
}

Эта стилизация добавляет второй фон синей линии, который накладывается поверх светло-серой линии. Это изображение скрыто благодаря тому, что его размер установлен на 0%. Когда вход получает фокус, размер фона изменяется на 100%, а переход обрабатывает анимацию.

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

Валидация формы

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

<input type="name" ... required/>.

Давайте сделаем еще один шаг вперед, добавив новый цвет $negative и добавив красный символ * после каждой метки для обязательного ввода.

$negative: tomato;
...
input {
...
  &:required + label::after {
color: $negative;
content: ' *';
}
  ...
}

О проверке электронной почты автоматически позаботится ее тип.

Для проверки номера телефона и пароля мы будем использовать атрибут pattern и regex.

<input 
type="tel "

pattern="[(][0-9]{3}[)] [0-9]{3} [-] [0-9]{4}"..
./>
<input
type="password "

pattern="^(?=.{12,})(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*\-_+=]).*$"...
/>

Пульсация кнопки

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

button.material {
..
.
background-image:
radial-gradient(circle at center, #0003 50%, transparent 50%);
background-repeat: no-repeat;
background-position: center center center;
background-size: 0;
...
  &:focus {
background-size: 225%;
}
  &.flat {
background-color: transparent;
box-shadow: none;
    &:focus,
&:hover {
background-color: #eee;
}
}
  &.primary {
...

background-image:
radial-gradient(circle at center, #fff3 50%, transparent 50%);
...
    &:focus,
&:
hover {
box-shadow: 0 0.125rem 0.325rem 0.125rem #0009;
}
}}

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

Результат

Теперь у нас должна быть форма, которая выглядит и функционирует примерно так.

Наш HTML должен выглядеть примерно так.

Открыть Github Gist

А наш CSS должен выглядеть примерно так.

Открыть Github Gist

Заключение

Даже без JavaScript мы смогли создать форму, которая следует многим рекомендациям Material, гарантирует, что все необходимые поля были заполнены, а правильные данные были введены перед отправкой.

Стандартные HTML и CSS оказываются мощными сами по себе, и ими не стоит пренебрегать даже при использовании фреймворков для веб-приложений.

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly

16.05.2022 21:25

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

Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React

13.04.2022 15:26

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

В чем разница между Promise и Observable?
В чем разница между Promise и Observable?

11.04.2022 20:00

Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.

Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса

08.04.2022 19:39

Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.

Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS

08.04.2022 16:00

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

Анализ настроения постов в Twitter с помощью Python, Tweepy и Flair
Анализ настроения постов в Twitter с помощью Python, Tweepy и Flair

06.04.2022 20:06

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