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