<bouton> vs. <type d'entrée = "bouton" />. Lequel utiliser?
Lorsqu'ils consultent 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?
- Existe-t-il des raisons valables d’utiliser l’un au lieu de l’autre?
- Y a-t-il des raisons valables d'utiliser les combiner?
- Est-ce que l’utilisation de
<button>pose des problèmes de compatibilité, son utilisation n’est pas très répandue?
- Voici une page décrivant les différences (vous pouvez en principe mettre du HTML dans un
<button></button>) - Et une autre page décrivant pourquoi les gens évitent
<button></button>(Conseil: IE6)
Un autre problème IE lors de l'utilisation de <button />:
Et tandis que nous parlons d'IE, il y a quelques bugs liés à la largeur des boutons. Il va mystérieusement ajouter du rembourrage supplémentaire lorsque vous essayez d'ajouter des styles, ce qui signifie que vous devez ajouter un petit bidouillage pour que tout soit sous contrôle.
En guise de remarque, <button> sera soumis de manière implicite, ce qui peut poser des problèmes si vous souhaitez utiliser un bouton dans un formulaire sans le soumettre. Donc, une autre raison d'utiliser <input type="button"> (ou <button type="button">)
Modifier - plus de détails
Sans type, button REÇOIT IMPLICITEMENT LE TYPE submit . Peu importe le nombre de boutons ou d'entrées de soumission présents dans le formulaire, l'un quelconque d'entre eux, explicitement ou implicitement typé comme soumission, soumet le formulaire lorsqu'il est cliqué dessus.
Il y a 3 types supportés 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.
De la page:
Les boutons créés avec l'élément BUTTON fonctionnent comme les boutons créés avec l'élément INPUT, mais offrent des possibilités de rendu plus riches: l'élément BUTTON peut avoir un contenu. Par exemple, un élément BUTTON contenant une image fonctionne comme un élément INPUT et dont le type est défini sur "image", mais le type d'élément BUTTON autorise le contenu.
L'élément Button - W3C
Dans un élément <button>, vous pouvez insérer du contenu, tel que 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>.
Citation
Important: Si vous utilisez l'élément button 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 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 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'élément <a>) représentent des liens hypertexte, des ressources vers lesquelles une personne peut naviguer ou télécharger dans un navigateur. Si vous souhaitez permettre à votre utilisateur de passer à une nouvelle page ou de 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 associés aux boutons: <input type="submit">, <input type="image">, <input type="file">, <input type="reset">, <input type="button">.
Chacun d’entre eux a une signification. Par exemple, " fichier " est utilisé pour télécharger un fichier, " reset "efface un formulaire et" submit "envoie les données au serveur. Vérifiez la référence W3 sur MDN ou sur W3Schools .
Le bouton (<button>) 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 les pseudo-éléments
::beforeet::after; - les boutons supportent l'attribut
disabled. Cela facilite leur activation et leur désactivation.
Encore une fois, vérifiez la référence W3 pour <button> balise sur MDN ou sur W3Schools .
Citant le 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 offrent des possibilités de rendu plus riches: l'élément BUTTON peut avoir un contenu. Par exemple, un élément BUTTON contenant une image fonctionne comme un élément INPUT et 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 input si vous souhaitez créer un bouton dans un formulaire. Et utilisez la balise button 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 text ou html autorisé
- css pseudo éléments autorisés (comme: avant)
- le nom de balise est généralement unique pour un seul formulaire
vs.
<input type='button'>
- type doit être défini sur 'submit' pour se comporter comme un élément de soumission
- ne peut être utilisé que dans les formulaires.
- seul le contenu du texte est autorisé
- pas de pseudo-éléments css
- même nom de balise que la plupart des éléments de formulaire (entrées)
-
dans les navigateurs modernes, les deux éléments sont facilement modifiables avec css mais dans la plupart des cas, l'élément button est préféré, car vous pouvez styler davantage avec des éléments HTML et pseudo internes
Il y a une grande différence si vous utilisez jQuery. jQuery est conscient de plus d'événements sur les entrées que sur les boutons. Sur les boutons, jQuery n’a connaissance que des événements de "clic". Sur les entrées, jQuery prend en compte les événements "clic", "focus" et "flou".
Vous pouvez toujours lier des événements à vos boutons en fonction de vos besoins, mais sachez que les événements automatiquement détectés par jQuery sont différents. Par exemple, si vous avez créé une fonction exécutée chaque fois qu'il y avait un événement 'focusin' sur votre page, une entrée déclencherait la fonction mais pas un bouton.
En ce qui concerne le style CSS, le <button type="submit" class="Btn">Example</button> est meilleur car il vous donne la possibilité d'utiliser CSS :before et :afterpseudo-classes ce qui peut vous aider.
En raison du <input type="button">, le rendu visuel est différent d'un <a> ou <span> lorsqu'il est stylé avec des classes dans certaines situations, je les évite.
Il est très intéressant de noter que le réponse actuelle la plus récente a été écrit en 2009. IE6 n'est plus un problème aujourd'hui, donc <button type="submit">Wins</button> l'uniformité du style à mes yeux s'impose.
<button> est flexible en ce sens qu'il peut contenir du HTML. De plus, il est beaucoup plus facile de styler en utilisant 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 value, utilisant le contenu de la balise comme valeur. Toutes les valeurs d'un formulaire sont envoyées au serveur, que l'utilisateur clique ou non sur le bouton. Cela rend son utilisation comme <button type="submit"> difficile et pénible.
<input type="submit">, en revanche, ne présente aucun problème de valeur ou de détection, mais vous ne pouvez pas ajouter de code HTML comme vous le pouvez avec <button>. C'est aussi plus difficile à coiffer, et le style ne répond pas toujours bien à tous les navigateurs. J'espère que cela 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 nuls (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 peut 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 son code. par exemple ici, j'utilise cordova platform en combinaison avec mobile angular ui, 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 différence , que le programmeur a causé; notez que MattC répond au même problème, le jQuery n’est qu’une bibliothèque, et le fournisseur n’a pas pensé à certaines fonctionnalités d’un élément qu’il fournit à un autre. Ainsi, lorsque vous utilisez une bibliothèque, vous pouvez faire face à un problème avec un élément, mais pas avec un autre. et tout simplement le populaire comme input, sera principalement le fixe, juste parce que c'est plus populaire.