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

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?

• 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.

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"

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

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.

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

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 .

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.

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.

<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

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.

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.

<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.

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.

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.

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/