<botão> vs. <tipo de entrada = "botão" />. Qual usar?

1635

Ao olhar para a maioria dos sites (incluindo SO), a maioria deles usa:

<input type="button" />

ao invés de:

<button></button>
  • Quais são as principais diferenças entre os dois, se houver?
  • Existem razões válidas para usar um em vez do outro?
  • Existem razões válidas para usá-los?
  • O uso <button>vem com problemas de compatibilidade, visto que ele não é muito usado?
Aron Rotteveel
fonte

Respostas:

662
  • Aqui está uma página descrevendo as diferenças (basicamente você pode colocar html em a <button></button>)
  • E outra página descrevendo por que as pessoas evitam <button></button>(Dica: IE6)

Outro problema do IE ao usar <button />:

E enquanto falamos do IE, há alguns bugs relacionados à largura dos botões. Ele misteriosamente adiciona um preenchimento extra quando você tenta adicionar estilos, o que significa que você precisa adicionar um pequeno truque para controlar as coisas.

Tamas Czinege
fonte
186
Esta resposta foi em 2009, já que o IE6 está morto agora, presumo que não há razão para não usar <button>agora?
Rosdi Kasim
75
Se eles querem piratear, deixe-os obter uma versão ruim do seu site. Drop IE6, drop IE7, infelizmente o IE8 ainda precisa de suporte.
Jared
15
De acordo com a página de contagem regressiva do IE6 da Microsoft , o uso do IE6 da China ainda está chegando (em janeiro de 2014) em cerca de 22%. O ie6death.com observa que o suporte ao IE6 está terminando em 8 de abril de 2014.
BryanH
54
Como muitos já brincaram, os usuários que ainda estão nas versões antigas do IE provavelmente estão acostumados à Internet com uma aparência horrivelmente danificada.
Jinglesthula
9
<button />também possui um formatributo (e atributos relacionados) para que possa ser vinculado a formulários em outras partes do corpo do documento.
Gup3rSuR4c
327

Apenas como uma observação lateral, <button>o envio será implicitamente, o que pode causar problemas se você quiser usar um botão em um formulário sem enviá-lo. Assim, outro motivo para usar <input type="button">(ou <button type="button">)

Editar - mais detalhes

Sem um tipo, buttonrecebe implicitamente o tipo desubmit . Não importa quantos botões ou entradas de envio existem no formulário, qualquer um deles digitado explícita ou implicitamente como envio, quando clicado, enviará o formulário.

Existem 3 tipos suportados para um botão

submit ||  "submits the form when clicked (default)"
reset  ||  "resets the fields in the form when clicked"
button ||  "clickable, but without any event handler until one is assigned"
Travis J
fonte
4
você pode adicionar mais detalhes? o que acontece se houver vários botões? é apenas type = 'submit' que faz isso?
Simon_Weaver
44
Oh, querido W3C, por que, por submitpadrão, quando 99,9% dos formulários tem muito buttoncom um submit ?!
2grit
13
Muitos formulários também têm apenas um botão, que é o envio. Tinha que fazer uma ligação de um jeito ou de outro, suponho.
Jinglesthula 11/04
5
Isso pode ser uma grande pegadinha! Meu código de teste é enviado cerca de 80% das vezes, caso contrário, era tratado como um botão normal. BECAREFUL ao usar <button> em um <form>
Sydwell 2/15
4
@ mik01aj "Não importa quantos botões ou entradas de envio existem no formulário, qualquer um deles digitado explícita ou implicitamente como enviar, quando clicado, enviará o formulário." Isso não é óbvio? Qualquer botão de envio deve enviar o formulário. Por que dizer isso? o que estou perdendo?
Concrete Gannet
174

Este artigo parece oferecer uma boa visão geral da diferença.

Na página:

Os botões criados com o elemento BUTTON funcionam da mesma forma que os botões criados com o elemento INPUT, mas oferecem mais possibilidades de renderização: o elemento BUTTON pode ter conteúdo. Por exemplo, um elemento BUTTON que contém uma imagem funciona como e pode se parecer com um elemento INPUT cujo tipo está definido como "imagem", mas o tipo de elemento BUTTON permite conteúdo.

O elemento Button - W3C

Noldorin
fonte
44

Dentro de um <button>elemento, você pode colocar conteúdo, como texto ou imagens.

<button type="button">Click Me!</button> 

Essa é a diferença entre esse elemento e os botões criados com o <input>elemento.

