Форма и её отправка

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

Форма (<form>) — контейнер для полей ввода, который умеет отправлять введённые данные на сервер.

Зачем нужны формы

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

Контейнер <form>

Все поля ввода складывают внутрь <form>. У формы два главных атрибута:

action — адрес, куда отправить данные (на какой обработчик);
method — каким способом отправить: get или post.

<form action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit">Отправить</button>
</form>

Когда пользователь нажимает кнопку отправки, браузер собирает значения всех полей и отправляет их по адресу из action.

GET или POST

Два метода отличаются тем, как передаются данные:

Метод	Особенности	Когда
`get`	данные видны в адресной строке (после `?`)	поиск, фильтры
`post`	данные передаются скрыто, в теле запроса	пароли, регистрация, отправка файлов

Простое правило: если данные секретные или их много (пароль, личные данные, файлы) — post. Если это безобидный запрос, который не страшно увидеть в адресе (поисковая строка) — get.

Атрибут name — ключ к данным

Каждое поле должно иметь атрибут name. Именно под этим именем сервер получит значение поля. Без name поле отправлено не будет — это частая ошибка новичков. Думайте о name как о подписи на коробке: без неё непонятно, что внутри.

Что происходит после нажатия кнопки

Полезно понимать общую картину. Когда пользователь жмёт «Отправить», браузер собирает пары «name поля = введённое значение» и упаковывает их в запрос. Например, форма с полем username, куда ввели «anna», отправит на сервер примерно «username=anna». Дальше эти данные принимает и обрабатывает программа на сервере: сохраняет в базу, проверяет пароль, отправляет письмо.

Важно понимать границу: сам HTML данные не обрабатывает. Его задача — собрать ввод и отправить. Что делать с данными дальше — это уже работа серверного кода (на Python, PHP, Node.js и т. п.), который вы изучите позже. Поэтому если открыть форму как простой файл с диска, кнопка «отправит» данные в никуда — обрабатывать их пока некому. Это нормально: на этом этапе мы учимся строить саму форму, а не сервер.

Итог

<form> собирает поля ввода и отправляет их данные на сервер.
action — куда отправить, method — как (get или post).
У каждого поля нужен name, иначе его значение не отправится.