Question


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?
  • Est-ce que <button> venir avec des problèmes de compatibilité, vu qu'il n'est pas très largement utilisé?

1431
2018-01-22 13:14


origine


Réponses:


  • Voici une page décrivant les différences (en gros, vous pouvez mettre 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 que nous parlons de IE, il est   eu quelques bugs liés à la   largeur des boutons. Ça va mystérieusement   ajouter un rembourrage supplémentaire lorsque vous essayez   pour ajouter des styles, ce qui signifie que vous devez ajouter   un petit hack pour obtenir des choses sous   contrôle.


588
2018-01-22 13:20



Juste comme une note de côté, <button> Soumettre implicitement, ce qui peut causer des problèmes si vous souhaitez 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, 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"

270
2018-04-09 20:13



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éé avec l'élément INPUT, mais   ils offrent un rendu plus riche   possibilités: l'élément BUTTON peut   avoir du contenu. Par exemple, un BOUTON   élément 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   permet le contenu.

L'élément Button - W3C


159
2018-01-22 13:19



Dans un <button> élément que 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 le <input> élément.


38
2018-03-28 04:27



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 <button> et </button> tags, tandis que d'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 d'entrée du navigateur au navigateur


36
2018-01-22 13:18



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.


16
2018-03-01 08:17



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

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

Un contribution (<input>) représente un champ de données: donc certaines données utilisateur que vous voulez envoyer 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 (<button>) l'élément est assez polyvalent:

  • vous pouvez imbriquer des éléments dans un bouton, tels que des images, des paragraphes ou en-têtes;
  • les boutons peuvent également contenir ::before et ::after pseudo-éléments;
  • les boutons supportent le disabled attribut. Cela le rend facile à tourner les allumer et les éteindre.

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


16
2017-11-08 14:31



Citant le 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.


15
2018-01-22 13:19



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.


8
2017-12-21 17:12