Урок 3.3 — Формы: form, input, button

Формы — это способ собирать информацию от пользователя. Когда вы вводите текст в строку поиска, заполняете регистрацию или оставляете комментарий — вы используете форму. Форма — это контейнер, который группирует поля ввода и отправляет данные на сервер.

Базовые элементы формы:

• <form> — контейнер формы
• <input> — поле для ввода данных
• <label> — подпись к полю (кликабельная!)
• <button> — кнопка отправки
• placeholder — подсказка внутри поля

В этом уроке мы не будем подключать серверную часть — кнопки не будут реально отправлять данные. Но вы узнаете, как правильно создавать формы, и сможете "оживить" их позже, когда изучите JavaScript или серверные языки.

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

У <form> есть два важных атрибута:

• action — URL, куда отправляются данные (например, action="/search")
• method — способ отправки: GET (данные в адресной строке) или POST (данные в теле запроса)

<form action="/search" method="GET">
  
</form>

GET используют для поиска и фильтров (данные видны в URL). POST — для отправки паролей, регистрации (данные скрыты). В наших примерах мы будем использовать GET.

Тег <input> — самый популярный элемент формы. Это поле, в которое пользователь вводит данные. У <input> нет закрывающего тега (он одиночный).

Самый важный атрибут — type. Он определяет, что за поле: text — обычный текст, password — пароль (символы скрыты), email — email, number — число, checkbox — галочка, radio — переключатель и другие.

<form>
  <input type="text">        <!-- Текстовое поле -->
  <input type="password">    <!-- Поле для пароля -->
  <input type="email">       <!-- Поле для email -->
  <input type="number">      <!-- Поле для числа -->
  <input type="checkbox">    <!-- Галочка -->
  <input type="radio">       <!-- Переключатель -->
  <input type="submit">      <!-- Кнопка отправки -->
</form>

Есть ещё type="search" (поисковое поле), type="tel" (телефон), type="url" (ссылка), type="date" (дата), type="color" (выбор цвета), type="file" (загрузка файла). В этом уроке сосредоточимся на базовых.

Важный атрибут <input> — name. Это имя поля, под которым данные отправятся на сервер. Без name данные поля не будут отправлены.

<input type="text" name="username">
<input type="email" name="email">
<input type="password" name="password">

Когда пользователь отправит форму, сервер получит данные как пары имя=значение: username=Иван, email=ivan@mail.ru.

Атрибут placeholder — это текст-подсказка, который отображается внутри поля, пока пользователь ничего не ввёл. Когда пользователь начинает печатать, подсказка исчезает. Это удобно — не нужно подписывать каждое поле снаружи.

<input type="text" name="query" placeholder="Например, котики...">
<input type="email" name="email" placeholder="your@email.com">
<input type="password" name="pass" placeholder="Введите пароль">

Placeholder — это не замена для <label>. Лучше использовать и placeholder, и label. Placeholder подсказывает формат, label объясняет назначение поля.

Не полагайтесь только на placeholder — когда пользователь начнёт вводить текст, подсказка исчезнет. Если поле сложное, лучше использовать label для постоянной подписи.

Тег <label> создаёт подпись к полю ввода. Его главная особенность — кликабельность: если нажать на label, фокус перейдёт в соответствующее поле. Это очень удобно для пользователя, особенно на мобильных устройствах.

Есть два способа связать label с input:

Способ 1: Атрибут for у label совпадает с id у input.

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

Способ 2: Вложить input внутрь label (проще, но менее гибко для стилизации).

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

Мы будем использовать первый способ (с for/id) — он более распространён в реальных проектах и удобнее для стилизации.

Тег <button> создаёт кнопку. Внутри кнопки можно разместить текст, иконку или даже картинку. Это парный тег: <button>Нажми меня</button>.

У <button> есть атрибут type:

• type="submit" — отправляет форму (значение по умолчанию)
• type="button" — просто кнопка (ничего не отправляет, нужна для JavaScript)
• type="reset" — очищает все поля формы

