Формы и таблицы в HTML: просто, понятно и без занудства

Формы: введение и основные элементы

Форма (<form>) — это контейнер, в котором пользователь вводит данные и отправляет их на сервер.

Тег <form> и его атрибуты

<form action="https://example.com/submit" method="POST">
  <!-- Здесь будут поля ввода и кнопка отправки -->
</form>

• action — URL, куда отправляются данные.
• method — способ отправки (GET или POST):
  • GET — данные передаются в URL (подходит для поиска).
  • POST — данные передаются в теле запроса (используется для логина, регистрации и т. д.).

Поля ввода: <input>

Тег <input> бывает разным, в зависимости от типа данных. Вот самые популярные:

<input type="text" placeholder="Введите текст">
<input type="email" placeholder="Ваш email">
<input type="password" placeholder="Пароль">
<input type="number" placeholder="Введите число">
<input type="date">
<input type="file">

Результат:

• placeholder — текст-подсказка внутри поля.
• type="email" и другие — заставляют браузер проверять вводимые данные (например, email должен быть формата name@domain.com).

Чекбоксы и радиокнопки

Чекбоксы (checkbox) позволяют выбрать несколько значений, а радиокнопки (radio) — только одно из группы.

<label><input type="checkbox" checked> Я согласен с условиями</label>
<label><input type="checkbox"> Подписаться на рассылку</label>

<label><input type="radio" name="gender" value="male"> Мужской</label>
<label><input type="radio" name="gender" value="female"> Женский</label>

Результат:

У радиокнопок должен быть один name, чтобы они работали как группа.

Кнопки: <button> и <input type="submit">

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

Результат:

• <button> более гибкий: можно вставлять иконки, текст, стилизовать как угодно.
• <input type="submit"> проще, но не дает так много возможностей для кастомизации.

Лайфхак: Валидация форм встроенными атрибутами

Зачем писать кучу JS-кода для проверки полей, если HTML уже умеет это сам?

<input type="email" required>
<input type="password" minlength="6" required>
<input type="text" pattern="[A-Za-z]+" title="Только буквы">

Результат при наведении на поле ввода курсором:

• required — делает поле обязательным.
• minlength / maxlength — задает минимальную и максимальную длину ввода.
• pattern — регулярное выражение для проверки (например, только буквы).

Браузер сам покажет ошибку, если данные введены неправильно!

Таблицы

Базовые теги

Таблица (<table>) — это мощный инструмент для отображения структурированных данных.

<table>
  <caption>Список пользователей</caption>
  <tr>
    <th>ID</th>
    <th>Имя</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Алекс</td>
    <td>alex@example.com</td>
  </tr>
</table>

Теги:

• <table> — основа таблицы.
• <tr> (table row) — строка.
• <td> (table data) — ячейка данных.
• <th> (table header) — заголовок колонки (обычно жирный).
• <caption> — заголовок таблицы.

Объединение ячеек: rowspan, colspan

Иногда нужно объединить несколько ячеек по вертикали или горизонтали.

<table border="1">
  <tr>
    <th rowspan="2">Имя</th>
    <th colspan="2">Контакты</th>
  </tr>
  <tr>
    <th>Email</th>
    <th>Телефон</th>
  </tr>
  <tr>
    <td>Алекс</td>
    <td>alex@example.com</td>
    <td>+123456789</td>
  </tr>
</table>

• rowspan="2" — объединяет ячейки по вертикали (занимает 2 строки).
• colspan="2" — объединяет ячейки по горизонтали (занимает 2 колонки).

Стилизация таблиц с CSS

Голая таблица выглядит скучно. Давай добавим ей стиля!

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

th {
  background-color: #f4f4f4;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

Фишки:

• border-collapse: collapse; — убирает двойные границы.
• nth-child(even) — делает четные строки светлее (зебра-стиль).

Лайфхак: Адаптивные таблицы

Таблицы плохо адаптируются к мобильным экранам, но есть решение!

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

Итог: теперь при узком экране таблица прокручивается горизонтально вместо того, чтобы ломаться.