Santhosh
fonte
4
+1, já que <input />é de fato um elemento vazio, enquanto <button>não é
Sebastian
39

Citar

Importante: Se você usar o elemento button em um formulário HTML, diferentes navegadores enviarão valores diferentes. O Internet Explorer enviará o texto entre as tags <button>e </button>, enquanto outros navegadores enviarão o conteúdo do atributo value. Use o elemento de entrada para criar botões em um formulário HTML.

De: http://www.w3schools.com/tags/tag_button.asp

Se entendi corretamente, a resposta é compatibilidade e consistência de entrada de navegador para navegador

user54579
fonte
43
@Hawken Essa página foi escrita por idiotas que pensavam que o W3Schools fingia ser o W3C. Na realidade, o W3Schools não é melhor nem pior do que milhares de outros sites que lidam com esse tipo de material.
Sr. Lister
na verdade, isso depende da versão do IE e do modo IE - w3schools atualizadas as informações desde a citação
Damien
12
@ MrLister Conversei com pessoas que pensam que o W3Schools está associado ao W3C. Embora não tenha certeza de que concordo com a "responsabilidade do W3Fools de fornecer informações precisas", acho que a precisão do W3Schools deixa algo a desejar, e que seus críticos não são necessariamente idiotas. (Eu aprendi muito com W3S, quando foi boa, mas não manteve o ritmo com as normas.)
Marnen Laibow-Koser
17
O @MrLister W3Schools é facilmente a fonte não oficial mais usada para informações técnicas na Web. E a qualidade é realmente péssima. Por que não destacá-los? E quais detalhes o W3Fools errou? Tudo lá parece correto para mim.
Marnen Laibow-Koser
19

Vou citar o artigo A diferença entre âncoras, entradas e botões :

Âncoras (o <a>elemento) representam hiperlinks, recursos pelos quais uma pessoa pode navegar ou baixar em um navegador. Se você deseja permitir que o usuário mude para uma nova página ou faça o download de um arquivo, use uma âncora.

Uma entrada ( <input>) representa um campo de dados: portanto, alguns dados do usuário que você deseja enviar ao servidor. Existem vários tipos de entrada relacionados aos botões:

  • <input type="submit">
  • <input type="image">
  • <input type="file">
  • <input type="reset">
  • <input type="button">

Cada um deles tem um significado, por exemplo, " arquivo " é usado para carregar um arquivo, " redefinir " limpa um formulário e " enviar " envia os dados para o servidor. Verifique a referência W3 no MDN ou no W3Schools .

O botão ( <button>)elemento é bastante versátil:

  • você pode aninhar elementos em um botão, como imagens, parágrafos ou cabeçalhos;
  • os botões também podem conter ::beforee ::afterpseudoelementos;
  • botões suportam o disabledatributo Isso facilita a ativação e desativação.

Mais uma vez, verifique a referência W3 para obter uma <button>tag no MDN ou no W3Schools .

Attilio
fonte
17

Citando a página Formulários no manual HTML:

Os botões criados com o elemento BUTTON funcionam da mesma forma que os botões criados com o elemento INPUT, mas oferecem mais possibilidades de renderização: o elemento BUTTON pode ter conteúdo. Por exemplo, um elemento BUTTON que contém uma imagem funciona como e pode se parecer com um elemento INPUT cujo tipo está definido como "imagem", mas o tipo de elemento BUTTON permite conteúdo.

gimel
fonte
17

Use o botão do elemento de entrada se desejar criar o botão em um formulário. E use a tag button se desejar criar o botão para uma ação.

nickomarsa
fonte
9
Para scripts do lado do cliente. <input type = "button"> não possui função em HTML.
iGEL 3/03/12
12
<button>
  • por padrão se comporta como se tivesse um atributo "type =" submit "
  • pode ser usado sem um formulário e também em formulários.
  • conteúdo de texto ou html permitido
  • pseudoelementos css permitidos (como: antes)
  • o nome da tag geralmente é exclusivo para um único formulário

vs.

<input type='button'>
  • O tipo deve ser definido como 'submit' para se comportar como um elemento de envio
  • só pode ser usado em formulários.
  • somente conteúdo de texto permitido
  • sem pseudo elementos css
  • mesmo nome de tag que a maioria dos elementos do formulário (entradas)

-
em navegadores modernos, ambos os elementos são facilmente estilizados com css, mas na maioria dos casos, o buttonelemento é preferido, pois você pode estilizar mais com html interno e pseudo-elementos

