08.01.2025

Como Evitar o Envio de um Formulário com um Botão Sem JavaScript

Resposta Rápida

Para evitar que um <button> envie um formulário, defina o atributo type="button":

<button type="button">Não Enviar</button>

Adicionar type="button" permite que o botão realize ações sem acionar o envio do formulário.

Abordagem HTML: Usando <input>

Se você quiser evitar JavaScript, use o elemento <input> com o atributo type="button":

<input type="button" value="Não Enviar">

Essa abordagem garante que o botão não inicie o envio do formulário, enquanto permanece dentro do padrão HTML.

Abordagem de Navegação: Combinando <a> e <button>

Para navegar entre páginas sem enviar formulários, use uma combinação dos elementos <a> e <button>:

<a href="sua-url-aqui"><button type="button">Ir para Algum Lugar</button></a>

Esse método é perfeito para criar elementos que se parecem com botões, mas se comportam como links.

Abordagem de Ação: O Atributo onclick

Para atribuir uma ação específica a um botão, utilize o atributo onclick:

<button type="button" onclick="suaFuncao();">Botão de Ação</button>

Com isso, uma função JavaScript irá lidar com os eventos de clique do botão sem afetar o processo de envio do formulário.

Visualização

Vamos considerar um exemplo visual com <button> e envio de formulário:

- Botão Padrão -

🚉 Estação: [📃, 📃, 📃]
🧍 Passageiro `<button>`: [🚪]
Quando o passageiro `<button>` embarca no trem: 🚉🧍 -> 🚂💨 (o `<button>` envia o formulário!)

- Botão com type="button" -

🚉 Estação: [📃, 📃, 📃]
🧍 Passageiro `<button>`: [🚪🛑]
Quando o passageiro `<button>` embarca: 🚉🧍 (Aguarde, não vamos ainda!)

Nota: O sinal 🛑 indica o uso do atributo type="button", que interrompe o processo de envio do formulário.

Abordagens Adicionais: jQuery UI e Estilos Personalizados

Combinar a funcionalidade dos botões e o estilo é um aspecto importante do desenvolvimento web. Se você estiver utilizando bibliotecas como jQuery UI, garanta que seu botão não acione um envio de formulário:

$("button").button().click(function(event) {
  event.preventDefault();
});

Ao trabalhar com bibliotecas externas e personalizar estilos, sempre verifique o atributo type do botão para evitar envios indesejados de formulários.

Garantindo que o Formulário Comporte-se Corretamente

Se você deseja evitar completamente o envio do formulário, utilize o atributo onsubmit:

<form onsubmit="return false;">
  <button type="submit">Eu Não Vou Enviar!</button>
</form>

Esse método é bastante eficaz; no entanto, ele afeta todos os elementos dentro do <form>. Na maioria dos casos, é preferível atribuir manualmente o tipo "button" a cada botão no formulário.

Recursos Úteis

1. <button>: O Elemento de Botão — HTML | MDN — Informações sobre o uso do elemento <button> e seus atributos na MDN.
2. Tag de botão HTML — Descrição de diferentes comportamentos de botões em HTML no W3Schools.
3. Quando Usar o Elemento Button | CSS-Tricks — Discussão sobre melhores práticas para usar <button> no CSS-Tricks.
4. Método preventDefault() de Evento — O método JavaScript preventDefault() para prevenir ações padrão, que você pode aprender no W3Schools.
5. Formulários HTML5: JavaScript e API de Validação de Restrições | SitePoint — Como usar JavaScript e a API de Validação de Restrições para prevenir envios de formulários no SitePoint.
6. Entendendo a Propagação de Eventos | DigitalOcean — Explicação da propagação de eventos em JavaScript na DigitalOcean.
7. Tag de formulário HTML — O W3Schools fornece uma visão geral detalhada da tag <form>.

Video

Navigation