Формы
Из чего состоит форма, какой компонент несёт какую часть и четыре решения, от которых зависит, заполнят её или нет.
Что решает
Форма — место, где человек что-то отдаёт и узнаёт, получилось ли. Всё трудное в ней живёт во второй половине: где появится ошибка, когда она появится и сказано ли в ней, что делать дальше.
Компоненты ниже за вас этого не решают. Они делают каждое из этих решений явным, а не случайным.
Анатомия
У формы четыре слоя, и пропуск любого — причина, по которой формы ощущаются неправильными, а не выглядят такими.
- Форма держит правила проверки и состояние целого —
GrForm. Одно место решает, можно ли отправлять. - Секции группируют поля, которые идут вместе, —
GrFormSection. Длинная форма без них список; с ними — форма, которую можно окинуть взглядом. - Поля связывают подпись, контрол, подсказку и ошибку в одно целое —
GrFormField. Подпись и ошибка привязаны к контролу, а не положены рядом. - Контролы принимают значение —
GrInput,GrSelect,GrCheckboxи остальная группа.
Порядок важен в одну сторону: контрол никогда не владеет собственной подписью и ошибкой. Как только он ими владеет, два поля на одной странице начинают расходиться в том, где показывать ошибку.
Пример
Так и не так
Так — Ошибка под своим полем
Человек читает ошибку там, где ошибся. Привяжите её к контролу, чтобы скринридер зачитал её вместе с полем, а не отдельным абзацем где-то выше.
Так не надо — Сводка ошибок сверху
«Исправьте три поля» над формой из двенадцати — это задача на поиск, а не подсказка. Работает только дополнением к ошибкам у полей, никогда вместо них, — и даже тогда каждая строка обязана быть ссылкой, переводящей фокус на поле.
Так — Проверять при уходе, перепроверять при вводе
Проверка во время набора сообщает человеку, что он неправ, раньше, чем он успел стать правым. Проверяйте, когда он уходит из поля; а уж если поле ошибочно — перепроверяйте на каждом нажатии, чтобы ошибка исчезла в тот момент, когда её исправили.
Так не надо — Проверять с первого нажатия
Поле почты краснеет на a, a@, a@b — три неправды до первой правды. Человек
приучается не смотреть на цвет, а цвет был единственным сигналом.
Так — Говорить, что сделать, а не что не так
«В пароле нужно минимум 8 символов» лучше, чем «Неверный пароль»: первое — указание, второе — приговор. Правило, по которому вы отклонили ввод, известно вам. Назовите его.
Так не надо — Гасить кнопку, пока форма невалидна
Погашенная кнопка ничего не объясняет и не принимает фокус: человек остаётся искать, чего не хватает. Дайте отправить и покажите, что помешало, — это и есть момент, когда он задаёт вопрос.
Доступность
Три вещи несут здесь основную нагрузку, и все три — про устройство, а не про вид.
Подпись принадлежит контролу. GrFormField их связывает; подпись, просто
положенная рядом с полем, не подпись ни для кого, кто на неё не смотрит.
Ошибку надо объявить, а не только показать. Она привязана к контролу и помечена как его описание — тогда она доходит до скринридера в момент прихода фокуса, и человеку не приходится искать причину.
Цвет никогда не единственный сигнал. Красная рамка не говорит ничего тому, кто не различает красный, и ничего на монохромном экране. Сигнал — текст ошибки; цвет его повторяет.
Ничто на этой странице не заменяет проверки скринридером. Клавиатурные контракты ниже приходят из библиотеки и проверяются там; как читается вслух форма целиком — свойство вашей страницы, а не компонентов.
Компоненты паттерна
Список строится из frontmatter, а не из ссылок в тексте: переименование слага здесь не теряется.
GrFormФормыGrFormSectionФормыGrFormFieldФормыGrInputФормыGrSelectФормыGrCheckboxФормыGrButtonДействияGrAlertОбратная связь
Клавиатура
Контракты приходят из библиотеки. Паттерн их не пересказывает — он на них ссылается.
GrInputКонтракт компонентаGrSelectКонтракт компонентаGrCheckboxКонтракт компонента