Формы, которые не бесят

До формы человек уже дошёл: нашёл сайт, выбрал товар, решился. Форма — последний шаг, и именно на нём отваливаются.

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

Всё это чинится вёрсткой, без единой строчки серверного кода.

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

Причина в псевдоклассе :invalid: он срабатывает сразу, ещё до того, как человек что-либо ввёл. Пустое обязательное поле недействительно с момента загрузки страницы.

/* Краснеет сразу при загрузке страницы */
input:invalid {
  border-color: #c8394a;
}

/* Краснеет только после попытки ввода */
input:user-invalid {
  border-color: #c8394a;
  background: #fff5f6;
}

<form class="form">  <div class="field">    <input class="field__input" id="mail" type="email"           placeholder=" " required autocomplete="email">    <label class="field__label" for="mail">Почта</label>  </div>​  <div class="field">    <input class="field__input" id="name" type="text"           placeholder=" " required autocomplete="name">    <label class="field__label" for="name">Имя</label>  </div>​  <button type="submit">Отправить</button></form>

.field {  position: relative;  margin-bottom: 18px;}​.field__input {  width: 100%;  padding: 18px 12px 7px;  font: inherit;  border: 1px solid #ccd;  border-radius: 8px;  background: #fff;}​.field__label {  position: absolute;  left: 13px;  top: 14px;  font-size: 15px;  color: #7a7f8c;  pointer-events: none;  transition: transform .18s ease, font-size .18s ease;  transform-origin: left top;}​/* Подпись уезжает вверх, когда поле не пустое или в фокусе.   Всё держится на :placeholder-shown — скрипт не нужен */.field__input:focus + .field__label,.field__input:not(:placeholder-shown) + .field__label {  transform: translateY(-9px) scale(.78);}​.field__input:focus {  outline: 2px solid #6544e0;  outline-offset: 1px;  border-color: transparent;}​/* Ошибка — только после попытки ввода */.field__input:user-invalid {  border-color: #c8394a;  background: #fff5f6;}​button {  padding: 11px 20px;  font: inherit;  font-weight: 600;  color: #fff;  background: #6544e0;  border: 0;  border-radius: 999px;}

Плохое сообщение говорит, что не так. Хорошее — что сделать.

Сообщение должно стоять рядом с полем, а не общим списком сверху. И быть связано с полем через aria-describedby, иначе читалка его не свяжет.

1<div class="field">2  <label for="mail">Почта</label>3  <input type="email" id="mail" name="mail" required4         aria-describedby="mail-error"5         aria-invalid="true">67  <!-- role="alert" объявит текст сразу, как только он появится -->8  <p class="field__error" id="mail-error" role="alert">9    Похоже, здесь опечатка — нужен адрес вида имя@почта.ру10  </p>11</div>

Два атрибута, которые экономят человеку минуты, а стоят пары слов.

inputmode выбирает раскладку клавиатуры на телефоне. autocomplete разрешает браузеру подставить сохранённые данные — адрес, имя, карту.

1<input type="text" name="name"2       autocomplete="name" autocapitalize="words">34<input type="email" name="email"5       inputmode="email" autocomplete="email"6       autocapitalize="off" spellcheck="false">78<!-- type="tel" даёт телефонную клавиатуру,9     inputmode уточняет её вид -->10<input type="tel" name="phone"11       inputmode="tel" autocomplete="tel">1213<!-- Индекс: только цифры, но type="number" здесь не годится —14     он режет ведущие нули и показывает стрелки -->15<input type="text" name="zip"16       inputmode="numeric" pattern="[0-9]*"17       autocomplete="postal-code">1819<input type="text" name="card"20       inputmode="numeric" autocomplete="cc-number">

Долгое время чекбоксы и переключатели «стилизовали» так: настоящий элемент прятали, а рядом рисовали свой из div. Это ломает доступность: пропадает фокус, состояние не объявляется, клавиатура не работает.

Сегодня половина задач решается свойством accent-color, а остальное — стилизацией самого элемента через appearance: none.

1/* Самый простой путь: перекрасить встроенный вид одной строкой */2:root {3  accent-color: #6544e0;4}56/* Полный контроль — но элемент остаётся настоящим */7.check {8  appearance: none;9  inline-size: 20px;10  block-size: 20px;11  border: 2px solid #ccd;12  border-radius: 6px;13  display: grid;14  place-content: center;15}1617.check::before {18  content: "";19  inline-size: 10px;20  block-size: 10px;21  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);22  background: #fff;23  transform: scale(0);24  transition: transform .12s ease;25}2627.check:checked {28  background: #6544e0;29  border-color: #6544e0;30}3132.check:checked::before { transform: scale(1); }3334/* Фокус обязан остаться видимым */35.check:focus-visible {36  outline: 3px solid #6544e0;37  outline-offset: 2px;38}

Форма из двадцати полей отпугивает одним видом. Приёмы, которые действительно помогают.

• Разбить на шаги. Три экрана по пять полей проходят охотнее, чем один на пятнадцать. Обязательно показывай, сколько шагов всего.
• Сгруппировать через fieldset. «Контакты», «Доставка», «Оплата» — человек видит структуру и понимает, сколько осталось.
• Убрать необязательное. Каждое поле должно оправдывать своё существование. Отчество нужно налоговой, а не форме подписки.
• Помечать необязательные, а не обязательные. Если из десяти полей девять обязательны, девять звёздочек — это шум. Помечай исключения.
• Не сбрасывать введённое. Ошибка на четвёртом шаге не должна стирать первые три.

1@layer components {2  .field { display: grid; gap: 4px; }34  .field__input {5    padding: 10px 12px;6    border: 1px solid var(--color-border);7    border-radius: var(--radius-sm);8  }910  /* Подсвечиваем всю группу, когда фокус внутри */11  .field:has(:focus-visible) .field__label {12    color: var(--color-accent);13  }1415  /* Ошибка — после попытки ввода, не раньше */16  .field__input:user-invalid {17    border-color: var(--color-danger);18    background: color-mix(in oklab, var(--color-danger) 8%, transparent);19  }2021  /* Сообщение показываем только когда поле реально ошибочно */22  .field__error { display: none; color: var(--color-danger); }23  .field:has(:user-invalid) .field__error { display: block; }2425  /* Браузер подставил значение — убираем жёлтый фон,26     но оставляем признак автозаполнения */27  .field__input:autofill {28    box-shadow: inset 0 0 0 100px var(--color-surface);29    -webkit-text-fill-color: var(--color-text);30  }3132  .field__input:disabled {33    opacity: .6;34    cursor: not-allowed;35  }36}

• Прятать настоящий элемент ради красоты. Пропадает фокус, клавиатура и объявление состояния. Стилизуй сам элемент через appearance: none.
• Отключать вставку из буфера. Запрет вставки в поле подтверждения почты не повышает надёжность, а мешает людям с менеджерами паролей.
• Ставить maxlength вслепую. Обрезание на лету путает: человек печатает, а символы не появляются. Лучше показать счётчик.
• Проверять формат телефона строгой маской. Форматы разные в разных странах, а на границах масок люди застревают. Принимай как есть, нормализуй на сервере.

<form class="form">  <div class="field">    <label for="mail">Почта</label>    <input class="field__input" type="email" id="mail" name="mail" required>    <p class="field__error" id="mail-error">Нужен адрес вида имя@почта.ру</p>  </div>​  <div class="field">    <label for="phone">Телефон</label>    <input class="field__input" type="tel" id="phone" name="phone">  </div>​  <label class="agree">    <input type="checkbox" checked>    <span>Согласен на обработку данных</span>  </label>​  <button type="submit">Отправить</button></form>

.form { display: grid; gap: 14px; max-width: 320px; }.field { display: grid; gap: 4px; }label { font-size: 14px; font-weight: 600; }​.field__input {  padding: 9px 12px;  font: inherit;  border: 1px solid #ccd;  border-radius: 8px;}​/* Краснеет сразу — это надо починить */.field__input:invalid {  border-color: #c8394a;}​.field__error { margin: 0; font-size: 13px; color: #c8394a; }​.agree { display: flex; align-items: center; gap: 8px; font-weight: 400; }​button {  padding: 11px;  font: inherit;  font-weight: 600;  color: #fff;  background: #6544e0;  border: 0;  border-radius: 999px;}​/* Фокус убран без замены */:focus { outline: none; }

1<form class="form">2  <div class="field">3    <label for="mail">Почта</label>4    <input class="field__input" type="email" id="mail" name="mail" required5           inputmode="email" autocomplete="email"6           autocapitalize="off" spellcheck="false"7           aria-describedby="mail-error">8    <p class="field__error" id="mail-error">Нужен адрес вида имя@почта.ру</p>9  </div>1011  <div class="field">12    <label for="phone">Телефон</label>13    <input class="field__input" type="tel" id="phone" name="phone"14           inputmode="tel" autocomplete="tel">15  </div>1617  <label class="agree">18    <input type="checkbox" checked>19    <span>Согласен на обработку данных</span>20  </label>2122  <button type="submit">Отправить</button>23</form>

1:root { accent-color: #6544e0; }23.form { display: grid; gap: 14px; max-width: 320px; }4.field { display: grid; gap: 4px; }5label { font-size: 14px; font-weight: 600; }67.field__input {8  padding: 9px 12px;9  font: inherit;10  border: 1px solid #ccd;11  border-radius: 8px;12}1314/* Только после того, как человек поработал с полем */15.field__input:user-invalid {16  border-color: #c8394a;17  background: #fff5f6;18}1920.field__error { margin: 0; font-size: 13px; color: #c8394a; }2122.agree { display: flex; align-items: center; gap: 8px; font-weight: 400; }2324button {25  padding: 11px;26  font: inherit;27  font-weight: 600;28  color: #fff;29  background: #6544e0;30  border: 0;31  border-radius: 999px;32}3334:focus-visible {35  outline: 3px solid #6544e0;36  outline-offset: 1px;37}