42

Normalmente utilizo <button type="submit"></button>, mas vejo na maioria dos formulários o uso do <input type="submit" />, existe alguma diferença? Qual é o ideal?

2
  • 2
    o uso do elemento <button> também se deve ao fato de ser mais fácil de manipular seus estilos.
    – Leandro RR
    Commented 8/04/2014 às 19:31
  • 2
    aconselho o artigo se souber ler inglês css-tricks.com/use-button-element
    – Leandro RR
    Commented 8/04/2014 às 19:38

8 Respostas 8

30

Do ponto de vista funcional não há diferença, ambos irão submeter o formulário da mesma forma. Segundo a especificação, se atributo type estiver ausente da tag <button>, o comportamento padrão será de submit.

A diferença fica na declaração das tags e na área visual.

A tag <input> contém um atributo de valor value que é exibido e geralmente não é fechada ou é auto fechada. Exemplo:

<input type="submit" value="Submit" />

Note que o value do <input> que é enviado ao servidor é sempre igual ao texto exibido no botão, acoplando a parte visual com uma implementação que dependa desse valor. Não é uma boa prática, sendo que botões com imagens eram usados como alternativas.

Por outro lado, <button> tem um conteúdo entre a tag de abertura e fechamento, sendo mais flexível do que a tag tradicional, permitindo, por exemplo, imagens e mais estilos visuais. Exemplo:

<button type="submit" name="myButton" value="foo">Click me</button>
2
  • 2
    Na especificação da MDN, o valor submit é o padrão para a propriedade type. Confesso que não vi a especificação dos demais mantenedores de browsers, portanto minha certeza de que submit é o valor padrão se restringe ao universo Mozilla. Anyway +1. Commented 8/04/2014 às 19:37
  • 3
    @Renan Confirmado na especificação. O default é submit.
    – utluiz
    Commented 8/04/2014 às 20:02
15

Funcionalmente, com relação ao clique, não existe diferença - supondo um button cuja propriedade type tem o valor submit, que é o padrão. Se o button tiver outro valor para a propriedade type, ele se torna funcionalmente equivalente ao input com type button.

A tag button foi introduzida no HTML para permitir a criação de um controle mais rico visualmente. O button suporta conteúdo, o input não. Por isso existem mais possibilidades de formatação com o button, que acaba sendo mais amigável ao uso de imagens, cufon etc.

Referência: pergunta semelhante no SOen - https://stackoverflow.com/questions/7117639/input-type-submit-vs-button-tag-are-they-interchangeable

14
  • <button>: Pode colocar imagens e conteúdo dentro.
  • <input>: Não pode colocar imagens e conteúdo dentro.
10

O padrão utilizado pela maioria foi <input type="submit" />, devido a ser algo utilizado desde o início dos formulários.

A questão atual é mais relativa à semântica que seu real funcionamento, já que ambas as formas estão corretas e, tirando alguns pequenos bugs em navegadores antigos e não mais utilizados e algumas diferenças na maneira que o valor do botão é passado, são idênticos.

A maior vantagem do <button></button> é que ele aceita HTML como valor, oque torna possível a estilização mais criativa com imagens e outros elementos, além de puro CSS.

É importante citar também que botões declarados sem o atributo type são considerados como se tivessem type="submit", então é aconselhável sempre utilizar type="button" quando não se deseja assumir comportamentos padrão, para utilizar com eventos customizados em JavaScript.

6

Nenhum está errado, porém input se refere a um elemento de entrada de dados, e um botão de submit, a menos que tenha utilidade o uso do seu atributo value não tem como objetivo aguardar a entrada de dados. Por tanto pela lógica o mais correto seria você utilizar um button a menos que precise do atributo value.

Ferramentas grandes como o Twitter Bootstrap costumam adotar o button também, porém é uma questão um pouco conceitual de certa forma.

6

Basicamente o que deve ser considerado:

<button type="submit"> -- conteúdo html -- </button>

Usando <button> lhe dá mais disposição e liberdade sobre o design do botão, por exemplo você pode usar imagens, ícones e outros componentes para renderizar o botão o que é mais comum. Além disso, você pode ainda criar outras tags <span>,<small> dentro da tag <button>, e fazer o que desejar com elas.

<input type="submit" />

Usanto tag <input> é a maneira mais fácil de enviar um formulário. Ele não requer nada além da própria tag, nem mesmo um value.O problema é que este botão é muito feio e simples, você pode até estilizá-lo, mais terá limitações.

Então, prefira <input> quando seu formulário é simples e não requer muita estilização e <button> quando o contrário.

2

É importante notar que o valor default do atributo type do button é submit.

Com isso, button irá submeter um formulário sempre que:

  • type="submit"
  • type="" (vazio)
  • type não for especificado
  • Em suma: type tiver qualquer valor que não seja nem reset nem button

Veja aqui a especificação de valores possíveis de type para button

2

O input tem parâmetros que são enviados, por exemplo:

<input type="text" name="nome">
<input type="date" name="nasciimento">
<input type="submit" name="OK">

O código acima envia os campos:

  • nome
  • nascimento
  • OK

<input type="text" name="nome">
<input type="date" name="nasciimento">
<button type="submit">OK</button>

No codigo acima sera enviado os campos:

  • nome
  • nascimento

Se for relevante receber o input do OK o ideal é utilizar input, se não é relevante o botão reduz um elemento a ser enviado dentro do formulário, ai vai depender de seu projeto para saber qual seria melhor para se utilizar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .