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?
8 Respostas
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>
-
2Na especificação da MDN, o valor
submit
é o padrão para a propriedadetype
. Confesso que não vi a especificação dos demais mantenedores de browsers, portanto minha certeza de quesubmit
é o valor padrão se restringe ao universo Mozilla. Anyway +1. Commented 8/04/2014 às 19:37 -
3
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
<button>
: Pode colocar imagens e conteúdo dentro.<input>
: Não pode colocar imagens e conteúdo dentro.
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.
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.
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.
É 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 nemreset
nembutton
Veja aqui a especificação de valores possíveis de type para button
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.
<button>
também se deve ao fato de ser mais fácil de manipular seus estilos.