<button> vs. <input type="button" />. Que faut-il utiliser ?

Question

En regardant la plupart des sites (y compris SO), la plupart d'entre eux utilisent :

<input type="button" />

au lieu de :

<button></button>

• Quelles sont les principales différences entre les deux, le cas échéant ?
• Y a-t-il des raisons valables d'utiliser l'un plutôt que l'autre ?
• Y a-t-il des raisons valables de les combiner ?
• Est-ce que l'utilisation <button> s'accompagne de problèmes de compatibilité, étant donné que son utilisation n'est pas très répandue ?

Answer 1

• Voici une page décrivant les différences (en gros, vous pouvez mettre le html dans un <button></button> )
• Et une autre page décrivant pourquoi les gens évitent <button></button> (Indice : IE6)

Un autre problème d'IE lors de l'utilisation <button /> :

Et pendant qu'on parle d'IE, c'est a quelques bugs liés à la largeur des boutons. Il va mystérieusement ajoutera mystérieusement un rembourrage supplémentaire lorsque vous essayez d'ajouter des styles, ce qui signifie que vous devez ajouter un petit hack pour que les choses soient sous contrôle.

Answer 2

Juste en passant, <button> se soumet implicitement, ce qui peut poser des problèmes si vous souhaitez utiliser un bouton dans un formulaire sans qu'il se soumette. Ainsi, une autre raison d'utiliser <input type="button"> (o <button type="button"> )

Modifier - plus de détails

Sans type, button reçoit implicitement le type de submit . Peu importe le nombre de boutons d'envoi ou d'entrées dans le formulaire, tout bouton d'envoi explicitement ou implicitement saisi comme un envoi, lorsqu'il est cliqué, soumet le formulaire.

Il existe trois types de boutons

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

Cet article semble offrir un assez bon aperçu de la différence.

De la page :

Les boutons créés avec l'élément BUTTON fonctionnent comme des boutons. créés avec l'élément INPUT, mais ils offrent un rendu plus riche de rendu plus riches : l'élément BUTTON peut avoir du contenu. Par exemple, un élément BUTTON qui contient une image fonctionne comme et peut ressembler à un élément INPUT dont le type est défini sur "image", mais le type de l'élément BUTTON autorise le contenu.

L'élément bouton - W3C

Answer 4

A l'intérieur d'un <button> vous pouvez y placer du contenu, comme du texte ou des images.

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

C'est la différence entre cet élément et les boutons créés avec l'élément <input> élément.

Answer 5

Citation

Important : si vous utilisez l'élément bouton dans un formulaire HTML, les différents navigateurs soumettront des valeurs différentes. Internet Explorer soumettra le texte situé entre les boutons <button> y </button> tandis que les autres navigateurs soumettront le contenu de l'attribut value. Utilisez l'élément input pour créer des boutons dans un formulaire HTML.

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

Si je comprends bien, la réponse est la compatibilité et la cohérence des données d'un navigateur à l'autre.