Генератор форм CSS

Базовая форма

<form class="form">
  <label class="field">
    <span class="field-label">Email</span>
    <input type="email" required>
    <span class="field-error">Please enter a valid email.</span>
  </label>

  <label class="field">
    <span class="field-label">Password</span>
    <input type="password" minlength="8" required>
  </label>

  <button type="submit" class="button">Sign up</button>
</form>

.field {
  display: block;
  margin-bottom: 1.25rem;
}
.field-label {
  display: block;
  font-weight: 500;
  margin-bottom: .25rem;
}
.field input {
  width: 100%;
  padding: .5rem .75rem;
  font: inherit;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  transition: border-color 120ms, box-shadow 120ms;
}
.field input:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.field input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}
.field-error { display: none; color: #dc2626; font-size: .875rem; margin-top: .25rem; }
.field input:invalid:not(:placeholder-shown) ~ .field-error { display: block; }

Четыре распространённых стиля

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

Чек-лист по доступности

• Видимая метка для каждого поля ввода. Ни в коем случае не используйте placeholder в качестве единственной метки: он исчезает при фокусе и не проходит по контрастности.
• <label for> или обёртывающий <label>. Оба варианта допустимы; обёртывающий немного проще.
• Индикатор фокуса. Никогда не задавайте outline: none без замены. Он нужен пользователям клавиатуры.
• Сообщения об ошибках: связывайте их с полем через aria-describedby. Не обозначайте ошибки только цветом, добавьте текстовое сообщение или иконку.
• Обязательные поля: используйте атрибут required. Для зрячих пользователей добавьте визуальный маркер (звёздочку) в метку.
• Типы полей ввода: используйте type="email", type="tel", type="url", type="number". Мобильные клавиатуры подстраиваются под них.
• Атрибуты autocomplete: autocomplete="email", autocomplete="current-password" и т. д. Это значительно сокращает объём ввода для пользователей.

Нативные состояния валидации

В CSS существуют псевдоклассы для проверки корректности форм:

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range (для числовых значений с минимальным и максимальным значениями)
• :placeholder-shown (пустое поле; виден позиционирующий символ)
• :user-invalid (недействительный код; при этом пользователь уже взаимодействовал с системой, это соответствует типу ошибки)

Псевдокласс :user-invalid представляет собой наиболее удобный способ отображения ошибок только после выполнения пользователем действия, исключая появление красных рамок до взаимодействия. Поддержка была внедрена во всех основных версиях примерно в 2023 году.

Отключённое состояние

.field input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

Отключённые поля ввода нельзя сфокусировать и они не отправляются с формой. Если вы хотите оставить их доступными для программ чтения с экрана, используйте readonly вместо этого: форма отправит значение, но пользователь не сможет его изменить.