Формы

  • Ввод данных
  • 3 мин
  • компонентов: 8
  • пар: 3

Из чего состоит форма, какой компонент несёт какую часть и четыре решения, от которых зависит, заполнят её или нет.

Ревизия 2026-09-05

На этой странице

Что решает

Форма — место, где человек что-то отдаёт и узнаёт, получилось ли. Всё трудное в ней живёт во второй половине: где появится ошибка, когда она появится и сказано ли в ней, что делать дальше.

Компоненты ниже за вас этого не решают. Они делают каждое из этих решений явным, а не случайным.

Анатомия

У формы четыре слоя, и пропуск любого — причина, по которой формы ощущаются неправильными, а не выглядят такими.

  1. Форма держит правила проверки и состояние целого — GrForm. Одно место решает, можно ли отправлять.
  2. Секции группируют поля, которые идут вместе, — GrFormSection. Длинная форма без них список; с ними — форма, которую можно окинуть взглядом.
  3. Поля связывают подпись, контрол, подсказку и ошибку в одно целое — GrFormField. Подпись и ошибка привязаны к контролу, а не положены рядом.
  4. Контролы принимают значение — GrInput, GrSelect, GrCheckbox и остальная группа.

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

Пример

Так и не так

Так — Ошибка под своим полем

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

Так не надо — Сводка ошибок сверху

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

Так — Проверять при уходе, перепроверять при вводе

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

Так не надо — Проверять с первого нажатия

Поле почты краснеет на a, a@, a@b — три неправды до первой правды. Человек приучается не смотреть на цвет, а цвет был единственным сигналом.

Так — Говорить, что сделать, а не что не так

«В пароле нужно минимум 8 символов» лучше, чем «Неверный пароль»: первое — указание, второе — приговор. Правило, по которому вы отклонили ввод, известно вам. Назовите его.

Так не надо — Гасить кнопку, пока форма невалидна

Погашенная кнопка ничего не объясняет и не принимает фокус: человек остаётся искать, чего не хватает. Дайте отправить и покажите, что помешало, — это и есть момент, когда он задаёт вопрос.

Доступность

Три вещи несут здесь основную нагрузку, и все три — про устройство, а не про вид.

Подпись принадлежит контролу. GrFormField их связывает; подпись, просто положенная рядом с полем, не подпись ни для кого, кто на неё не смотрит.

Ошибку надо объявить, а не только показать. Она привязана к контролу и помечена как его описание — тогда она доходит до скринридера в момент прихода фокуса, и человеку не приходится искать причину.

Цвет никогда не единственный сигнал. Красная рамка не говорит ничего тому, кто не различает красный, и ничего на монохромном экране. Сигнал — текст ошибки; цвет его повторяет.

Ничто на этой странице не заменяет проверки скринридером. Клавиатурные контракты ниже приходят из библиотеки и проверяются там; как читается вслух форма целиком — свойство вашей страницы, а не компонентов.

Компоненты паттерна

Список строится из frontmatter, а не из ссылок в тексте: переименование слага здесь не теряется.

Клавиатура

Контракты приходят из библиотеки. Паттерн их не пересказывает — он на них ссылается.