ЗадачаАктуально

Задача: Создайте форма обратной связи

Создайте форма обратной связи: практическая задача по вёрстке со стартовым кодом, критериями готовности, усложнением и самопроверкой.

Условие: Создайте форма обратной связи

Материал «Создайте форма обратной связи» относится к области «практическая задача: формы». Для темы «Создайте форма обратной связи» предметный результат подтверждается так: пройдите ввод, ошибку и успешную отправку только клавиатурой. Предметная проверка для «Создайте форма обратной связи»: пройдите ввод, ошибку и успешную отправку только клавиатурой. Результат задачи «Создайте форма обратной связи» должен сохранять семантический HTML, адаптивную раскладку и понятные состояния управления.

Стартовый код

html
<form class="request">
  <label>Почта <input type="email" name="email" required></label>
  <button type="submit">Отправить</button>
</form>

Критерии готовности

  • Пройдите ввод, ошибку и успешную отправку только клавиатурой применительно к теме «Создайте форма обратной связи»
  • Сопоставьте результат «Создайте форма обратной связи» с целью «получить данные с понятными подписями, ограничениями и сообщениями об ошибках» и объясните каждое использованное условие
  • Повторите проверку «Создайте форма обратной связи» с другими данными и убедитесь, что исключён риск: placeholder и цвет не должны быть единственными носителями инструкции или ошибки
  • Назначение «Создайте форма обратной связи» понятно без декоративного оформления

Усложнение задачи

Подготовьте минимальный пример «Создайте форма обратной связи» в рабочем фрагменте интерфейса. Для «Создайте форма обратной связи» подтвердите цель «получить данные с понятными подписями, ограничениями и сообщениями об ошибках» и исключите риск «placeholder и цвет не должны быть единственными носителями инструкции или ошибки».

Самопроверка решения

Перед применением «Создайте форма обратной связи» сформулируйте ожидаемое поведение, затем пройдите ввод, ошибку и успешную отправку только клавиатурой. Для «Создайте форма обратной связи» такое сравнение показывает реальную причину изменения. Затем исключите следующие риски: Placeholder и цвет не должны быть единственными носителями инструкции или ошибки — это предметный риск для «Создайте форма обратной связи»; Отсутствие запасного поведения при неподдерживаемой возможности при использовании «Создайте форма обратной связи»; Оптимизация кода до проверки корректности и доступности; для «Создайте форма обратной связи» проверьте это отдельно.

Спецификации и источники

Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.