Criar botão que não envia formulário em HTML

Neste artigo você vai aprender a como criar botão que não envia formulário, ou seja, um botão dentro de um form que não dá um submit

Fala programador(a), beleza? Bora aprender mais sobre a tag button e formulários de HTML!

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Quando criamos um button dentro de um form, ele automaticamente faz o submit quando clicado

Este é o comportamento padrão, pois o atributo que um button tem por padrão é o type com valor de submit

Então para não enviar um form precisamos mudar este atributo

Veja o que pode ser feito:

<button type="button">Do something</button>

Agora o comportamento de envio não é mais válido, o botão não funciona mais como um submit

E é exatamente o que precisamos, agora este botão pode fazer outra coisa ao invés de enviar o formulário

Outra abordagem possível é utilizar o preventDefault no evento que este botão estiver realizando, com a linguagem JavaScript

Conclusão

Neste artigo você aprendeu a como criar botão que não envia formulário

Basicamente precisamos mudar o atributo type para button, isso faz a mágica toda

Pois o valor padrão do atributo é submit, o que faz o envio do form

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!