Форми — основа вебу. Грубо кажучи, типовий застосунок здебільшого складається із форм та списків. Форми повинні бути:
- зручними: користувач чітко розуміє, яку дію має зробити, чи що ввести. Якщо ввід користувача неправильний, це повинно бути повідомлено в зрозумілій формі. Поля вводу і форма повинні реагувати на дії користувача надаючи чітке розуміння, що відбувається, і що потрібно зробити (чи поле активне, сфокусоване, чи очікується введення даних тощо).
- доступними: користувач часто заповнює форму не на комп'ютері, а на мобільному проистрої, не за допомогою мишки, а за допомогою клавіатури замість неї, іноді з допомогою зчитувача екрану. Сучасні веб-застосунки повинні бути зручними в усіх перерахованих випадках.
- гарними і функціональними: стандартний вигляд полів вводу може сильно відрізнятися від дизайну застосунку. Їх стилізація деяких полів може бути доволі складна, оскільки потрібно повністю зберігати функціональність.
Останнє часто розв'язується за допомогою JavaScript, але цей підхід має певні недоліки. Ми рекомендуємо використовувати тільки HTML і CSS. Ці дві технології надають широкий набір інструментів, щоб без значних зусиль вирішити переважну більшість задач в цьому завданні, та в подібних задачах за межами курсу.
- form
- fieldset, legend, label
- checkbox, radio button, select
- tabindex
- validation
- accessibility
Розробити сторінку офрмлення замовлення відовідно до макету авторства Mathieu Mayer-Mazzoli.
- Використовуйте HTML і CSS, не використовуйте JavaScript
- Використовуйте семантичні елементи, наприклад,
<address>,<section>,<nav>тощо — суть завдання в тому, щоб з ними ознайомитися - Елементи форми повинні бути клікабельні, і реагувати на дії користувача.
- Дані форми повинні перевірятися виключно інструментами HTML/CSS.
- Елементи форми повинні бути доступними незалежно від методу вводу: миша, клавіатура, тач-девайси. Бонус — тестування за допомогою зчитувача екрану (скрінрідера).
- Вигляд повинен буди наближеним до макету.
- Перевірте результета в усіх доступних браузерах і на різних пристроях.
- Вимкніть CSS, та перевіте вигляд свого документу без нього. Чи все працює, чи все перевіряється?
- Форма повинна мати валідний HTML і CSS. 100% відповідності не вимагається, але перевіте, що немає помилок (попередження (warnings) допускаються, але важливо, щоб ви їх розуміли).
Зауважимо, що список рекомендованих ресурсів доволі широкий. У вас скоріше за все не вистачить часу, щоб переглянути усе і виконати завдання. Пам'ятайте, що практикуватися важливіше, навіть, якщо ваше рішення при цьому не буде ідеальним. Вам не потрібно читати все зараз, сфокусуйтеся на пошуках відповідей на конкретні запитання, що виникають у вас в ході роботи.
- HTML Forms on MDN — серія статей про різні аспекти HTML-форм
- Native Form Validation - Part I
- Native Form Validation - Part II
- HTML5 doctor — опис HTML-елементів з прикладами
- Лекція про HTML by Aleksei Shvaika for Kottans JS course 2016
- Inhuman UI by Vadim Makeev — розмова про доступність, і що розробниким можуть з цим зробити
- Weblind — рекомендації по розробці сайтів для людей із відхиленнями зору
Ви можете переглянути записи наших попередніх курсів:
 |
Віктор Якубів: Стандарт і семантика HTML |
 |
Олександр Островний: HTML/CSS |
 |
Олександр Островний: Зображення, форми, доступність |
