Формы — основы

Формы — способ взаимодействия пользователя со страницей. Основные теги: <form> — контейнер формы, <input> — поле ввода (текст, пароль, чекбокс), <label> — подпись к полю (важно для доступности!), <button> — кнопка отправки.

Структура формы:

<form action="/submit" method="POST"> <label for="name">Имя:</label> <input type="text" id="name" name="name"> <button type="submit">Отправить</button> </form>

Теги формы:

• <form> — контейнер. Атрибуты:

- action — URL, куда отправляются данные - method — GET (URL) или POST (тело запроса)

• <input> — поле ввода. Основные типы:

- type="text" — текстовое поле - type="password" — пароль (скрытый) - type="email" — email с валидацией - type="number" — числовое поле - type="checkbox" — чекбокс - type="radio" — радиокнопка - type="submit" — кнопка отправки - type="reset" — кнопка сброса - type="date" — выбор даты

• <label> — подпись к полю:

- for="id" — связывает с полем (для доступности) - При клике на label фокус перемещается в поле

• <button> — кнопка:

- type="submit" — отправляет форму - type="reset" — сбрасывает форму - type="button" — обычная кнопка

Форма — как бланк в банке. <form> — сам бланк. <input> — поле для заполнения. <label> — подпись над полем («Ваше имя»). <button> — кнопка «Отправить». Без подписи (label) пользователь не поймёт, что заполнять.

**Самый простой:**

<form>
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Отправить</button>
</form>

Минимальная форма: поле для имени и кнопка отправки.

**Простой:**

<form action="/register" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="pass">Пароль:</label>
  <input type="password" id="pass" name="password" required>

  <label>
    <input type="checkbox" name="agree" required>
    Я согласен с условиями
  </label>

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

Форма регистрации с email, паролем и чекбоксом. Атрибут required — обязательное поле.

**Реальный пример:**

<form action="/contact" method="POST">
  <h2>Свяжитесь с нами</h2>

  <label for="fname">Имя:</label>
  <input type="text" id="fname" name="first_name" required>

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

  <label for="topic">Тема:</label>
  <select id="topic" name="topic">
    <option value="">Выберите тему</option>
    <option value="question">Вопрос</option>
    <option value="bug">Ошибка</option>
    <option value="idea">Идея</option>
  </select>

  <label for="msg">Сообщение:</label>
  <textarea id="msg" name="message" rows="5" required></textarea>

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

Полноценная форма контакта с select и textarea.

**Неправильно:** Не использовать <label>

**Почему:** Без label пользователь не знает, что заполнять. Скринридеры не могут прочитать поле без подписи.

**Правильно:** Всегда связывайте label с input через for/id: <label for="x">... <input id="x">.

**Неправильно:** Не указывать name у input

**Почему:** name — это ключ, по которому сервер получает значение. Без name данные не отправятся.

**Правильно:** Каждый input должен иметь атрибут name.

**Неправильно:** Использовать <div> вместо <label>

**Почему:** div не связан с полем семантически. Скринридер не поймёт, что div — это подпись к полю.

**Правильно:** Используйте <label for="id"> для связи подписи с полем.

• <label> обязателен для каждого поля (для доступности)
• for/id связывают label с input
• name — ключ для отправки данных на сервер
• type определяет вид поля (text, email, password, etc.)
• required — обязательное поле

Назад: Вы знаете таблицы (H10) — формы это ещё один способ структурировать пользовательские данные.

Вперёд: В следующем уроке (H12) вы изучите продвинутые формы: валидацию, select, textarea и fieldset.

• MDN: формы в HTML
• MDN: руководство по формам