Стилизация и валидация 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: ' *';
}
  ...
}
Давайте сделаем еще один шаг вперед добавив новый цвет $negative и добавив красный символ

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

Для проверки номера телефона и пароля мы будем использовать атрибут 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 оказываются мощными сами по себе, и ими не стоит пренебрегать даже при использовании фреймворков для веб-приложений.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

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

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.