Формы — это то, как сайт получает информацию от пользователя: заявки, регистрации, обратная связь, поиск, оформление заказа. Без форм сайт остаётся «витриной», по которой можно только смотреть. Умение собрать понятную и правильную форму — обязательный навык фронтендера, ведь именно через формы происходит большинство важных действий на сайтах.

После этого урока вы сможете построить полноценную форму из полей ввода, многострочного текста, выпадающего списка и кнопки, правильно связав подписи с полями.

Что уже умеем / что добавим

Вы владеете семантической разметкой и правильно выбираете кнопки и ссылки. Теперь научимся собирать формы. В сквозном проекте мы добавим на сайт компании секцию с формой обратной связи.

Что вы узнаете в рамках статьи

• Для чего служит контейнер form.
• Как создавать поля ввода тегом input.
• Зачем нужны подписи label и как их связывать с полями.
• Как добавлять многострочное поле textarea и список select.
• Как кнопка отправляет форму.

Ключевые термины

• form — контейнер формы, объединяющий поля.
• input — однострочное поле ввода.
• label — подпись к полю формы.
• textarea — многострочное поле ввода.
• select — выпадающий список вариантов.
• button — кнопка, в форме обычно отправляющая её.

Контейнер form

Любая форма начинается с тега form — он объединяет все поля в единое целое и отвечает за отправку данных:

<form>
  <!-- сюда помещаются поля и кнопка -->
</form>

Сам по себе form невидим, но именно он собирает значения полей и передаёт их при отправке. У формы есть атрибуты action (куда отправлять данные) и method (как отправлять), но для учебной вёрстки нам достаточно понимать, что все поля должны лежать внутри form. Это контейнер, задающий форме границы.

Поля ввода и подписи

Основной элемент формы — input, однострочное поле ввода. Рядом с каждым полем должна быть подпись label, объясняющая, что вводить. Подпись и поле связывают через атрибуты for и id:

<label for="name">Ваше имя</label>
<input type="text" id="name">

Значение for у подписи должно совпадать с id поля — так браузер понимает, что они связаны. Это даёт важный эффект: клик по подписи ставит курсор в поле, а скринридер зачитывает подпись при переходе к полю. Связка label + input — обязательная основа доступных форм, не пропускайте её.

Многострочное поле textarea

Когда нужно ввести длинный текст — сообщение, комментарий, отзыв, — однострочного input мало. Для этого есть textarea, многострочное поле:

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

В отличие от одиночного input, у textarea есть закрывающий тег. Атрибут rows задаёт видимую высоту в строках. Такое поле пользователь может растянуть и ввести в него сколько угодно текста. Его используют для сообщений в формах обратной связи, комментариев и любых развёрнутых ответов.

Выпадающий список select

Когда вариантов ответа немного и они известны заранее, удобнее не заставлять пользователя печатать, а дать выбор. Выпадающий список создаётся тегом select, а его пункты — тегами option:

<label for="topic">Тема обращения</label>
<select id="topic">
  <option>Вопрос по услуге</option>
  <option>Сотрудничество</option>
  <option>Другое</option>
</select>

Пользователь кликает по списку и выбирает один из вариантов. Каждый пункт — отдельный option. Списки удобны для заранее определённых наборов: страна, тема обращения, способ доставки. Они экономят время пользователя и исключают опечатки.

Кнопка отправки

Завершает форму кнопка. Внутри формы button по умолчанию отправляет её — собирает значения всех полей и передаёт их:

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

Атрибут type="submit" явно указывает, что это кнопка отправки (это же поведение и по умолчанию внутри формы). При нажатии форма пытается отправиться. Именно к этой кнопке позже привязывается вся обработка формы. Пока нам важно, что каждая форма завершается кнопкой отправки.

Применяем в проекте

Добавим на сайт секцию с формой обратной связи. Соберём поля: имя, email, тему обращения списком, сообщение и кнопку отправки — с правильными подписями.

<section class="contact">
  <h2>Свяжитесь с нами</h2>
  <form>
    <label for="name">Ваше имя</label>
    <input type="text" id="name">

    <label for="email">Email</label>
    <input type="text" id="email">

    <label for="topic">Тема обращения</label>
    <select id="topic">
      <option>Вопрос по услуге</option>
      <option>Сотрудничество</option>
      <option>Другое</option>
    </select>

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

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

Обновите страницу: на сайте появилась рабочая форма обратной связи с подписанными полями, выпадающим списком тем, полем для сообщения и кнопкой. Каждая подпись связана со своим полем через for и id. Пока форма выглядит просто — оформим и настроим её на следующих уроках, но основа уже готова.

Частые ошибки

• Поле без label.
  У каждого поля должна быть подпись, связанная через for и id.
• Несовпадение for и id.
  Значения должны точно совпадать, иначе связь подписи и поля не работает.
• input с закрывающим тегом.
  input одиночный; закрывающий тег нужен textarea, но не ему.
• Поля вне form.
  Чтобы данные собирались и отправлялись, поля должны быть внутри form.

Итоги

Отличная работа — вы научились собирать формы! Теперь вы знаете, как объединять поля в form, создавать поля ввода input, связывать их с подписями label, добавлять многострочный textarea, выпадающий select и кнопку отправки. Это основа взаимодействия сайта с пользователем. Ваш сайт компании обзавёлся настоящей формой обратной связи.

Прекрасное начало раздела о формах! В следующем уроке разберём типы полей ввода и их атрибуты — они делают формы удобнее и умнее.