Quels sont les inconvénients de la balise <button>?
J'ai commencé à utiliser une feuille de style css diagnostique, par exemple . http://snipplr.com/view/6770/css-diagnostics--highlight-deprecated-html-with-css--more/
Une des règles suggérées met en évidence les balises d’entrée avec le type submit, avec la recommandation d’utiliser <button> comme solution plus sémantique. Quels sont les avantages ou les inconvénients de <button> avec le type submit que vous avez rencontré (comme avec la compatibilité du navigateur)?
Soyons clairs. Je comprends la spécification de <button>, elle a un début et une fin définis, elle peut contenir divers éléments, alors que l’entrée est un singlet et ne peut pas contenir de substance. Ce que je veux savoir, c'est essentiellement si c'est cassé ou non. Je voudrais savoir comment bouton est utilisable à l'heure actuelle. La première réponse ci-dessous semble impliquer qu'il est cassé pour des utilisations sauf en dehors des formulaires, malheureusement.
Editer pour 2015
Le paysage a changé! J'ai 6 ans d'expérience supplémentaire dans l'utilisation de Button, et les navigateurs sont quelque peu passés de IE6 à IE7. Je vais donc ajouter une réponse qui détaille ce que j'ai découvert et ce que je suggère.
Répondre d'un point de vue ASP.NET.
J'étais excité quand j'ai trouvé cette question et du code pour un contrôle ModernButton, qui est finalement un contrôle <button>.
Alors j'ai commencé à ajouter toutes sortes de boutons, décorés avec des balises <img /> à l'intérieur pour les faire ressortir. Et tout a très bien fonctionné ... dans Firefox et Chrome.
Ensuite, j'ai essayé IE6 et j'ai détecté "une valeur Request.Form potentiellement dangereuse", car IE6 soumet le code HTML à l'intérieur du bouton, qui, dans mon cas, contient des balises HTML. Je ne veux pas désactiver l'indicateur validateRequest, parce que j'aime bien ce bit supplémentaire de validation des données.
Alors j’ai écrit du javascript pour désactiver ce bouton avant la soumission. Travaillait très bien dans une page de test, avec un bouton, mais lorsque je l’ai essayé sur une page réelle, qui comportait d’autres balises <button>, il a de nouveau explosé. Parce que IE6 soumet TOUT le code HTML des boutons. Alors maintenant, j'ai toutes sortes de codes pour désactiver les boutons avant de les envoyer.
Même problème avec IE7. Heureusement, IE8 a résolu ce problème.
Beurk. Je vous recommande de ne pas suivre cette voie SI vous utilisez ASP.NET.
Mettre à jour:
J'ai trouvé une bibliothèque qui semble prometteuse pour résoudre ce problème.
Si vous utilisez le script ie8.js de cette bibliothèque: http://code.google.com/p/ie7-js/
Cela pourrait marcher très bien. IE8.js met IE5-7 à niveau avec IE8 avec la balise button. La valeur soumise devient la valeur réelle et un seul bouton est envoyé.
Lorsque vous utilisez <button>, spécifiez toujours le type, car les navigateurs utilisent par défaut différents types.
Cela fonctionnera de manière cohérente sur tous les navigateurs:
<button type="submit">...</button><button type="button">...</button>
De cette façon, vous obtenez tous les bienfaits de <button>, aucun inconvénient.
Tout ce que vous devez savoir: W3Schools <button> Tag
La balise est prise en charge par tous les principaux navigateurs.
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émentinputpour créer des boutons dans un formulaire HTML.
Avantages:
- L'étiquette d'affichage ne doit pas nécessairement être identique à la valeur soumise. Idéal pour i18n et "Supprimer cette ligne"
- Vous pouvez inclure des balises telles que
<em>et<img>
Les inconvénients:
- Certaines versions de MSIE utilisent par défaut
type="button"au lieu detype="submit", vous devez donc être explicite - Certaines versions de MSIE considéreront tous les
<button>comme des succès, vous ne pourrez donc pas savoir lequel a été cliqué dans un formulaire de bouton d'envoi multiple. - Certaines versions de MSIE soumettront le texte affiché à la place de la valeur réelle
De https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button :
IE7 a un bogue dans lequel lors de la soumission d'un formulaire avec Click me, les données POST envoyées auront pour résultat myButton = Click me au lieu de myButton = foo . IE6 a un bogue encore pire où soumettre un formulaire via un bouton soumettra TOUS les boutons du formulaire, avec le même bogue que IE7 . Ce bogue a été corrigé dans IE8.
Une bizarrerie importante à connaître: dans un formulaire contenant un élément <button/>, IE6 et IE7 n'enverront pas le formulaire lorsque l'utilisateur cliquera sur l'élément <button/>. Les autres navigateurs, par contre, soumettront le formulaire.
En revanche, aucun navigateur ne soumet le formulaire lorsque l’on clique sur les éléments <input type="button"/> ou <button type="button"/>. Et naturellement, tous les navigateurs soumettront le formulaire lorsque vous cliquerez sur les éléments <input type="submit"/> ou <button type="submit"/>.
Comme le dit la réponse de @ orip, pour obtenir un comportement de soumission cohérent sur tous les navigateurs, utilisez toujours <button type="button" /> ou <button type="submit" /> dans un élément <form/>. Ne laissez jamais l'attribut type.
J'ai déjà eu quelques expériences avec les bizarreries de <button>, 6 ans plus tard. Voici donc mes suggestions:
Si vous êtes encore supportant IE6 ou IE7, soyez très prudent avec button, le comportement est très bogué avec ces navigateurs, dans certains cas, ils soumettent le innerHtml à la place de value = ' et toutes les valeurs de bouton au lieu d'un comportement unique et stupide comme ça. Alors testez bien ou évitez pour le navigateur.
Sinon: Si vous continuez de supporter IE8,
<a href='http://example.com'><button></button></a>ne fonctionne pas bien, et probablement tout autre élément dans lequel vous imbriquerez un bouton dans un élément cliquable. Alors faites attention à cela.Sinon: si vous utilisez un
<button>principalement en tant qu'élément pour cliquer sur votre javascript, et qu'il est en dehors d'un formulaire, faites-le<button type='button'>et tout ira bien!Sinon: Si vous utilisez
<button>dans un formulaire, veillez à ce que le type par défaut de<button>soit réellement<button type='submit'>dans (la plupart des) cas. Soyez donc explicite avec votre type et votrevalue, comme:<button type='submit' value='1'>Search</button>.
Notez que: l’utilisation d’une classe bouton-mimique, comme le .btn de Bootstrap, vous permet d’apparaître comme <div> ou <a> ou même <button> exactement comme vous le souhaitez et, dans le cas de <a>, d’avoir un comportement de secours plus utile. Pas une mauvaise option.
TLDR; Ok à utiliser si vous ne vous souciez pas des anciens navigateurs, mais Bootstrap fournit des alternatives CSS encore plus robustes et visuellement similaires qu'il vaut la peine d'examiner.
Est-ce cassé ou non:
Comme d'habitude, la réponse est "cela fonctionne très bien dans tous les principaux navigateurs, mais présente les particularités suivantes dans IE.}" "Je ne pense pas que ce sera un problème pour vous.
La balise <button> est prise en charge par tous les principaux navigateurs. Le seul problème de support réside dans ce que Internet Explorer soumettra en appuyant sur un bouton.
Les principaux navigateurs soumettront le contenu de l'attribut value. Internet explorateur soumettra le texte entre les balises <button> et </button>, tout en soumettant la valeur de toutes les autres dans le formulaire, au lieu de celle sur laquelle vous avez cliqué.
Pour vos besoins, tout en nettoyant l'ancien HTML, cela ne devrait pas être un problème.
Sources:
Voici un site qui explique les différences: http://www.javascriptkit.com/howto/button.shtml
Fondamentalement, la balise d’entrée n’autorise que le texte (bien que vous puissiez utiliser une image d’arrière-plan), tandis que le bouton vous permet d’ajouter des images, des tableaux, des divs, etc. En outre, il n’est pas nécessaire qu’il soit imbriqué dans une balise de formulaire.
Vous pourriez également rencontrer ces problèmes:
- jQuery ne peut pas cibler le bouton (pas sa faute, cependant): <button> dans IE7
- Plusieurs variables de demande s'il existe> 1
<button>s: http://www.peterbe.com/plog/button-tag-in-IE
Une autre chose est liée à son style en utilisant la technique porte coulissante : vous devez insérer une autre étiquette, par exemple. <span> pour le faire fonctionner.
en ce qui me concerne, la différence entre les balises submit et button est la suivante: vous donne la possibilité d'afficher un texte différent de celui de l'élément
Supposons que vous ayez une liste de produits, puis à côté de chaque produit, vous souhaitez qu'un bouton l'ajoute au panier du client:
product1 : <add to cart>
product2 : <add to cart>
product3 : <add to cart>
alors vous pourriez faire ceci:
<button name="buy" type="submit" value="product2"> add to cart </button>
Maintenant le problème est que IE enverra le formulaire avec value = "add to cart" au lieu de value = "product2"
Le moyen le plus simple de résoudre ce problème consiste à ajouter onclick = "this.value = 'product2'"
Donc ça:
<button name="buy" type="submit" value="product2" onclick="this.value='product2'"> add to cart </button>
fera l'affaire sur tous les principaux navigateurs - j'ai utilisé cela sur un formulaire avec plusieurs boutons et fonctionne avec Chrome Firefox et IE