Вопрос с собеседования · Frontend

Как правильно сверстать форму?

JuniorБраузер и DOM
Ещё спрашивают так:
  • Зачем нужен label?
  • Какие типы input бывают?
Коротко

Каждое поле — с label (for/id или обёртка): клик по подписи фокусирует поле, скринридер читает подпись. Правильный type (email, tel, number, date, password) даёт нужную клавиатуру на телефоне и встроенную проверку; name — ключ при отправке; autocomplete (email, current-password, one-time-code) помогает браузеру и менеджерам паролей. Группы — fieldset и legend. Отправка — form с submit-кнопкой: работает Enter, обработка через событие submit.

  • placeholder — не замена label: исчезает при вводе
  • inputmode подсказывает клавиатуру без изменения типа
  • Кнопка внутри формы по умолчанию type="submit" — для других действий type="button"

Подробно

<form>
  <label for="email">Почта</label>
  <input id="email" name="email" type="email" autocomplete="email" required>
  <button type="submit">Войти</button>
</form>

Что хотят услышать

  • label для каждого поля.
  • type, name, autocomplete.
  • form и submit.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗placeholder полностью заменяет label, а name и autocomplete нужны только для стилей
  • ✓label у каждого поля, правильные type, name и autocomplete, отправка через submit
  • ✗Подписи полей не нужны, если есть иконки
  • ✗Тип поля не влияет на клавиатуру телефона

Связанные вопросы

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

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

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

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