Урок 08. Таблицы и формы
Кратко: суть урока
Таблицы нужны для табличных данных, а формы — для ввода пользователя. Важные элементы: table, thead, tbody, tr, th, td, form, label, input, textarea, select, button и атрибуты нативной валидации.
- Таблицы используем для данных, а не для раскладки страницы.
- Каждое поле формы связываем с label через for и id.
- type, required, minlength, placeholder и name задают поведение поля.
О чём этот урок
Таблицы нужны для табличных данных, а формы — для ввода пользователя. Важные элементы: table, thead, tbody, tr, th, td, form, label, input, textarea, select, button и атрибуты нативной валидации.
Таблицы
Таблица описывает строки и столбцы данных. Заголовки оформляются через th, тело — через tbody, а смысловые секции помогают читать таблицу и человеку, и инструментам.
Формы
form группирует поля ввода. У каждого поля должен быть name, иначе значение не будет нормально отправляться.
Labels
label делает поле понятным и кликабельным. Связка for + id обязательна для явной связи подписи и поля.
Нативная валидация
required, type=email, type=password, minlength, min, max позволяют проверять часть правил без JavaScript.
Практика
- Соберите таблицу навыков с thead и tbody.
- Создайте форму контакта с полями имя, e-mail, пароль и сообщение.
- Добавьте required, type=email, type=password и minlength.
Домашнее задание
Добавьте в страницу-резюме таблицу навыков и форму обратной связи. В форме должны быть имя, e-mail, пароль/код доступа, сообщение и нативная валидация.