Модуль 6 · Урок 22
Web forms, controls і validation states
Form testing — це не лише happy submit. Перевіряйте label/name/type, constraints, keyboard/focus, serialization intent і повний state machine: pristine, editing, invalid, submitting, success, error та retry.
Native control дає поведінку
Label має бути програмно пов’язаний із control через `for/id` або wrapping. Appropriate input type додає keyboard, parsing і intrinsic constraints; `name` визначає ключ form data. Placeholder не замінює persistent label.
| Контракт | Перевірка |
|---|---|
| Identity | Унікальний id, правильний name, label activates control. |
| Type | Email/date/number semantics відповідають data й device input. |
| State | required/disabled/readonly/checked/value відображають реальний workflow. |
| Submission | Лише successful controls із name входять до payload intent. |
Constraint validation — один шар
`required`, `type`, `min/max`, `minlength/maxlength`, `pattern` створюють native constraints. `validity` пояснює причину, `checkValidity()` повертає boolean, `reportValidity()` також показує user-facing feedback. `novalidate` і direct `form.submit()` змінюють interactive behavior.
Client validation не є security boundary
HTML можна змінити в DevTools або обійти crafted request. Server завжди повторно перевіряє authorization, type, range, business rules та integrity.
State matrix важливіша за один input
Boundary і cross-field cases
Окрім empty/valid/invalid format тестуйте trimmed Unicode, min/max inclusivity, timezones, paste/autofill, duplicate submit, browser back/refresh і cross-field rules. Native API не знає, що end date має бути після start date, доки application не задасть custom constraint.
Практика
Заповніть `form-test-matrix.csv`: control/state/input/constraint/UI/DOM-or-API/focus/evidence. Не використовуйте real email або payment data.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.