<button type="submit">Отправить</button>
<button type="button">Просто кнопка</button>
<button type="reset">Очистить</button>

Также есть <input type="submit">, который делает то же самое, но <button> удобнее — внутрь можно добавлять иконки и стилизовать более гибко.

Теперь объединим изученное в простую форму с двумя полями:

<form action="/login" method="POST">
  <label for="login">Логин:</label>
  <input type="text" id="login" name="login" placeholder="Введите логин">

  <label for="pass">Пароль:</label>
  <input type="password" id="pass" name="pass" placeholder="Введите пароль">

  <button type="submit">Войти</button>
</form>

Разбор:

• action="/login" — данные отправятся на страницу /login
• method="POST" — пароль не будет виден в адресной строке
• label for="login" → input id="login" — связь подписи с полем
• type="password" — символы скрываются точками
• placeholder — подсказки внутри полей
• button type="submit" — кнопка отправки

Попробуйте создать эту форму на своей странице. Сама форма ещё не работает (нет сервера, который обрабатывает данные), но вы увидите, как она выглядит. Кнопка перезагрузит страницу — это нормальное поведение для GET/POST без сервера.

Создадим форму поиска, как в Яндексе или Google. Она состоит из одного текстового поля и кнопки, а данные отправляются методом GET (чтобы запрос был виден в URL).

<form action="https://www.google.com/search" method="GET">
  <label for="search">Найти в интернете:</label><br>
  <input type="text" id="search" name="q" placeholder="Что ищем?" style="width: 300px; padding: 8px; font-size: 16px;">
  <button type="submit" style="padding: 8px 16px; background: #f97316; color: white; border: none; border-radius: 4px;">Искать</button>
</form>

Обратите внимание: name="q" — именно так называется параметр поиска у Google (?q=запрос). Если вы откроете эту форму в браузере, введёте "котики" и нажмёте кнопку, вы перейдёте на страницу https://www.google.com/search?q=котики!

Вот более красивая версия с обёрткой в стилизованный блок:

<div style="background: #f5f5f5; padding: 30px; border-radius: 12px; max-width: 500px;">
  <h3 style="margin-top: 0;">🔍 Поиск в интернете</h3>
  <form action="https://www.google.com/search" method="GET">
    <label for="search-input" style="display: block; margin-bottom: 8px; font-weight: bold;">
      Введите запрос:
    </label>
    <input type="text" id="search-input" name="q" placeholder="Введите поисковый запрос..."
      style="width: 100%; padding: 10px; font-size: 16px; border: 2px solid #ddd; border-radius: 6px; box-sizing: border-box;">
    <br><br>
    <button type="submit"
      style="background: #f97316; color: white; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer;">
      Найти
    </button>
  </form>
</div>

Здесь мы добавили:

• Серый блок div с закруглениями — карточка формы
• Заголовок с эмодзи для красоты
• box-sizing: border-box — чтобы padding не увеличивал ширину поля
• cursor: pointer — курсор-рука при наведении на кнопку

Теперь создадим форму входа (логин + пароль + кнопка) — то, что встречается на каждом сайте:

<div style="background: #fafafa; padding: 30px; border-radius: 12px; max-width: 400px; border: 1px solid #eee;">
  <h3 style="margin-top: 0; text-align: center;">🔐 Вход на сайт</h3>

  <form action="/login" method="POST">
    <div style="margin-bottom: 15px;">
      <label for="login-email" style="display: block; margin-bottom: 5px; font-weight: bold;">Email:</label>
      <input type="email" id="login-email" name="email" placeholder="your@email.com"
        style="width: 100%; padding: 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box;">
    </div>

    <div style="margin-bottom: 15px;">
      <label for="login-pass" style="display: block; margin-bottom: 5px; font-weight: bold;">Пароль:</label>
      <input type="password" id="login-pass" name="password" placeholder="Введите пароль"
        style="width: 100%; padding: 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box;">
    </div>

    <button type="submit"
      style="width: 100%; background: #ea580c; color: white; padding: 12px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer;">
      Войти
    </button>

    <p style="text-align: center; margin-top: 15px; font-size: 14px; color: #666;">
      Нет аккаунта? <a href="#" style="color: #ea580c;">Зарегистрируйтесь</a>
    </p>
  </form>