Sergey Sklyar
fonte
9

No que diz respeito ao estilo CSS, <button type="submit" class="Btn">Example</button>é melhor, pois oferece a capacidade de usar CSS :beforee :after pseudo classes que podem ajudar.

Devido à <input type="button">renderização visual diferente de um <a>ou <span>quando estilizado com classes em determinadas situações, eu as evito.

Vale a pena notar que a principal resposta atual foi escrita em 2009. O IE6 não é uma preocupação nos dias de hoje, de modo que a <button type="submit">Wins</button>consistência do estilo em meus olhos se destaca.

jnowland
fonte
9

Há uma grande diferença se você estiver usando o jQuery. O jQuery está ciente de mais eventos nas entradas do que nos botões. Nos botões, o jQuery só reconhece eventos de 'clique'. Nas entradas, o jQuery está ciente dos eventos 'clique', 'foco' e 'desfoque'.

Você sempre pode vincular eventos aos seus botões conforme necessário, mas esteja ciente de que os eventos que o jQuery reconhece automaticamente são diferentes. Por exemplo, se você criou uma função que foi executada sempre que houve um evento 'focusin' em sua página, uma entrada acionaria a função, mas um botão não.

MattC
fonte
re: KjetilNordin - Tivemos um aplicativo que estava ciente de qualquer evento de foco em uma página, e um ocorreu, uma ação ocorreu. Portanto, se estiver usando uma entrada, você poderá assistir a todos os elementos de um único evento. Não estou dizendo que você deveria, mas você poderia. O risco é que alguém altere a entrada para um botão e, em seguida, o foco não ocorra, e sua ação não ocorra, e seu aplicativo aumenta. Foi o que aconteceu conosco. :)
MattC 2/16
1
use eventos de foco quando um elemento estiver atualmente direcionado via mouse / teclado. eles mostram ao usuário onde estão no documento.
Albert
7

<button>é flexível, pois pode conter HTML. Além disso, é muito mais fácil estilizar usando CSS, e o estilo é aplicado em todos os navegadores. No entanto, existem algumas desvantagens em relação ao Internet Explorer (Eww! IE!). O Internet Explorer não detecta o atributo value corretamente, usando o conteúdo da tag como valor. Todos os valores em um formulário são enviados para o lado do servidor, independentemente de clicar ou não no botão. Isso faz com que seja usado como um <button type="submit">truque e uma dor.

<input type="submit">por outro lado, não possui nenhum problema de valor ou detecção, mas você não pode adicionar HTML como pode <button>. Também é mais difícil de estilizar, e o estilo nem sempre responde bem em todos os navegadores. Espero que isso tenha ajudado.

Moh S.
fonte
7

Eu só quero adicionar algo ao resto das respostas aqui. Os elementos de entrada são considerados elementos vazios ou nulos (outros elementos vazios são área, base, br, col, hr, img, entrada, link, meta e parâmetro. Você também pode verificar aqui ), o que significa que eles não podem ter nenhum conteúdo. Além de não ter conteúdo, os elementos vazios não podem ter pseudo-elementos como :: after e :: before , o que considero uma grande desvantagem.

Roumelis George
fonte
4

Além disso, uma das diferenças pode vir do provedor da biblioteca e do que eles codificam. por exemplo, aqui estou usando a plataforma cordova em combinação com a interface do usuário angular para dispositivos móveis e, embora as tags input / div / etc funcionem bem com o ng-click, o botão pode causar o travamento do depurador do Visual Studio, certamente por diferenças, causado pelo programador; observe que a resposta MattC aponta para o mesmo problema, o jQuery é apenas uma lib e o provedor não pensou em alguma funcionalidade em um elemento, que ele fornece em outro. portanto, quando você estiver usando uma biblioteca, poderá enfrentar um problema com um elemento que não enfrentará com outro. e simplesmente o popular como input, será principalmente o fixo, apenas porque é mais popular.

deadManN
fonte
4

Embora essa seja uma pergunta muito antiga e possa não ser mais relevante, lembre-se de que a maioria dos problemas que a <button>tag costumava ter não existe mais e, portanto, é altamente recomendável usá-la.

Caso você não possa fazer isso por vários motivos, lembre-se de adicionar o atributo role = ”button” na sua tag a partir da acessibilidade. Este artigo é bastante informativo: https://www.deque.com/blog/accessible-aria-buttons/

Nasia Makrygianni
fonte