<button> vs. <input type = “button” />. Lequel utiliser?

Lorsque l'on regarde 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 au lieu de l'autre?
• Y a-t-il des raisons valables pour les combiner?
• L'utilisation <button>comporte- t-elle des problèmes de compatibilité, vu qu'elle n'est pas très répandue?

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

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

Et pendant que nous parlons d'IE, il y a quelques bugs liés à la largeur des boutons. Cela ajoutera mystérieusement un rembourrage supplémentaire lorsque vous essayez d'ajouter des styles, ce qui signifie que vous devez ajouter un minuscule hack pour contrôler les choses.

Tout comme une note annexe, <button>sera implicitement soumis, ce qui peut poser des problèmes si vous souhaitez utiliser un bouton dans un formulaire sans qu'il le soumette. Ainsi, une autre raison d'utiliser <input type="button">(ou <button type="button">)

Modifier - plus de détails

Sans type, buttonreçoit implicitement le type desubmit . Peu importe le nombre de boutons ou d'entrées de soumission présents dans le formulaire, chacun d'entre eux qui est explicitement ou implicitement tapé comme soumis, lorsque vous cliquez dessus, soumettra le formulaire.

Il existe 3 types pris en charge pour un bouton

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"

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

Depuis la page:

Les boutons créés avec l'élément BUTTON fonctionnent comme les boutons créés avec l'élément INPUT, mais ils offrent des possibilités 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 d'élément BUTTON autorise le contenu.

L'élément Button - W3C

À l'intérieur d'un <button>élément, vous pouvez mettre 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' <input>élément.

Citation

Important: si vous utilisez l'élément bouton dans un formulaire HTML, différents navigateurs soumettront des valeurs différentes. Internet Explorer soumettra le texte entre les balises <button>et </button>, tandis que d'autres navigateurs soumettront le contenu de l'attribut value. Utilisez l'élément d'entrée 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 entrées d'un navigateur à l'autre

Je citerai l'article La différence entre les ancres, les entrées et les boutons :

