HTML — формы: первое знакомство с input, label, button

HTML-формы — это базовый инструмент для сбора данных от пользователя: от простого поиска до регистрации и отправки заказов. В этой статье разберём три ключевых элемента: <input>, <label> и <button> — и покажем, как их использовать правильно и удобно.

Зачем вообще нужна форма

Форма задаётся тегом <form>. Он не отображает ничего видимого, но задаёт контекст: куда и как отправлять данные. Минимальный пример:

<form action="/submit" method="post">
  <!-- поля и кнопки будут здесь -->
</form>

• action — адрес, куда уйдут данные.
• method — способ отправки: чаще всего post (для отправки данных) или get (для поисковых запросов).

Теперь посмотрим, из чего состоит содержимое формы.

<input>: самое универсальное поле

Тег <input> — это «рабочая лошадка» форм. Он меняет поведение в зависимости от атрибута type.

Самые частые типы

• type="text" — обычное текстовое поле.
• type="email" — поле для e-mail (браузер может проверить формат).
• type="password" — ввод пароля (символы скрываются).
• type="number" — числовое поле (часто с кнопками «вверх/вниз»).
• type="checkbox" — флажок (можно выбрать несколько вариантов).
• type="radio" — переключатель (только один вариант из группы).
• type="submit" — кнопка отправки (специальный тип input).

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

<form action="/signup" method="post">
  <label for="username">Имя пользователя:</label>
  <input type="text" id="username" name="username">
 
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email">
 
  <label>
    <input type="checkbox" name="agree">
    Я согласен с условиями
  </label>
 
  <button type="submit">Зарегистрироваться</button>
</form>

Важные атрибуты

• name — имя поля, по которому сервер получит значение. Без него данные не отправятся.
• id — уникальный идентификатор, нужен для связи с <label>.
• placeholder — подсказка внутри поля (не заменяет <label>).
• required — делает поле обязательным для заполнения.

Пример с обязательными полями и подсказками:

<input type="text" name="city" id="city" placeholder="Например, Москва" required>

<label>: подписи к полям

<label> связывает текст с полем ввода. Это важно не только для понятности, но и для доступности: клик по подписи активирует поле, а скринридеры читают подпись.

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

Способ 1: атрибут for (рекомендуется)

<label for="age">Возраст:</label>
<input type="number" id="age" name="age">

Возраст:

Здесь for ссылается на id поля. Это самый надёжный вариант.

Способ 2: вложение <input> внутрь <label>

<label>
  Возраст:
  <input type="number" name="age">
</label>

Это удобно, когда не хочется придумывать id и for. Но если нужно сложное оформление, первый способ удобнее.

<button>: кнопки действий

Для кнопок лучше использовать тег <button>, а не <input type="submit">. У <button> больше гибкости и понятнее семантика.

Типы кнопок

• type="submit" — отправить форму (по умолчанию в форме).
• type="reset" — очистить все поля формы.
• type="button" — обычная кнопка (нужна для JavaScript-действий).

Примеры:

<!-- Отправка формы -->
<button type="submit">Отправить</button>
 
<!-- Сброс формы -->
<button type="reset">Очистить</button>
 
<!-- Кнопка для JS -->
<button type="button" onclick="doSomething()">Действие</button>

Отправить

Очистить

Действие

Если в форме несколько кнопок, всегда указывайте type, чтобы избежать путаницы.

Практический пример: форма обратной связи

Соберём всё вместе: подписи, обязательные поля, разные типы ввода и понятные кнопки.

<form action="/feedback" method="post">
  <h3>Обратная связь</h3>
 
  <div>
    <label for="name">Ваше имя:</label>
    <input
      type="text"
      id="name"
      name="name"
      placeholder="Иван Иванов"
      required
    >
  </div>
 
  <div>
    <label for="phone">Телефон:</label>
    <input
      type="tel"
      id="phone"
      name="phone"
      placeholder="+7 (999) 000-00-00"
    >
  </div>
 
  <div>
    <label for="message">Сообщение:</label>
    <textarea id="message" name="message" rows="4" cols="30" required></textarea>
  </div>
 
  <div>
    <label>
      <input type="checkbox" name="subscribe" checked>
      Получать рассылку
    </label>
  </div>
 
  <button type="submit">Отправить сообщение</button>
  <button type="reset">Очистить форму</button>
</form>

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