Модуль 2 · Урок 8
Форми, labels і native validation
Form — контракт введення й submit data. Кожний control потребує зрозумілого purpose, видимого label, стабільного name, доречного native type та мінімально необхідних constraints.
LabelsControlsname/valueValidation
Три різні identifiers
| Attribute | Role | Failure example |
|---|---|---|
id | Document-unique target для label/fragment | Два controls з однаковим id |
for | Зв’язує label з exact control id | Typo не створює association |
name | Key під час form submit | Control без name не передає pair |
Placeholder може показати короткий hint, але зникає під час вводу й не замінює persistent label.
Native controls і groups
Text-like input
email, url, number дають native semantics/behavior, але не гарантують truthful data.textareaБагаторядковий text input; initial value пишеться між tags.select/optionВибір із наперед визначених values.fieldset/legendMeaningful group, особливо radio/checkbox questions.button typesubmit надсилає form, button не submitить автоматично.InstructionsFormat/constraint пояснюються до помилки, а message називає control і спосіб виправлення.
Native constraints — перший gate, не security boundary
| Attribute | Перевіряє | Не доводить |
|---|---|---|
required | Value missing | Що value правдиве |
minlength/maxlength | Text length | Що content безпечний |
min/max/step | Numeric/date range | Business authorization |
pattern | Client-side format | Server-side validation |
autocomplete | Browser autofill purpose hint | Consent збирати зайві PII |
Мінімізуйте дані
Навчальна форма пакета не просить ім’я, email або телефон. Client-side validation покращує UX, але production server все одно перевіряє, авторизує й безпечно обробляє input.
Практика модуля
- Заповніть
form-control-map.csv: purpose, label, name, type, constraints. - Додайте explicit labels, required fields і explicit button type.
- Перевірте click по label, keyboard flow, empty/invalid/valid states.
- Завершіть semantic checklist і порівняйте starter із reference.
BookFlow Semantic Page Pack
Starter/reference HTML, SVG і сім audit artifacts. Форма не має зовнішнього endpoint і використовує лише synthetic values.
Офіційні джерела
Практична перевірка · урок 8 з 60
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.