POST-запрос кнопкой HTML без JavaScript: решение

Быстрый ответ

Да, кнопка в HTML может инициировать отправку POST-запроса, если она находится внутри элемента <form> с атрибутом method="post". Атрибут action служит для указания пути отправки данных:

<form action="http://example.com/endpoint" method="POST">
  <button type="submit">Отправить запрос</button>
</form>

Нажатие на кнопку приведет к отправке POST-запроса на указанный URL. Для передачи данных можно использовать элементы <input>.

Как это работает? Магия или технология?

Кнопка с атрибутом type="submit", расположенная внутри формы, обеспечивает, по сути, механизм отправки запроса. При нажатии на нее все элементы <input> с атрибутом name, находящиеся внутри формы, попадают в состав POST-запроса:

<form action="/submit_or_regret" method="post">
  <input type="hidden" name="token" value="secret_elves_token" />
  <button type="submit">Позвать эльфов</button>
</form>

Атрибут name выступает в роли идентификатора, позволяющего серверу определить отправителя данных. Элемент <input> скрыт от пользователя и служит для передачи данных на сервер.

Улучшаем внешний вид кнопки

Текстовое описание на кнопке выполняет в основном декоративную функцию, тогда как атрибут value служит для указания фактических передаваемых данных:

<button type="submit" value="unicorn_magic">Зачарованные гривы!</button>
<!-- 'unicorn_magic' включается в состав POST-запроса -->

Фраза "Зачарованные гривы!" делает кнопку привлекательной для пользователя, а "unicorn_magic" кодирует смысловую информацию.

Скрытые кнопки вне формы

Даже если кнопка не находится внутри элемента <form>, она способна отправлять данные формы. Это обеспечивается посредством атрибута form, указывающего идентификатор формы:

<button type="submit" form="rogueForm">Отправить скрытно</button>
<form id="rogueForm" action="/submit_here_from_the_dark" method="post"></form>

Когда пользователь нажимает на кнопку, активируется форма с идентификатором rogueForm.

Визуализация

Вообразите кнопку как бутылку с посланием:

<button type="submit" form="formID">Кидай!</button>
<form id="formID" action="/submit_destination" method="post">
</form>

Нажатие на кнопку аналогично отправке послания: скрытые данные формы (послание) отправляются к указанному адресату (URL сервера) путем POST-запроса (морских течений).

🛒