Формы: как человек что-то отправляет

HTML-форма — элемент <form> с подписанными полями, через который посетитель отправляет данные на сервер. Браузер проверяет их по атрибутам вроде required.

Форма: главное, ради чего сайт

Всё, что мы делали до сих пор, посетитель читает. Форма единственное место, где он отвечает: оставляет заявку, записывается, заказывает, подписывается. Поэтому именно от неё зависит, получится ли у сайта то, ради чего он создан: ваше главное действие из брифа.

В 2014 году, в этой эпохе нашей машины времени, у форм появилось много нового. В HTML5 пришли типы полей (email, tel, date), встроенная проверка и атрибут autocomplete; телефоны научились показывать нужную клавиатуру. Раньше всё это делали скриптом, а теперь оно встроено в браузер.

Из чего состоит форма

<form action="/zayavka" method="post">
  <label for="f-name">Как к вам обращаться</label>
  <input id="f-name" name="name" type="text" autocomplete="name" required>

  <label for="f-phone">Телефон</label>
  <input id="f-phone" name="phone" type="tel" autocomplete="tel" required>

  <button type="submit">Записаться на консультацию</button>
</form>

• <form> объединяет поля. action говорит, куда отправить данные, method как: get или post.
• <input>: поле. Атрибут type определяет вид и проверку, а name имя, под которым значение уйдёт на сервер. Без name поле не отправится.
• <textarea>: многострочное поле, <select>: выбор из списка.
• <label> это подпись, связанная с полем: у подписи for="f-name", у поля id="f-name". Нажатие на подпись ставит курсор в поле, а программа чтения называет поле по подписи.
• <button type="submit">: отправка. На ней пишут действие («Записаться»), а не «Отправить».

Посмотрите на схему: слева форма, справа запрос, который построит браузер, и сообщения проверки. Переключайте метод и тип поля.

POST /zayavka HTTP/1.1
Host: zarechye.example
Content-Type: application/x-www-form-urlencoded
Content-Length: 56

name=%D0%90%D0%BD%D0%BD%D0%B0&contact=anna%40example.org

GET и POST

GET кладёт данные в адрес: /poisk?q=границы. Так хорошо работает поиск: результат можно сохранить в закладки и переслать ссылкой. POST кладёт данные в тело запроса, а не в адрес. Заявки, регистрации и всё, что меняет что-то на сервере, отправляют именно так. Телефон человека не должен оказаться в истории браузера и в строке адреса.

И конечно, форму отдают и принимают только по HTTPS: иначе тело запроса можно прочитать по дороге. Вы разбирали это в уроке про TLS.

Откуда сервер знает, что делать с данными? У нас пока нет сервера, и мы просто пишем action="/zayavka". В части про серверы вы увидите, что за этим адресом стоит программа. А для статических сайтов, где своего сервера нет, бывают готовые сервисы приёма форм.

Типы полей, подсказки и проверка

Тип подсказывает браузеру, что за данные ждёт поле:

• type="tel" это телефон: на телефоне откроется цифровая клавиатура;
• type="email" это почта: браузер проверит, что есть @;
• type="date", type="number", type="url": дата, число, адрес.

Атрибут autocomplete говорит, что за данные просят: name, tel, email, street-address. Браузер подставит сохранённое значение, и человек заполнит форму за секунды. Это ещё и требование доступности: тем, кому трудно печатать, автозаполнение помогает больше всех.

Проверку включают атрибутами: required (поле обязательно), minlength, pattern (шаблон), min и max. Браузер сам не даст отправить неверную форму и покажет сообщение. Для простых проверок этого достаточно. Но запомните главное: проверка в браузере удобство, а не защита. Запрос можно отправить в обход вашей формы, поэтому сервер всегда проверяет данные заново.

Меньше полей, больше заявок

Каждое поле это препятствие. Спрашивайте только то, без чего вы не можете выполнить действие: для записи это имя и способ связи, остальное можно выяснить потом. Не требуйте то, что у вас уже есть. Не делайте полей «отчество» и «индекс» там, где они не нужны.

Подпись поля пишите для человека, а не для базы данных. «Как к вам обращаться» теплее, чем «ФИО». А на кнопке напишите, что произойдёт: «Записаться на консультацию».

Согласие на обработку персональных данных

Имя и телефон это персональные данные: сведения, по которым можно узнать человека. Если вы их собираете, вы становитесь оператором и должны соблюдать закон «О персональных данных» (152-ФЗ). Подробно о нём в части про право и качество; в форме нужно минимум:

• отдельная галочка согласия, которую посетитель ставит сам. Атрибут checked не используйте, предустановленная галочка согласием не считается;
• согласие отдельное и конкретное: его нельзя прятать в общем соглашении с сайтом. Закон требует, чтобы человек понимал, на что именно соглашается;
• ссылка на политику обработки персональных данных, где написано, какие данные, зачем и как долго хранятся, и как отозвать согласие;
• форма работает по HTTPS.

Это не юридическая консультация, а ориентир для учебного проекта. Для настоящего сайта проверьте тексты согласия и политики у юриста: требования закона меняются, в последний раз в 2025 году.

Практика

Вы начинаете эпоху 2014 года: страница ниже похожа на вашу из 2005-го, но это новая версия сайта (в эпохах машины времени каждый раз собирается своя). Добавьте в неё форму для главного действия вашего проекта.

Если ваше главное действие «позвонить» или «прочитать», форма всё равно полезна как запасной путь: человеку, который не любит звонить, она даёт оставить номер.

Что было не так с формами раньше

Поля подписывали обычным текстом рядом, проверяли только скриптами, которые у кого-то не работали, а телефон просили «в любом формате». Галочек согласия не было вовсе, и данные собирались без всякого уведомления. Сегодня браузер и закон требуют больше. И то и другое защищает человека.