Requisição POST em HTML com um Botão Sem JavaScript: Uma Solução
Resposta Rápida
Sim, um botão HTML pode iniciar uma requisição POST se estiver dentro de um elemento <form> com o atributo method="post". O atributo action especifica o destino para o envio dos dados:
<form action="http://exemplo.com/endpoint" method="POST">
<button type="submit">Enviar Requisição</button>
</form>Clicando no botão, será enviada uma requisição POST para a URL especificada. Para transmitir dados, você pode usar elementos <input>.
Como Funciona? Magia ou Tecnologia?
Um botão com o atributo type="submit" posicionado dentro de um formulário oferece, essencialmente, o mecanismo para enviar a requisição. Quando clicado, todos os elementos <input> com o atributo name, localizados dentro do formulário, são incluídos na requisição POST:
<form action="/submeter_ou_arrepender" method="post">
<input type="hidden" name="token" value="token_secreto_de_fadas" />
<button type="submit">Chamar as Fadas</button>
</form>O atributo name atua como um identificador, permitindo que o servidor identifique o remetente dos dados. O elemento <input> fica oculto do usuário e serve para transmitir dados ao servidor.
Melhorando a Aparência do Botão
A descrição em texto no botão tem uma função principalmente decorativa, enquanto o atributo value indica os dados reais que estão sendo enviados:
<button type="submit" value="magia_unicornio">Jubinhas Encantadas!</button>
<!-- 'magia_unicornio' está incluído na requisição POST -->A frase "Jubinhas Encantadas!" torna o botão atraente para o usuário, enquanto "magia_unicornio" codifica informações significativas.
Botões Ocultos Fora de um Formulário
Mesmo que o botão não esteja dentro de um elemento <form>, ele ainda pode submeter dados do formulário. Isso é conseguido através do atributo form, que especifica o ID do formulário:
<button type="submit" form="formularioRogue">Submeter Secretamente</button>
<form id="formularioRogue" action="/submeter_aqui_do_escuro" method="post"></form>Quando o usuário clica no botão, o formulário com o ID formularioRogue é ativado.
Visualização
Imagine o botão como uma garrafa com uma mensagem:
<button type="submit" form="formID">Jogar!</button>
<form id="formID" action="/destino_da_submissao" method="post"></form>Clicar no botão é semelhante a enviar uma mensagem: os dados do formulário oculto (a mensagem) são enviados ao destinatário especificado (a URL do servidor) via uma requisição POST (as correntes oceânicas).
🛒