<button> vs.<input type="“button”" />.Qual usar?

Question

Quando se olha para a maioria dos sites (incluindo, PORTANTO), a maioria deles usam:

<input type="button" />

em vez de:

<button></button>

• Quais são as principais diferenças entre os dois, se for o caso?
• Existem razões válidas para usar um em vez do outro?
• Existem razões válidas para uso combiná-los?
• Não utilizar <button> venha com problemas de compatibilidade, visto que não é muito utilizado?

Answer 1

• Aqui está uma página descrevendo as diferenças (basicamente você pode colocar html em um <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 estamos falando do IE, ele tem alguns bugs relacionados à largura dos botões. Ele misteriosamente adicionará preenchimento extra quando você estiver tentando adicionar estilos, o que significa que precisa adicionar um pequeno hack para controlar as coisas.

Answer 2

Apenas como uma nota lateral, <button> Enviará implicitamente, o que pode causar problemas se você quiser usar um botão em um formulário sem enviar. Assim, outro motivo para usar <input type="button"> (ou <button type="button">)

Editar - mais detalhes

Sem tipo, button recebe implicitamente tipo de submit. Não importa quantos botões de envio ou entradas existem no formulário, qualquer um deles que seja explícita ou implicitamente digitada como enviada, quando clicada, 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"

Answer 3

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

Da página:

Os botões criados com a função do elemento do botão, assim como os botões criados com o elemento de entrada, mas oferecem possibilidades de renderização mais ricas: o elemento do botão pode ter conteúdo. Por exemplo, um elemento de botão que contém uma imagem funções como e pode se parecer com um elemento de entrada cujo tipo é definido como "imagem", mas o tipo de elemento do botão permite o conteúdo.

O elemento do botão - W3c

Answer 4

Dentro de a <button> Elemento que você pode colocar conteúdo, como texto ou imagens.

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

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

Answer 5

Citar

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

A partir de : http://www.w3schools.com/tags/tag_button.asp

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

Answer 6

Citando o Página de formulários No manual HTML:

Os botões criados com a função do elemento do botão, assim como os botões criados com o elemento de entrada, mas oferecem possibilidades de renderização mais ricas: o elemento do botão pode ter conteúdo. Por exemplo, um elemento de botão que contém uma imagem funções como e pode se parecer com um elemento de entrada cujo tipo é definido como "imagem", mas o tipo de elemento do botão permite o conteúdo.

Answer 7

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

Answer 8

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

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

Um entrada (<input>) representa um campo de dados: portanto, alguns dados do usuário que você pretende 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 fazer upload de um arquivo".Redefinir"Limpa uma forma e"enviar"Envia os dados para o servidor. Verifique a referência W3 no mdn ou no W3Schools.

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

• Você pode aninhar elementos dentro de um botão, como imagens, parágrafos ou cabeçalhos;
• Os botões também podem conter ::before e ::after pseudo-elementos;
• Os botões suportam o disabled atributo. Isso facilita e desligam -os.

Novamente, verifique a referência W3 para <button> marcação no mdn ou no W3Schools.

Answer 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 está ciente apenas dos eventos 'cliques'. Nas entradas, o JQuery está ciente dos eventos 'Click', 'Focus' e 'Blur'.

Você sempre pode vincular eventos aos seus botões conforme necessário, mas esteja ciente de que os eventos que o jQuery está ciente é diferente. Por exemplo, se você criou uma função que fosse executada sempre que houve um evento 'focus' na sua página, uma entrada acionaria a função, mas um botão não o fará.

Answer 10

<button>

• por padrão se comporta como se tivesse um "tipo="submit" atributo
• pode ser usado sem um formulário bem como em formas.
• html ou texto de conteúdo permitida
• css pseudo elementos permitidos (como :antes)
• nome da marca é normalmente única para um único formulário

vs.

<input type='button'>

• o tipo deve ser definido para "submeter" para se comportar como um elemento de envio
• só pode ser utilizado em formulários.
• apenas o conteúdo do texto permitidos
• não css pseudo-elementos
• mesmo nome de marca como a maioria das formas elementos (entradas)

--
em navegadores modernos, ambos os elementos são facilmente styleable com css, mas na maioria dos casos, button elemento é preferida como você pode estilo mais com html interno e pseudo-elementos

Answer 11

No que diz respeito ao estilo CSS <button type="submit" class="Btn">Example</button> é melhor, pois lhe dá a capacidade de usar CSS :before e :after Pseudo -classes o que pode ajudar.

Devido ao <input type="button"> Visualmente se tornando diferente de um <a> ou <span> Quando estilizado com aulas em determinadas situações, evito -as.

Vale muito a pena notar o Resposta superior atual foi escrito em 2009. O IE6 não é uma preocupação hoje em dia, então <button type="submit">Wins</button> A consistência de estilo nos meus olhos sai por cima.

Answer 12

<button> é flexível, pois pode conter HTML. Além disso, é muito mais fácil estilizar o CSS, e o estilo é realmente 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 de valor corretamente, usando o conteúdo da tag como o valor. Todos os valores em um formulário são enviados ao lado do servidor, independentemente de o botão ser ou não clicado ou não. Isso faz usá -lo como um <button type="submit"> Complicado e uma dor.

<input type="submit"> por outro <button>. Também é mais difícil estilizar, e o estilo nem sempre responde bem em todos os navegadores. Espero que isso tenha ajudado.

Answer 13

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 param. Você também pode verificar aqui), o que significa que eles não podem ter nenhum conteúdo. Além de não ter nenhum conteúdo, elementos vazios não pode ter nenhum pseudo-elementos como :: depois e :: antes, que considero uma grande desvantagem.

Answer 14

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 móvel e, enquanto as tags de entrada/div/etc funcionam bem com o clique ng, o botão pode fazer com que o depurador do Visual Studio falhe, certamente por diferenças, que o programador causou; Observe que o Mattc Responder aponta para o mesmo problema, o jQuery é apenas um 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, pode 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.