type - input button html




<button> vs.<input type="button"/>. Lequel utiliser? (10)

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

Lorsque vous regardez 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 d'utiliser les combiner?
  • L'utilisation de <button> pose-t-elle des problèmes de compatibilité, vu qu'elle n'est pas très utilisée?

Citant la page des formulaires dans le manuel HTML:

Les boutons créés avec l'élément BUTTON fonctionnent exactement 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.


En ce qui concerne le style CSS, le <button type="submit" class="Btn">Example</button> est préférable car il vous donne la possibilité d'utiliser CSS :before et :after pseudo-classes qui peuvent vous aider.

En raison du <input type="button"> rendu visuellement différent d'un <a> ou <span> lorsque je suis stylé avec des classes dans certaines situations, je les évite.

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


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 ne connaît que les événements 'click'. Sur les entrées, jQuery est conscient des événements 'click', 'focus' et 'flou'.

Vous pouvez toujours lier des événements à vos boutons si nécessaire, mais soyez conscient que les événements dont jQuery est automatiquement conscient sont différents. Par exemple, si vous avez créé une fonction qui a été exécutée chaque fois qu'un événement "focusin" s'est produit sur votre page, une entrée déclencherait la fonction, mais pas un bouton.


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, méta, et param Vous pouvez également vérifier here ), ce qui signifie qu'ils ne peuvent pas avoir de 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 , que je considère comme un inconvénient majeur.


Juste comme une note secondaire, <button> sera implicitement soumis, ce qui peut causer des problèmes si vous voulez utiliser un bouton dans un formulaire sans le soumettre. Ainsi, une autre raison d'utiliser <input type="button"> (ou <button type="button"> )

Modifier - plus de détails

Sans un type, le button reçoit implicitement le type de submit . Peu importe le nombre de boutons ou d'entrées présents dans le formulaire, l'un d'entre eux, explicitement ou implicitement typé submit, lorsque soumis, soumettra le formulaire.

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"

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


de plus, une des différences peut provenir du fournisseur de la bibliothèque, et de ce qu'ils codent. par exemple ici j'utilise la plate-forme cordova en combinaison avec ui angulaire mobile, et tandis que les tags input / div / etc fonctionnent bien avec ng-click, le bouton peut provoquer le crash du débogueur Visual Studio, sûrement par des différences, provoquées par le programmeur; Notez que la réponse de MattC pointe sur le même problème, le jQuery est juste un lib, et le fournisseur n'a pas pensé à une fonctionnalité sur un élément, qu'il fournit sur un autre. Ainsi, lorsque vous utilisez une bibliothèque, vous pouvez rencontrer un problème avec un élément, auquel vous ne serez pas confronté avec un autre. et simplement le populaire comme input , sera la plupart du temps fixe, juste parce qu'il est plus populaire.


<button> est flexible en ce sens qu'il peut contenir du HTML. En outre, il est beaucoup plus facile de style en utilisant CSS, et le style est effectivement appliqué à tous les navigateurs. Cependant, il y a quelques inconvénients concernant Internet Explorer (Eww! IE!). Internet Explorer ne détecte pas correctement l'attribut de valeur, en utilisant le contenu du tag comme valeur. Toutes les valeurs d'un formulaire sont envoyées au serveur, que le bouton soit cliqué ou non. Cela rend l'utilisation comme un <button type="submit"> difficile et une douleur.

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


<button>
  • par défaut se comporte comme s'il avait un attribut "type =" submit "
  • peut être utilisé sans formulaire ainsi que dans les formulaires.
  • contenu textuel ou html autorisé
  • css pseudo éléments autorisés (comme: avant)
  • Le nom du tag est généralement unique à un seul formulaire

contre.

<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 des formulaires.
  • seul le contenu du texte est autorisé
  • aucun pseudo-élément css
  • même nom de tag que la plupart des éléments de formulaire (entrées)

-
Dans les navigateurs modernes, les deux éléments peuvent facilement être stylés avec css, mais dans la plupart des cas, l'élément button est préférable car vous pouvez le styliser avec des éléments html et pseudo.





html-input