Формы: теги <form>, <input>, <textarea>, <select>, <option>, <button>

Введение в HTML-формы 🌟

HTML-формы — это мощный инструмент для сбора данных от пользователей. Будь то регистрация на сайте, поиск или отправка отзыва — без форм не обойтись! Давайте разберёмся, как они работают.

Тег <form> — основа всего

Форма начинается с тега <form>. Это контейнер для всех элементов ввода. Два ключевых атрибута:

• action — куда отправлять данные
• method — как отправлять (GET или POST)

<form action="/submit" method="POST">
  <!-- Элементы формы будут здесь -->
</form>

Элемент <input> — ваш главный помощник 🛠️

<input> — самый популярный элемент форм. Его поведение меняется с атрибутом type:

<input type="text" placeholder="Имя">         <!-- Текстовое поле -->
<input type="password" placeholder="Пароль">  <!-- Пароль (точки) -->
<input type="email" placeholder="Email">      <!-- Валидация email -->
<input type="checkbox" id="agree">            <!-- Чекбокс -->
<label for="agree">Я согласен</label>         <!-- Подпись к чекбоксу -->

Простое, но мощное правило: всегда связывайте чекбоксы и радиокнопки с <label> через атрибут for!

<textarea> — для длинного текста 📝

Когда одного строкового поля мало:

<textarea rows="5" cols="30" placeholder="Ваш комментарий..."></textarea>

Особенности: - Можно растягивать мышкой (если не запрещено в CSS) - Поддерживает атрибуты rows и cols для базовых размеров

Выпадающие списки (<select> + <option>) 🎯

Идеально для выбора из множества вариантов:

<select name="city">
  <option value="">-- Выберите город --</option>
  <option value="moscow">Москва</option>
  <option value="spb">Санкт-Петербург</option>
  <option value="kazan">Казань</option>
</select>

Секрет: добавьте пустой <option> первым элементом для подсказки!

Кнопки (<button>) — завершающий штрих ✨

Три типа кнопок в формах:

<button type="submit">Отправить</button>  <!-- Отправка формы -->
<button type="reset">Сбросить</button>    <!-- Очистка формы -->
<button type="button">Просто кнопка</button> <!-- Для JavaScript -->

Важно: всегда указывайте type, иначе некоторые браузеры будут считать кнопку submit по умолчанию!

Пример: форма регистрации 🔥

Соберём всё вместе в реалистичном примере:

<form action="/register" method="POST">
  <h3>Регистрация</h3>

  <label>
    Имя пользователя:
    <input type="text" name="username" required>
  </label>

  <label>
    Пароль:
    <input type="password" name="password" minlength="8" required>
  </label>

  <label>
    О себе:
    <textarea name="bio"></textarea>
  </label>

  <label>
    Город:
    <select name="city" required>
      <option value="">-- Выберите --</option>
      <option value="moscow">Москва</option>
      <option value="spb">Санкт-Петербург</option>
    </select>
  </label>

  <button type="submit">Зарегистрироваться</button>
</form>

Обратите внимание на: - Атрибут required для обязательных полей - minlength для минимальной длины пароля - Вложенные <label> для лучшей доступности

Важные атрибуты, о которых стоит знать 🧠

• disabled — отключает элемент
• readonly — только для чтения (отличается от disabled)
• autocomplete — управление автозаполнением
• pattern — проверка по регулярному выражению
• multiple — для множественного выбора в <select>

<input type="text" pattern="[A-Za-z]{3}" title="3 латинские буквы">

Лучшие практики 🏆

1. Всегда используйте <label> — это важно для доступности!
2. Группируйте связанные элементы с <fieldset> и <legend>
3. Выбирайте правильные type для <input> (например, type="email" для почты)
4. Добавляйте required к обязательным полям
5. Тестируйте на мобильных устройствах — формы должны быть удобными везде!

<fieldset>
  <legend>Контактная информация</legend>
  <!-- поля формы -->
</fieldset>