Les ancres (l' <a>élément) représentent des hyperliens, des ressources auxquelles une personne peut accéder ou télécharger dans un navigateur. Si vous souhaitez autoriser votre utilisateur à passer à une nouvelle page ou à télécharger un fichier, utilisez une ancre.

Une entrée ( <input>) représente un champ de données: vous devez donc envoyer certaines données utilisateur au serveur. Il existe plusieurs types d'entrée liés aux boutons:

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

Chacun d'eux a une signification, par exemple " fichier " est utilisé pour télécharger un fichier, " réinitialiser " efface un formulaire et " soumettre " envoie les données au serveur. Vérifiez la référence W3 sur MDN ou sur W3Schools .

Le bouton (l' <button>)élément est assez polyvalent:

• vous pouvez imbriquer des éléments dans un bouton, tels que des images, des paragraphes ou des en-têtes;
• les boutons peuvent également contenir ::beforeet des ::afterpseudo-éléments;
• les boutons prennent en charge l' disabledattribut. Cela facilite leur activation et leur désactivation.

Encore une fois, vérifiez la référence W3 pour la <button>balise sur MDN ou sur W3Schools .

Citant la page Formulaires dans le manuel HTML:

Les boutons créés avec l'élément BUTTON fonctionnent comme les boutons créés avec l'élément INPUT, mais ils offrent des possibilités 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 d'élément BUTTON autorise le contenu.

Utilisez le bouton de l'élément d'entrée si vous souhaitez créer un bouton dans un formulaire. Et utilisez la balise bouton si vous souhaitez créer un bouton pour une action.

<button>

• se comporte par défaut comme s'il avait un attribut "type =" submit "
• peut être utilisé sans formulaire ainsi que dans les formulaires.
• contenu texte ou html autorisé
• pseudo-éléments css autorisés (comme: avant)
• le nom de la balise est généralement unique sur un seul formulaire

contre.

<input type='button'>

• le type doit être défini sur «soumettre» pour se comporter comme un élément de soumission
• ne peut être utilisé que dans les formulaires.
• seul le contenu texte est autorisé
• pas de pseudo éléments css
• même nom de balise que la plupart des éléments de formulaires (entrées)

-
dans les navigateurs modernes, les deux éléments sont facilement stylisables avec css mais dans la plupart des cas, l' buttonélément est préféré car vous pouvez styliser plus avec des éléments html et pseudo internes

En ce qui concerne le style CSS, le <button type="submit" class="Btn">Example</button>mieux est qu'il vous donne la possibilité d'utiliser des classes CSS :beforeet :after pseudo qui peuvent vous aider.

En raison du <input type="button">rendu visuel différent de celui <a>ou <span>lors du style avec des classes dans certaines situations, je les évite.

Il vaut la peine de noter que la meilleure réponse actuelle a été écrite en 2009. IE6 n'est plus un problème de nos jours, donc la <button type="submit">Wins</button>cohérence du style à mes yeux est prioritaire.

Il y a une grande différence si vous utilisez jQuery. jQuery connaît plus d'événements sur les entrées que sur les boutons. Sur les boutons, jQuery ne connaît que les événements de «clic». Sur les entrées, jQuery est conscient des événements de «clic», «focus» et «flou».

Vous pouvez toujours lier des événements à vos boutons selon vos besoins, mais sachez simplement que les événements dont jQuery a automatiquement connaissance sont différents. Par exemple, si vous créez une fonction qui est exécutée chaque fois qu'il y a un événement «focusin» sur votre page, une entrée déclenche la fonction mais pas un bouton.

<button>est flexible en ce qu'il peut contenir du HTML. De plus, il est beaucoup plus facile de styliser à l'aide de CSS, et le style est appliqué à tous les navigateurs. Cependant, il existe certains inconvénients concernant Internet Explorer (Eww! IE!). Internet Explorer ne détecte pas correctement l'attribut de valeur, en utilisant le contenu de la balise comme valeur. Toutes les valeurs d'un formulaire sont envoyées côté serveur, que vous cliquiez ou non sur le bouton. Cela rend son utilisation <button type="submit">délicate et pénible.

<input type="submit">d'autre part n'a pas de problèmes de valeur ou de détection, mais vous ne pouvez pas, cependant, ajouter du HTML comme vous le pouvez avec <button>. Il est également plus difficile à coiffer et le style ne répond pas toujours bien à tous les navigateurs. J'espère que cela vous a aidé.

Je veux juste ajouter quelque chose au reste des réponses ici. Les éléments d'entrée sont considérés comme des éléments vides ou vides (les autres éléments vides sont area, base, br, col, hr, img, input, link, meta et param. Vous pouvez également vérifier ici ), ce qui signifie qu'ils ne peuvent avoir aucun contenu. En plus de ne pas avoir de contenu, les éléments vides ne peuvent pas avoir de pseudo-éléments comme :: after et :: before , ce que je considère comme un inconvénient majeur.

en outre, l'une des différences peut provenir du fournisseur de la bibliothèque et de ce qu'il code. par exemple ici, j'utilise la plate-forme cordova en combinaison avec l'interface utilisateur angulaire mobile, et bien que les balises input / div / etc fonctionnent bien avec ng-click, le bouton peut provoquer le blocage du débogueur Visual Studio, sûrement par les différences, que le programmeur a causées; notez que la réponse de MattC pointe vers le même problème, le jQuery est juste une lib, et le fournisseur n'a pas pensé à une fonctionnalité sur un élément, qu'il fournit sur un autre. donc lorsque vous utilisez une bibliothèque, vous pouvez rencontrer un problème avec un élément, que vous ne rencontrerez pas avec un autre. et simplement le populaire comme input, sera principalement le fixe, juste parce qu'il est plus populaire.

Bien que cette question soit très ancienne et ne soit plus pertinente, veuillez garder à l'esprit que la plupart des problèmes que la <button>balise avait auparavant n'existent plus et qu'il est donc fortement conseillé de l'utiliser.

Dans le cas où vous ne pouvez pas le faire pour diverses raisons, n'oubliez pas d'ajouter l'attribut role = "bouton" dans votre balise dès l'accessibilité. Cet article est assez informatif: https://www.deque.com/blog/accessible-aria-buttons/