Создание плавающих плейсхолдеров для полей ввода: Полное руководство

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

Содержание

Шаг 1: Базовая HTML-разметка
Шаг 2: Оформление элементов с помощью CSS
Шаг 3: Анимация плавающих плейсхолдеров
Заключение

Шаг 1: Базовая HTML-разметка

Начнем с создания простой разметки для нашей формы. Здесь плейсхолдеры будут заменены элементами <label>, которые будут перемещаться при фокусировке на поле ввода:

<main>
<form>
<div>
<input id="email" type="email" placeholder=" " />
<label for="email">Email</label>
</div>
<div>
<input id="password" type="password" placeholder=" " />
<label for="password">Password</label>
</div>
</form>
</main>

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

Шаг 2: Оформление элементов с помощью CSS

Теперь настроим стиль для элементов формы, чтобы создать базовый вид:

div {
display: flex;
flex-direction: column-reverse;
max-width: 20rem;
margin: 0 auto;
}

input {
border: none;
padding: 1rem;
margin-top: 2rem;
font-size: 1.6rem;
border-bottom: 0.1rem solid #bdbdbd;
outline: none;
}

label {
padding-left: 1rem;
color: #bdbdbd;
transform: translateY(4.8rem);
transform-origin: left top;
cursor: text;
transition: all 0.3s;
}

Элементы div структурированы с помощью flexbox для отображения элементов формы в нужном порядке.
Поля ввода (input) получают стиль с тонкой границей внизу и внутренним отступом для более приятного восприятия.
Метки (label) начинаются с позиции, где они располагаются поверх поля ввода, с цветом, указывающим на неактивное состояние.

Шаг 3: Анимация плавающих плейсхолдеров

Чтобы метки «плавали», когда пользователь начинает вводить данные, добавим следующие стили:

input:focus,
input:not(:placeholder-shown) {
border-bottom: 0.2rem solid #212121;
}

input:focus ~ label,
input:not(:placeholder-shown) ~ label {
padding: 0;
color: #212121;
transform: translateY(2rem) scale(0.8);
}

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

Заключение

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