Этап 3 из 19 · ≈ 6 ч

Формы

Основа с Junior

Поля ввода, подписи, встроенная валидация и отправка — основа почти любого интерфейса.

<form action="/signup" method="post">
  <label for="email">Почта</label>
  <input id="email" name="email" type="email" required autocomplete="email">
  <label><input type="checkbox" name="terms" required> Согласен с условиями</label>
  <button type="submit">Зарегистрироваться</button>
</form>

Что важно знать

  • У каждого поля — <label>: клик по подписи фокусирует поле, скринридер читает подпись.
  • Типы email, tel, number, date дают нужную клавиатуру на телефоне и встроенную проверку.
  • Встроенная валидация: required, pattern, min, maxlength; псевдоклассы :invalid, :user-invalid.
  • autocomplete помогает браузеру и менеджерам паролей.
  • Кнопка внутри формы по умолчанию — type="submit"; для других действий явно type="button".
  • Проверки на клиенте — для удобства, а настоящая проверка — на сервере: клиентскую обходят одним запросом.
  • Обработка в JS: событие submit, event.preventDefault(), new FormData(form).

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

Junior ≈ 6 ч

  • Делает форму с подписями, правильными типами полей, autocomplete и встроенной валидацией
  • Обрабатывает отправку формы в JS через FormData и preventDefault

Практика. Сделать форму регистрации с 6 полями, встроенной валидацией и отправкой на тестовый API.

Middle ≈ 4 ч

  • Показывает ошибки доступно — связь с полем через aria-describedby, фокус на первом ошибочном поле
  • Объясняет, почему проверки на клиенте не заменяют проверки на сервере

Практика. Сделать многошаговую форму оформления заказа с доступными ошибками и проверить её только клавиатурой.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Чем контролируемый компонент формы отличается от неконтролируемого?Junior

Контролируемый — значение поля хранится в состоянии React (value + onChange): React — единственный источник истины, легко валидировать и форматировать на лету. Неконтролируемый — значение хранит сам DOM, читают через ref или FormData при отправке…

Полный разбор
Как правильно сверстать форму?Junior

Каждое поле — с label (for/id или обёртка): клик по подписи фокусирует поле, скринридер читает подпись. Правильный type (email, tel, number, date, password) даёт нужную клавиатуру на телефоне и встроенную проверку; name — ключ при отправке; autocomplete…

Полный разбор
Как валидировать формы на фронтенде?Junior

Проверка на клиенте — для удобства (быстрая подсказка), на сервере — обязательно (клиент можно обойти). Встроенные атрибуты: required, minlength, pattern, min/max, типы email и url; в JS — Constraint Validation API или библиотека схем (Zod, Yup). Ошибки…

Полный разбор
Как сделать простую форму в React?Junior

Контролируемое поле: значение в state, value={name} и onChange={e => setName(e.target.value)} — React — источник истины, удобно валидировать и форматировать на лету. Неконтролируемое: значение живёт в DOM, читается при отправке через FormData или ref…

Полный разбор
Что такое доступность веб-интерфейса и с чего её начинать?Junior

Доступность — возможность пользоваться интерфейсом людям с нарушениями зрения, слуха, моторики, когнитивными особенностями, а также всем в неудобных условиях (солнце, одна рука). Стандарт — WCAG (уровень AA — обычная цель). Основы: семантическая разметка…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования