Главная идея
Этот урок про два «контейнера данных». Таблица отображает уже готовую информацию в сетке строк и столбцов — расписание, прайс, статистику. Форма делает обратное: она собирает данные от пользователя и отправляет их на сервер. Оба элемента имеют чёткую смысловую структуру, и выбирать тег нужно по смыслу содержимого, а не по тому, как он выглядит на экране.
Таблица — это таблица в Excel. Есть шапка с названиями колонок (thead + th) и строки с данными под ней (tbody + td). Каждая ячейка стоит на пересечении своей строки и столбца. Форма — это бумажная анкета. У каждого поля есть подпись («Имя:», «E-mail:») — это <label> — и пустая строка, куда вписывают ответ — это <input>. Внизу анкеты стоит кнопка «Отправить» (<button>), а сама анкета как лист — это <form>.
Как устроена таблица
Таблица строится сверху вниз из вложенных элементов. Сначала контейнер <table>, внутри — секции <thead> (шапка) и <tbody> (тело). Каждая строка — это <tr> (table row). Внутри строки стоят ячейки: заголовочные <th> (по умолчанию жирные и по центру) и обычные <td> (table data). Вот эта структура на схеме:
thead с заголовками th и tbody со строками tr из ячеек td.Если одна ячейка должна занять несколько столбцов — используют атрибут colspan="2"; чтобы растянуть её на несколько строк — rowspan="2". Это позволяет делать объединённые заголовки.
Как устроена форма
Форма — это <form> с двумя ключевыми атрибутами: action (куда отправлять) и method (как: get или post). Внутри живут поля ввода. Самое частое — <input>, чей type меняет поведение: text, email, password, number, date, checkbox, radio. Для длинного текста есть <textarea>, для выбора из списка — <select> с вложенными <option>. Отправляет форму <button type="submit">.
Зачем нужен label и доступность
Каждое поле обязано иметь подпись <label>. Связь устанавливается через совпадение for у label и id у поля. Это даёт три выгоды: подпись становится кликабельной (клик по тексту ставит курсор в поле), скринридер вслух называет поле незрячему пользователю, а увеличенная область клика удобна на телефоне. Placeholder — не замена label: текст-подсказка исчезает при вводе и не озвучивается как подпись.
name критичен: именно по нему сервер узнаёт, какое значение к какому полю относится. Поле без name вообще не отправляется.Нативная валидация
Браузер умеет проверять ввод сам, без JavaScript. Атрибут required запрещает отправку пустого поля; type="email" требует знак @; minlength/maxlength ограничивают длину текста; min/max — диапазон чисел. При нарушении браузер сам покажет подсказку и не отправит форму.
type="email" и набор поддерживаемых атрибутов сверяйте с MDN — поведение слегка различается между браузерами.