15.03.2025

Enviando um Formulário Usando um Link Normal em HTML

Visão Geral Rápida

Para enviar um formulário através de um link usando JavaScript, você pode usar o seguinte código:

<!-- O link se parece com um botão de envio, uma solução interessante! -->
<a href="javascript:void(0);" id="link-enviar-formulario">Enviar o Formulário</a>

<!-- O formulário está definido como oculto -->
<form id="formulario-oculto">
    <!-- todos os elementos do formulário -->
</form>

<script>
    document.getElementById('link-enviar-formulario').addEventListener('click', function() {
        document.getElementById('formulario-oculto').submit();
    });
</script>

Não esqueça de substituir os IDs do link e do formulário ('link-enviar-formulario' e 'formulario-oculto') pelos identificadores relevantes do seu código.

Personalizando a Aparência do Botão de Envio para Parecer com um Link

Se você quiser que o botão de envio tenha uma aparência menos formal e se assemelhe a um link normal, aplique os seguintes estilos CSS:

.botao-como-link {
    background: none;
    border: none;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

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

<form id="formulario-bruce-wayne">
    <!-- todos os elementos do formulário -->
    <input class="botao-como-link" type="submit" value="Enviar o Formulário">
</form>

O código CSS fornecido transforma o botão em um link regular.

Usando Botões de Imagem para Envio de Formulário

<form id="imagem-este">
    <!-- todos os elementos do formulário -->
    <input type="image" src="sua-imagem.png" alt="Enviar o Formulário" />
</form>

Neste exemplo, o botão envia o formulário usando imagens, que podem ser comparadas a um sinal que indica a função submit() do formulário.

Implementando a Lógica de Envio com EventListener do JavaScript

Você pode adicionar um event listener em JavaScript para obter mais controle sobre o envio do formulário:

document.querySelector('.link-disfarçado').addEventListener('click', function(e) {
    e.preventDefault(); // Impede o comportamento padrão do link
    let form = this.closest('form'); // Encontra o formulário mais próximo

    if(form) {
        form.submit(); // Envia o formulário
    }
});

Controle Avançado do Formulário Usando AJAX

document.querySelector('.link-ajax').addEventListener('click', function(e) {
    e.preventDefault();

    let formData = new FormData(document.querySelector('#formulario-ajax'));

    fetch('/enviar', {
        method: 'POST',
        body: formData
    }).then(response => {
        // Trate a resposta do servidor. Quem quer se divertir um pouco?
    });
});

Neste caso, o link pode ser comparado a um veículo de alta tecnologia equipado com todos os recursos, incluindo AJAX.

Visualização

Imagine como o link gerencia o envio de dados:

• O usuário interage com a página da web, inserindo informações nos campos do formulário, que, assim como passageiros, estão preparados para serem enviados ao servidor—seu destino.
• Ao clicar no botão "enviar" padrão, os dados são enviados para o destino como passageiros de ônibus.
• No entanto, quando um link é usado para enviar o formulário, os dados se assemelham a um helicóptero, que entrega rapidamente e com precisão ao seu destino.

Acessibilidade em Formulários

No interesse da acessibilidade, use o elemento <button> estilizado para parecer um link:

<form>
    <!-- elementos do formulário -->
    <button type="submit" class="botao-como-link">Enviar o Formulário</button>
</form>

Isso permite que os leitores de tela interpretem melhor sua página, garantindo acessibilidade para todos.

Recursos Úteis

1. <form>: O elemento Form - HTML: Linguagem de Marcação Hipertexto | MDN — Guia para elementos de formulário HTML.
2. <a>: O elemento Anexo - HTML: Linguagem de Marcação Hipertexto | MDN — Guia para elementos de anexo.
3. evento submit | Documentação da API jQuery — Descrição do método .submit().
4. Evento: método preventDefault() - APIs Web | MDN — Como usar 'Event.preventDefault()'.
5. O que significa "javascript:void(0)"? - Stack Overflow — Discussão sobre o uso de javascript:void(0) no Stack Overflow.
6. Padrão HTML — Padrão semântico para elementos de nível de texto, incluindo <a>.
7. EventListener do DOM em JavaScript — Guia sobre como usar event listeners em JavaScript.

Navigation