15.03.2025

Enviando um Formulário POST Usando a Tag <a> em HTML: Um Guia

Resumo Rápido

Para enviar um formulário usando o método POST com a tag <a>, você precisará de um manipulador onclick que utilize JavaScript para ativar a ação de envio para o formulário. Aqui está um exemplo de código:

<form id="meuFormulario" method="post" action="server-endpoint.php">
  <!-- Coloque os campos do seu formulário aqui -->
</form>
<a href="javascript:void(0);" onclick="document.getElementById('meuFormulario').submit();">Enviar Formulário</a>

Quando o usuário clica no link, o formulário meuFormulario é enviado. O valor href="javascript:void(0);" impede que o link navegue para outra página e inicia a requisição POST.

Fazendo um Botão Parecer um Link (Método Clark Kent)

Se você quiser que um elemento <button> se disfarce de uma tag <a>, o CSS pode ajudar:

button.link-button {
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  font-size: 1em;
  font-family: sans-serif;
}

button.link-button:hover,
button.link-button:focus {
  text-decoration: none;
}

Ao aplicar essa classe, você consegue que o <button> se pareça muito com a tag <a>, enquanto mantém as propriedades do botão.

Gerenciando o Envio do Formulário com JavaScript

Você pode alterar imediatamente os parâmetros do formulário antes de enviá-lo usando JavaScript:

document.getElementById('linkSubmit').addEventListener('click', function() {
  var meuFormulario = document.getElementById('meuFormulario');
  meuFormulario.action = '/DataRetrieval.exe';
  meuFormulario.appendChild(hiddenInput);
  meuFormulario.submit();
});

Essa capacidade permite que você gerencie o comportamento do formulário, adicionando elementos ocultos e alterando o caminho de envio.

Truques Espertos: Campos Ocultos em Formulários

Para passar dados ocultos, você pode usar <input type="hidden">:

<form id="meuFormulario" method="post" action="submit.php">
  <input type="hidden" name="secreto" value="<%=n%>">
  <!-- Outros campos podem ir aqui -->
</form>

Campos ocultos ajudam a transmitir dados POST que o servidor processará posteriormente.

Navegando pelo Território MVC

Ao estudar o padrão arquitetônico Model-View-Controller (MVC), lembre-se do atributo [HttpPost] nos métodos do controlador, que os torna acessíveis apenas por requisições POST:

[HttpPost]
public ActionResult SubmitData(MyModel model) {
  // O processamento de dados ocorre aqui
}

Isso garante a sincronização entre o envio do formulário no lado do cliente e o processamento de dados no servidor.

Visualização

Imagine trilhos de trem onde um trem transporta dados para o servidor, assim como uma estação transporta passageiros:

<form action="destino.php" method="POST">
  <!-- Passageiros são os campos do formulário -->
</form>

Nesse contexto, a tag <a> age como um despachante:

<a href="#" onclick="document.querySelector('form').submit();">Todos a bordo!</a>

Com o comando do link, o formulário seguirá para seu destino junto com todos os dados.

Roteamento vs Comportamento Padrão

Se você estiver usando a tag <a>, certifique-se de interromper o comportamento padrão do navegador:

document.getElementById('linkRedirect').addEventListener('click', function(event) {
  event.preventDefault();
  // É aqui que o envio do formulário começa
});

Dessa forma, você pode evitar mudanças inesperadas de URL ou rolagem de página ao clicar.

Considerando Detalhes Específicos do Navegador

Sempre leve em conta as peculiaridades de renderização específicas do navegador:

• Use pseudo-classes para um comportamento consistente em diferentes navegadores.
• Teste em vários dispositivos para garantir a consistência visual.
• Aplique prefixos de fornecedor para manter a compatibilidade com CSS.

Estruturação Atraente de Formulários

Não negligencie a acessibilidade semântica nos formulários para fins de SEO:

• Elementos <label> bem colocados melhoram a acessibilidade.
• Campos com type="email" e type="url" melhoram a qualidade da validação e a experiência do usuário.
• A ordem dos elementos do formulário pode ser aprimorada usando <fieldset> e <legend>.

Recursos Úteis

1. Enviando uma requisição POST usando JavaScript, semelhante ao envio de um formulário - Stack Overflow
2. Métodos HTTP: GET e POST
3. Usando a API Fetch - Web API | MDN
4. Evento de Envio | Documentação da API jQuery
5. Elemento: Tag de Ancoragem - HTML: Linguagem de Marcação Hipertexto | MDN
6. Buscando dados de um servidor - Aprenda Desenvolvimento Web | MDN
7. Elemento: Evento de Clique - Web API | MDN

Video

Navigation