HTML

Usar input submit ou button submit nos formulários do HTML?

7 de julho de 2020

Usar input submit ou button submit nos formulários do HTML?

Neste artigo você verá quando usar input submit ou button submit nos formulários do HTML nas suas páginas e qual é a melhor abordagem

qual usar input submit ou button submit html form capa

Fala programador(a), tudo bem? Bora aprender mais sobre HTML e seus formulários!

A grande surpresa é que do ponto de vista funcional, não há qualquer diferença entre ambas as abordagens

Ou seja, você pode utilizar tanto o input com o type de submit, quanto o button, que as páginas e formulários do HTML receberão a sua requisição da mesma forma

Cabe ressaltar que um button sem o atributo type, apresentará o comportamento de submit por padrão

E então qual é a diferença?

Está nas possibilidades de estilização!

Na tag de input, não podemos adicionar HTML a ela, pois ela já tem um fechamento automático

Logo, o conteúdo de todos os inputs sempre será só texto e inclusive no tipo submit, o input muda o valor com o atributo value

Já no button as coisa são diferentes, como temos a tag de fechamento, podemos adicionar qualquer HTML dentro do botão

Assim abrindo um leque de personalização muito maior para trabalharmos em cima

Veja dois exemplos:

<div>
    <input type="submit" value="Enviar">
</div>
<div>
    <button><span class="circulo"></span>Enviar</button>
</div>

E o CSS:

.circulo {
    height: 20px;
    width: 20px;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}

Estilizamos um span dentro do button, para representar o que pode ser feito de personalização

Veja no navegador:

ex input submit button submit

Claro que é um exemplo bastante simples, mas perceba que as possibilidades de manipulação de novos elementos e CSS são infinitas

Conclusão

Neste artigo vimos como usar input submit ou button submit nos formulários e também quando utilizar

Vimos que as possibilidades com button são bem maiores e a utilização dos dois acaba sendo a mesma em questão de funcionalidade

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

0
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x