diff --git a/src/pages/ui-ux/index.md b/src/pages/ui-ux/index.md index 321df3a2..64b816b6 100644 --- a/src/pages/ui-ux/index.md +++ b/src/pages/ui-ux/index.md @@ -1729,8 +1729,30 @@ operation token или другой domain mechanism. **Полный ответ** -Формы объединяют ввод, валидацию, ошибки, доступность, backend-ограничения и состояние сохранения. Маленькая неточность -может привести к потере данных или отказу от сценария. +Форма одновременно работает с пользовательским вводом, локальным состоянием, бизнес-правилами и server contract. Поэтому +даже небольшая форма быстро превращается в state machine. + +Нужно продумать: + +- initial и dirty state; +- field/form validation; +- async validation; +- submitting; +- backend errors; +- permissions; +- сохранение данных после failure; +- keyboard/focus behavior; +- autofill; +- navigation с unsaved changes. + +Сложность усиливается тем, что пользователь вводит данные постепенно. Значение может быть временно невалидным в процессе +набора, а server rule может зависеть от данных, которых client вообще не знает. + +Например, email может пройти browser validation, но server все равно отклонит его как уже зарегистрированный. UI должен +map-ить такую ошибку обратно на поле и не очищать остальные значения. + +На интервью: **форма — это не набор inputs, а workflow с состояниями, validation boundaries и recovery path; зрелый +ответ должен учитывать client, server и accessibility одновременно**. @@ -1746,8 +1768,31 @@ screen reader. **Полный ответ** -Label объясняет, что нужно ввести в поле. Он нужен для понятности, доступности, автозаполнения и правильной работы -screen reader. +Label дает полю устойчивое имя, которое остается понятным до, во время и после ввода. + +Для native input лучше использовать настоящий `