Формы — один из ключевых интерфейсных компонентов. Их корректная разметка влияет на доступность, UX и обработку данных на сервере.
<form> — контейнер для полей, имеет атрибуты:
method="post/get"action="/endpoint"autocomplete="on/off"<label> — подпись к полю, обеспечивающая доступность.
<input> — ввод данных (тип определяется атрибутом type).
<button> — отправка формы (type="submit") или действие в интерфейсе.
<select>, <option> — выпадающий список.
<textarea> — многострочное поле ввода.
Каждое поле должно быть связано с label.
Вариант через for:
<label for="email">Email</label>
<input id="email" type="email" />
Или через вложенность:
<label>
Email
<input type="email" />
</label>
Каждый input должен иметь правильный type:
type="email"type="password"type="tel"type="number"type="checkbox"type="radio"У каждого поля должен быть name.
Данные без name не попадут на сервер.
Используйте autocomplete.
Примеры:
autocomplete="email"autocomplete="current-password"autocomplete="name"Не допускайте дублирования id.
id должен быть уникальным во всём документе.
Корректная доступность делает форму управляемой с клавиатуры и понятной для скринридеров.
Каждый input должен иметь label.
Порядок элементов в разметке должен совпадать с порядком фокуса.
Фокус должен быть видимым:
Tailwind автоматически поддерживает focus:outline-none focus:ring-2 focus:ring-*.
Для полей с ошибками используются атрибуты:
aria-invalid="true"aria-describedby="error-id"ARIA применяется только если элемент не является нативным HTML-контролом. Например:
Для обычных <input>, <select>, <button> ARIA не нужна — браузер уже знает их поведение.
Tailwind использует утилитарные классы, которые позволяют быстро строить форму, не создавая отдельные CSS-файлы.
w-full, max-w-md, w-10, h-6flex, grid, items-center, justify-betweenspace-y-4, gap-6text-sm, font-medium, text-gray-700bg-gray-100, bg-white, text-indigo-600border, border-gray-300rounded-lg, rounded-fullfocus:ring-2 focus:ring-indigo-500hover:bg-indigo-700transition, duration-150Рекомендуемая минимальная стилизация:
<input
class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm
focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
Полезные улучшения:
shadow-sm — мягкая теньplaceholder:text-gray-400bg-gray-50 для более мягкого фонаПереключатель — это элемент с двумя состояниями (вкл/выкл).
Чаще всего он основан на:
input type="checkbox" — нативная доступность<button> с ARIA-атрибутами (для более кастомных случаев)peer в Tailwind<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<!-- фон переключателя -->
<div class="w-11 h-6 bg-gray-300 rounded-full
peer-checked:bg-indigo-600 transition-colors"></div>
<!-- движущийся кружок -->
<div class="absolute left-0.5 top-0.5
w-5 h-5 bg-white rounded-full shadow
transition-transform peer-checked:translate-x-5"></div>
</label>
peer — скрытый checkboxpeer-checked: — применяется, когда checkbox включёнtranslate-x-* — движение переключателяСтраница регистрации — важный, часто встречающийся сценарий.
Форма по центру страницы
Используем:
min-h-screen flex items-center justify-center
Фоновое изображение или градиент
Пример:
<div class="fixed inset-0 bg-cover bg-center bg-[url('/img/auth-bg.jpg')]"></div>
Полупрозрачный контейнер
Форма должна контрастировать с фоном:
<div class="bg-white/80 backdrop-blur-xl p-6 rounded-2xl shadow-lg max-w-md w-full">
Адаптивность
Tailwind позволяет легко масштабировать:
p-4 md:p-8
text-sm md:text-base
w-full max-w-md mx-auto
Структура формы
Содержит стандартные поля:
<main class="min-h-screen flex items-center justify-center px-4">
<div class="w-full max-w-md space-y-6 bg-white/80 backdrop-blur-lg p-6 rounded-xl shadow-lg">
<h1 class="text-xl font-semibold">Регистрация</h1>
<form class="space-y-4">
<!-- поля -->
<!-- чекбоксы/тогглы -->
<!-- кнопка -->
</form>
</div>
</main>
| Ошибка | Почему плохо | Как исправить |
|---|---|---|
| input без label | скринридер не читает поле | добавить label |
неверный type |
неправильная клавиатура на телефоне, ошибки UX | использовать корректные типы |
| отсутствие name | данные не отправляются | добавить name |
| слишком маленькие кликабельные зоны | неудобно для пользователя | увеличивать отступы / padding |
| хаотичные отступы | форма разваливается визуально | применять space-y-* |
| слишком тёмный фон под текстом | плохая читаемость | увеличить контраст или добавить оверлей |