Введение в таблицы и формы

Введение

Таблицы и формы в HTML являются важными инструментами для создания структурированных данных и взаимодействия с пользователями на веб-страницах. Таблицы позволяют организовывать информацию в строки и столбцы, а формы используются для сбора данных от пользователей.

Создание таблиц в HTML

Таблицы в HTML создаются с использованием тега <table>. Таблица состоит из строк (<tr>), а каждая строка состоит из ячеек (<td> для обычных ячеек и <th> для заголовков столбцов).

Пример простой таблицы

<table border="1">
  <tr>
    <th>Имя</th>
    <th>Возраст</th>
    <th>Город</th>
  </tr>
  <tr>
    <td>Анна</td>
    <td>28</td>
    <td>Москва</td>
  </tr>
  <tr>
    <td>Иван</td>
    <td>34</td>
    <td>Санкт-Петербург</td>
  </tr>
</table>

В этом примере таблица имеет три столбца ("Имя", "Возраст", "Город") и две строки данных. Атрибут border="1" добавляет рамку вокруг ячеек таблицы.

Основные теги таблиц

<table> - основной тег таблицы.
<tr> - тег для создания строки в таблице.
<td> - тег для создания ячейки в строке.
<th> - тег для создания заголовочной ячейки (обычно выделяется жирным шрифтом и центрируется).

Создание форм в HTML

Формы используются для сбора данных от пользователей. Основной тег для создания формы — <form>. Внутри формы размещаются различные элементы ввода, такие как текстовые поля, кнопки, флажки и радиокнопки.

Пример простой формы

<form action="/submit-form" method="post">
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>

  <input type="submit" value="Отправить">
</form>

В этом примере форма содержит два текстовых поля для имени и email, а также кнопку отправки. Атрибут action указывает, куда отправлять данные формы, а method="post" определяет способ передачи данных.

Основные элементы форм

<form> - основной тег формы.
<input> - тег для создания различных элементов ввода (текст, пароль, чекбокс, радиокнопка).
<label> - тег для создания метки, связанной с элементом ввода.
<button> или <input type="submit"> - кнопка для отправки данных формы.

Заключение

В этом уроке вы узнали, как создавать таблицы для структурирования данных и формы для взаимодействия с пользователями на веб-страницах. Таблицы полезны для отображения информации в виде, удобном для восприятия, а формы позволяют собирать и отправлять данные.

Домашнее задание: Попробуйте создать HTML-документ, содержащий таблицу с информацией и форму для сбора данных от пользователей. Используйте рассмотренные теги и атрибуты, чтобы лучше понять их работу.