</div>

Разбор элементов формы входа:

• Каждое поле обёрнуто в <div> для отступа снизу (margin-bottom)
• type="email" — браузер проверит, что введён корректный email
• type="password" — скрывает символы
• Кнопка на всю ширину (width: 100%) — популярный дизайн
• Ссылка "Зарегистрируйтесь" под формой

Давайте добавим больше полей — создадим форму регистрации с именем, email, паролем, датой рождения и переключателем пола:

<div style="background: linear-gradient(135deg, #fff7ed, #ffedd5); padding: 30px; border-radius: 12px; max-width: 450px;">
  <h3 style="margin-top: 0; color: #c2410c;">📝 Регистрация</h3>

  <form action="/register" method="POST">
    <div style="margin-bottom: 12px;">
      <label for="reg-name">Имя:</label><br>
      <input type="text" id="reg-name" name="name" placeholder="Ваше имя"
        style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
    </div>

    <div style="margin-bottom: 12px;">
      <label for="reg-email">Email:</label><br>
      <input type="email" id="reg-email" name="email" placeholder="your@email.com"
        style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
    </div>

    <div style="margin-bottom: 12px;">
      <label for="reg-pass">Пароль:</label><br>
      <input type="password" id="reg-pass" name="password" placeholder="Придумайте пароль"
        style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
    </div>

    <div style="margin-bottom: 12px;">
      <label for="reg-birth">Дата рождения:</label><br>
      <input type="date" id="reg-birth" name="birthday"
        style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
    </div>

    <div style="margin-bottom: 15px;">
      <span style="font-weight: bold;">Пол:</span><br>
      <input type="radio" id="gender-m" name="gender" value="male">
      <label for="gender-m">Мужской</label><br>
      <input type="radio" id="gender-f" name="gender" value="female">
      <label for="gender-f">Женский</label>
    </div>

    <button type="submit"
      style="width: 100%; background: #ea580c; color: white; padding: 12px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer;">
      Зарегистрироваться
    </button>
  </form>
</div>

Новые элементы:

• type="date" — календарь для выбора даты
• type="radio" — переключатели; одинаковый name группирует их, value — значение, которое отправится на сервер
• background: linear-gradient(...) — красивый градиентный фон карточки (скоро изучим CSS подробнее)

Обратите внимание: у радио-кнопок одинаковый name="gender", поэтому выбрать можно только один вариант. У каждой свой value — "male" или "female".

Забыли name. Без name данные поля не отправляются на сервер. Это одна из самых частых ошибок.

Забыли for/id связь. Label без for не связан с полем — клик не переводит фокус. Это плохо для доступности.

Неправильный type. Для пароля используйте type="password", для email — type="email". Неправильный type может привести к утечке данных или некорректной валидации.

Нет placeholder. Поле без подсказки заставляет пользователя гадать, что вводить. Placeholder — хорошая практика.

Незакрытый тег. Всегда проверяйте, что <form> и <button> закрыты.

• <form> — контейнер формы с атрибутами action и method
• <input type="text"> — текстовое поле; также password, email, date, radio, checkbox
• placeholder — подсказка внутри поля
• <label for="id"> — подпись, клик переводит фокус в поле
• <button> — кнопка отправки (submit), простая (button), сброс (reset)
• name — обязателен для отправки данных на сервер
• value — значение, которое отправляется (для radio и checkbox обязательно)

Потренируйтесь: создайте форму поиска, форму входа, форму регистрации. Добавьте чекбокс "Я согласен с условиями". Поэкспериментируйте с разными типами input. В следующем модуле начинаем изучать CSS!