Задача: Создайте форма регистрации
Создайте форма регистрации: практическая задача по вёрстке со стартовым кодом, критериями готовности, усложнением и самопроверкой.
Условие: Создайте форма регистрации
Практический разбор «Создайте форма регистрации» строится вокруг области «практическая задача: формы». Для темы «Создайте форма регистрации» предметный результат подтверждается так: пройдите ввод, ошибку и успешную отправку только клавиатурой. Контрольный критерий «Создайте форма регистрации» формулируется так: пройдите ввод, ошибку и успешную отправку только клавиатурой. Результат задачи «Создайте форма регистрации» должен сохранять семантический HTML, адаптивную раскладку и понятные состояния управления.
Стартовый код
<form class="request">
<label>Почта <input type="email" name="email" required></label>
<button type="submit">Отправить</button>
</form>Критерии готовности
- Пройдите ввод, ошибку и успешную отправку только клавиатурой применительно к теме «Создайте форма регистрации»
- Сопоставьте результат «Создайте форма регистрации» с целью «получить данные с понятными подписями, ограничениями и сообщениями об ошибках» и объясните каждое использованное условие
- Повторите проверку «Создайте форма регистрации» с другими данными и убедитесь, что исключён риск: placeholder и цвет не должны быть единственными носителями инструкции или ошибки
- Назначение «Создайте форма регистрации» понятно без декоративного оформления
Усложнение задачи
Перенесите тему «Создайте форма регистрации» в минимальном компоненте и изменяйте по одному условию. После каждого запуска «Создайте форма регистрации» проверяйте: пройдите ввод, ошибку и успешную отправку только клавиатурой.
Самопроверка решения
Для «Создайте форма регистрации» сначала пройдите ввод, ошибку и успешную отправку только клавиатурой. После этого сравните исходное и изменённое состояние «Создайте форма регистрации» на одном и том же содержимом. Затем исключите следующие риски: Placeholder и цвет не должны быть единственными носителями инструкции или ошибки — это предметный риск для «Создайте форма регистрации»; Дублирование интерактивной роли без нативного управления при использовании «Создайте форма регистрации»; Использование !important вместо разбора каскада; для «Создайте форма регистрации» проверьте это отдельно.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.