Домашнее задание: Таблицы и формы

Кратко

Добавьте в страницу-резюме таблицу навыков и форму обратной связи. В форме должны быть имя, e-mail, пароль/код доступа, сообщение и нативная валидация.

Формулировка

Добавьте в страницу-резюме таблицу навыков и форму обратной связи. В форме должны быть имя, e-mail, пароль/код доступа, сообщение и нативная валидация.

Задание повышенной сложности

Добавьте <select> для выбора темы сообщения и <textarea> для подробного комментария.

Ожидаемый результат

Итог должен выглядеть и работать примерно так (форма ниже — живая):

Подготовка окружения

  1. Создайте отдельную папку урока, например lesson-08/.
  2. Создайте в ней файл index.html (и при желании style.css).
  3. Откройте папку в VS Code: code lesson-08.

Пошаговое решение

  1. Соберите таблицу навыков: <table> → <thead> с <th> → <tbody> со строками <tr> из <td>.
  2. Добавьте <form> с полями имя, e-mail, пароль и сообщение — каждому свой <label for> и name.
  3. Включите валидацию: required, type="email", type="password", minlength="8".
  4. Откройте в браузере и проверьте через DevTools (F12): кликните по подписи — курсор должен встать в поле.
  5. Исправьте найденные ошибки смысла, доступности и навигации.

Связь с разделами

Структуру таблицы и форм смотрите в теории, живые образцы — в примерах, типовые промахи — в ошибках.

Мини-проверка

Страница должна быть понятна без CSS, все ссылки и поля должны иметь ясное назначение, а форма не отправляться с пустыми обязательными полями.