На прошлом уроке мы изучили списки, ссылки и медиа. Теперь — таблицы и формы: таблицы позволяют отображать структурированные данные в строках и столбцах. Формы дают пользователю возможность вводить данные: текст, числа, выбирать варианты и отправлять их на сервер или обрабатывать в JavaScript. Оба инструмента широко используются на веб-страницах.
<table>, <tr>, <td>, <th>.colspan, rowspan.<form>, <input>, <button>, <label>.table, tr, td, th<table>
<tr>
<th>Имя</th>
<th>Возраст</th>
</tr>
<tr>
<td>Анна</td>
<td>14</td>
</tr>
<tr>
<td>Борис</td>
<td>15</td>
</tr>
</table><table> — контейнер таблицы<tr> — строка (table row)<th> — ячейка заголовка (жирный по умолчанию)<td> — ячейка данных (table data)colspan="2" — ячейка занимает 2 столбцаrowspan="2" — ячейка занимает 2 строки<table>
<tr>
<th colspan="2">Заголовок на две колонки</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>form, input, button<form>
<p>
<label for="name">Имя:</label>
<input type="text" id="name" name="username">
</p>
<p>
<button type="submit">Отправить</button>
</p>
</<form> — контейнер формы<input> — поле ввода; type задаёт вид поля<label for="id"> — подпись, связанная с полем по id<button type="submit"> — кнопка отправкиinputtype | Назначение |
|---|---|
text | Текстовая строка |
number | Число |
email | |
password | Пароль (скрыт) |
checkbox | Флажок |
radio | Переключатель (один из группы) |
submit | Кнопка отправки |
<input type="text" name="login" placeholder="Введите логин">
<input type="number" name="age" min="1" max="120" value="14">
<input type="checkbox" name="agree" id="agree">
<label for="agree">Согласен с условиями</
textarea и select<label for="bio">О себе:</label>
<textarea id="bio" name="bio" rows="4" cols="40"></textarea><label for="city">Город:</label>
<select id="city" name="city">
<option value="msk">Москва</option>
<option value="spb" selected>Санкт-Петербург</option>
</select>Создай таблицу расписания уроков на один день: 4–5 строк (урок, предмет, кабинет).
Создай таблицу с объединёнными ячейками (например, заголовок на всю ширину).
Создай форму «Регистрация» с полями: имя, возраст, пол (radio), согласие (checkbox), кнопка «Зарегистрироваться».
Создай форму обратной связи: имя, email, сообщение (textarea), кнопка «Отправить».
Мы изучили таблицы и формы — важные элементы для структурированных данных и ввода пользователя. На следующем уроке начнём оформлять страницы с помощью CSS.
<th> и <td>.name у полей формы — без него данные не отправятся.name — вместо одного варианта на выбор будет доступно несколько.<label for="id"> с полем — клик по подписи не вызовет фокус на поле.Создай таблицу расписания на неделю:
Создай таблицу, где используется:
colspan в заголовке (например, «Расписание» на всю ширину)rowspan в одном столбце (например, «Утро» для нескольких строк)Создай форму анкеты школьника:
select)textarea)Создай форму подписки на рассылку:
type="email")Создай страницу «Книга отзывов»: вверху — форма (имя, отзыв, оценка 1–5), ниже — таблица с несколькими примерами отзывов (имя, текст, оценка). Пока только разметка, отправка не требуется.
Сделай форму опроса «Какой твой любимый язык программирования?» с radio-кнопками (Python, JavaScript, другие) и полем «Другое» (text) для уточнения.
Создай таблицу сравнения двух продуктов/сервисов (например, двух мессенджеров). Столбцы: критерий, продукт A, продукт B. Не менее 5 строк.