Le bouton oublié tag_HTML/Xhtml_Production de pages Web

Remarque : Cet article a été traduit par quelqu'un pour re-comprendre la balise bouton, mais je pense qu'il y a de nombreux endroits qui méritent d'être délibérés et ce n'est pas facile à comprendre. Par conséquent, j’ai retraduit cet article sur la base de mon expérience d’apprentissage personnelle.
Texte original en anglais : http://particletree.com/features/rediscovering-the-button-element/
Pour chaque concepteur de programme, fournir aux utilisateurs une interface de style unifié est une exigence immuable . Cependant, il est extrêmement difficile d'obtenir ce style unifié sur les pages Web, car il existe des différences dans la manière dont les différents systèmes d'exploitation et les différents navigateurs expriment le contenu Web, et ces différences sont presque irrégulières. Ce problème est particulièrement important dans le processus de traitement des éléments de formulaire. Parmi eux, ce qui laisse de nombreuses personnes perplexes est le problème de l'unification des normes de performance du bouton « Soumettre ».
Par exemple, la balise d'entrée avec l'attribut type="submit" soit est très moche dans différents navigateurs (dans Firefox), soit présente des défauts d'une sorte ou d'une autre (dans Internet Explorer), soit se comporte même de manière très rigide (. dans Safari). La solution à ce problème consiste généralement à définir l'attribut d'entrée sur image, puis à concevoir vous-même une image de bouton. Mais cela ajoute beaucoup de travail supplémentaire ennuyeux à chaque fois que nous devons utiliser le bouton. Par conséquent, nous avons besoin d’une meilleure solution, plus flexible et plus significative pour les concepteurs. Heureusement, cette méthode existe déjà en pratique, elle demande juste un peu plus de travail de notre part. Les amis, permettez-moi de vous présenter notre adorable petit ami  !
Input VS Button
Voici la balise du bouton de soumission que vous utilisez :

Leurs styles de présentation dans différents navigateurs sont les suivants :

Et lorsque nous utilisons pour créer le code du bouton ci-dessus :
Envoyer
Ils se comportent comme suit :

Il n'y a aucune différence de fonctionnement et de comportement entre ces boutons et les boutons que nous avons créés ci-dessus. En plus de les utiliser pour soumettre des formulaires, vous pouvez également les désactiver, ajouter des touches de raccourci ou définir un tabindex, etc. Heureusement, à l'exception des différents styles de présentation, Safari prend en charge ces fonctions (par rapport au bouton de saisie, le bouton bouton de Safari n'a pas l'effet liquide sur la surface). La fonctionnalité la plus intéressante de la balise est que nous pouvons y placer des éléments HTML utiles, comme l'ajout d'images en utilisant le code suivant :
Soumettre
Ils ressemblent à ceci dans le navigateur :

Pas mal. En fait, selon la définition du W3C, l'élément est né pour résoudre ces différences de performances.
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.
L'élément Button - W3C
Nous devons donc trouver une solution de conception pour cela. Heureusement, Internet, avec ses données massives, peut nous fournir une aide utile pour résoudre ce problème. C’est en effet très pratique, mais malheureusement de nombreux concepteurs et développeurs de sites Web ne savent même pas que cet élément existe. Avant de décider de remplacer Wufoo (un produit réseau de l'auteur de cet article, dudo note) par l'élément bouton, je devais m'assurer que ce label et ce CSS pouvaient répondre aux exigences suivantes :
Exigences :
1. Ils doivent avoir l'apparence de boutons
2. Avoir le même style de présentation dans les différents navigateurs
3 Les styles appliqués dans les boutons peuvent également être utilisés sur les hyperliens (car Wufoo Les interactions dans sont. toujours implémentés en utilisant l'une des méthodes de soumission de formulaire ou la méthode Ajax déclenchant le lien. Ils peuvent souvent être proches les uns des autres, j'ai donc besoin qu'ils aient le même style de présentation)
4. Dans différentes circonstances, les étiquettes peuvent être flexibles et facile à modifier
5. Les événements qui se produisent pendant le processus de transmission d'informations peuvent être efficacement distingués à l'aide d'icônes et de couleurs
Face aux problèmes ci-dessus, j'ai d'abord écrit du CSS, puis j'ai résolu le problème entre navigateurs. Nous verrons ensuite :
Le résultat final

Ce n'est rien d'étonnant, c'est simple, mais très efficace. La raison pour laquelle j'aime travailler avec les boutons de cette façon est que je n'ai pas besoin de lancer Photoshop pour créer 10 000 icônes une par une. Si nous examinons le code de plus près, vous constaterez que les deux boutons suivants sont en réalité deux liens.

Enregistrer



Changer le mot de passe



Annuler