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

1636

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?
Aron Rotteveel
la source

Réponses:

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

Tamas Czinege
la source
186
Cette réponse était en 2009, puisque IE6 est mort maintenant, je suppose qu'il n'y a aucune raison de ne pas l'utiliser <button>maintenant?
Rosdi Kasim
75
S'ils veulent pirater, laissez-les obtenir une version succulente de votre site. Drop IE6, drop IE7, malheureusement IE8 a encore besoin de support.
Jared
15
Selon la page du compte à rebours IE6 de Microsoft , l'utilisation d'IE6 en Chine est toujours à l'horizon (en janvier 2014) à environ 22%. ie6death.com note que le support IE6 se termine le 8 avril 2014.
BryanH
54
Comme beaucoup l'ont raillé, les utilisateurs toujours sur les anciennes versions d'IE sont probablement habitués à Internet semblant horriblement cassé.
jinglesthula
9
<button />possède également un formattribut (et des attributs associés) afin qu'il puisse être lié à des formulaires dans d'autres parties du corps du document.
Gup3rSuR4c
327

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"
Travis J
la source
4
pouvez-vous ajouter plus de détails? que se passe-t-il s'il y a plusieurs boutons? est-ce seulement type = 'submit' qui fait ça?
Simon_Weaver
44
Oh cher W3C, pourquoi submitpar défaut quand 99,9% des formulaires en ont beaucoup buttonavec un submit ?!
2grit
13
De nombreux formulaires ne comportent également qu'un seul bouton, qui est la soumission. J'ai dû passer un appel dans un sens ou dans l'autre, je suppose.
jinglesthula
5
Cela peut être BIG gotcha! Mon code de test envoie environ 80% du temps, sinon il a été traité comme un bouton normal. ATTENTION lors de l'utilisation de <button> dans un <form>
Sydwell
4
@ mik01aj "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." N'est-ce pas évident? Tout bouton d'envoi doit soumettre le formulaire. Pourquoi dire ça? Qu'est-ce que je rate?
Concrete Gannet
174

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

Noldorin
la source
44

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

Santhosh
la source
4
+1, car il <input />s'agit bien d'un élément nul, alors qu'il <button>ne l'est pas
Sebastian
39

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

user54579
la source
43
@Hawken Cette page a été écrite par des idiots qui pensaient que W3Schools prétendait être W3C. En réalité, W3Schools n'est ni meilleur ni pire que des milliers d'autres sites qui traitent ce type de matériel.
M. Lister
en fait, cela dépend de la version d'IE et du mode IE - w3schools a mis à jour les informations depuis le devis
Damien
12
@MrLister J'ai parlé à des gens qui pensent que W3Schools est associé au W3C. Bien que je ne sois pas sûr d'être d'accord avec la «responsabilité de W3Fools de fournir des informations précises», je pense que l'exactitude de W3Schools laisse à désirer et que ses détracteurs ne sont pas nécessairement idiots. (J'ai beaucoup appris du W3S, à l'époque où c'était bon; il n'a pas suivi le rythme des normes.)
Marnen Laibow-Koser
17
@MrLister W3Schools est de loin la source officieuse la plus utilisée pour les informations techniques Web. Et la qualité est vraiment nulle. Pourquoi ne pas les distinguer? Et quels détails W3Fools s'est-il trompé? Tout me semble correct.
Marnen Laibow-Koser
19

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 .

Attilio
la source
17

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.

gimel
la source
17

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.

nickomarsa
la source
9
Pour les scripts côté client. <input type = "button"> n'a aucune fonction en HTML.
iGEL
12
<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

Sergey Sklyar
la source
9

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.

jnowland
la source
9

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.

MattC
la source
re: KjetilNordin - Nous avions une application qui était au courant de tout événement focusin sur une page, et une s'est produite, une action a eu lieu. Donc, si vous utilisez une entrée, vous pouvez regarder tous les éléments pour un seul événement. Ne dis pas que tu devrais, mais tu pourrais. Le risque est que quelqu'un modifie l'entrée en un bouton, puis la mise au point ne se produit pas, puis votre action ne se produise pas, puis votre application se déclenche. C'est ce qui nous est arrivé. :)
MattC
1
utilisez les événements de focus lorsqu'un élément est actuellement ciblé via la souris / le clavier. ils montrent à l'utilisateur où ils se trouvent dans le document.
albert
7

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

Moh S.
la source
7

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.

Roumelis George
la source
4

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.

deadManN
la source
4

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/

Nasia Makrygianni
la source