< bouton > < type d’entrée = & # 8220; bouton & # 8221; / > ;. Lequel utiliser?

StackOverflow https://stackoverflow.com/questions/469059

Question

Lorsqu'ils consultent la plupart des sites (y compris les SO), la plupart d'entre eux utilisent: 

<input type="button" />

au lieu de: 

<button></button>
  • Quelles sont les différences principales entre les deux, le cas échéant?
  • Existe-t-il des raisons valables d'utiliser l'une au lieu de l'autre?
  • Existe-t-il des raisons valables d'utiliser les combiner?
  • L'utilisation du < bouton > pose-t-elle des problèmes de compatibilité, étant donné que ce n'est pas très utilisé?
Était-ce utile?

La solution

  • Voici une page décrivant les différences (vous pouvez utiliser HTML dans un < bouton > < / bouton > )
  • Et une autre page décrivant pourquoi les utilisateurs évitent < bouton > < / bouton > (Indice: IE6)

Un autre problème lié à Internet Explorer lors de l’utilisation de le bouton < / > :

  

Et pendant que nous parlons d'IE, il est   eu un couple de 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 bidouillage pour obtenir des choses sous   contrôle.

Autres conseils

En guise de note complémentaire, < bouton > sera soumis de manière implicite, ce qui peut poser problème si vous souhaitez utiliser un bouton dans un formulaire sans le soumettre. Donc, une autre raison d'utiliser < input type = "bouton" > (ou < bouton type = "bouton" > )

Modifier - plus de détails

Sans type, le bouton reçoit implicitement le type de envoyez . Peu importe le nombre de boutons ou d’éléments de soumission présents dans le formulaire, l’un d’entre eux qui est explicitement ou implicitement saisi en tant que soumission est soumis, lorsque vous cliquez dessus, le formulaire sera soumis.

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.

De la page:

  

Les boutons créés avec la fonction d'élément BUTTON sont similaires aux 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   des fonctions comme et peut ressembler à un   Elément INPUT dont le type est défini sur   & # 8220; image & # 8221 ;, 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 < bouton > et < / bouton > , 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

Citation de la page des formulaires dans le manuel HTML :

  

Les boutons créés avec l'élément BUTTON fonctionnent de la même manière que 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 d'entrée 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.

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 est conscient des é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. 

<button>
  • se comporte par défaut comme s'il avait un "type =" & submit; soumettre " attribut
  • peut être utilisé sans formulaire ainsi que dans les formulaires.
  • texte ou contenu HTML autorisé
  • pseudo-éléments css autorisés (comme avant)
    • Le nom de la 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é
  • aucun pseudo-élément 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érable, car vous pouvez styliser davantage avec des éléments HTML et pseudo internes

En ce qui concerne le style CSS, le < button type = " submit " class = " Btn " > Exemple < / button > est préférable, car il vous permet d'utiliser le code CSS : before et : after pseudo classes pouvant vous aider.

En raison du < input type = "bouton" > , le rendu visuel est différent du < a > ou du < span > quand je les stylise avec des classes dans certaines situations, je les évite.

Il vaut la peine de noter la réponse actuelle actuelle <> / a> a été écrit en 2009. IE6 n'est plus une préoccupation maintenant, donc