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

Le but de ceci est que de nombreuses actions dans les applications Web sont pilotées par des événements (REST), donc l'envoi de requêtes utilisateur via une URL spécifique peut initialiser ces actions. L'utilisation de styles pouvant être appliqués aux deux éléments nous offre une plus grande flexibilité dans le maintien de l'uniformité du style pour les interactions provoquées par Ajax et les boutons de soumission standard.
Maintenant, vous vous demandez peut-être pourquoi devrais-je laisser l'attribut alt de l'élément image vide ? alt est un attribut nécessaire de l'élément img. Il est utilisé pour expliquer le contenu de l'image, mais il n'y a pas de description de l'image ici, ce qui est effectivement un peu déroutant. Cependant, contrairement à l'attribut "missing", la valeur de l'attribut "null" est entièrement conforme à la norme. Elle indique au navigateur que ces images représentent des informations qui peuvent être complètement ignorées, ce qui évite également que le spectateur ne puisse pas les trouver. de l'obstruction des informations d'invite. Passez au bouton suivant. L’icône ici étant complètement redondante, nous préférons ne pas perdre de temps à l’utilisateur à regarder cette icône qui est entièrement utilisée pour obtenir un style d’interface unifié.
Feuille de style CSS
La plupart du contenu CSS utilisé pour contrôler les styles de ces boutons est très intuitif. De légères différences selon les navigateurs nous amèneront à les séparer dans le code ci-dessous. valeurs de remplissage, heureusement, tout cela est tout à fait réalisable.
/* BOUTONS */
.boutons a, .boutons bouton{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:# 565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Liens */
}
.buttons bouton{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons bouton[type]{
padding:5px 10px 5px 7px; 17px; /* Safari */
}
*:bouton html premier enfant[type]{
padding:4px 10px 3px 7px /* IE7 */
}
.boutons bouton; img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
>}
Un autre problème est qu'Internet Explorer présente des bugs lors du rendu des boutons longs. Vous pouvez trouver des informations à ce sujet sur Jehiah.cz, mais dans le code CSS ci-dessus, nous pouvons éviter le problème dans une certaine mesure en déclarant les valeurs de largeur et de débordement.

Ajoutez un peu de couleur au boutonDans Wufoo, nous utilisons des actions neutres (ici, l'auteur appelle des actions telles que changer le mot de passe des actions neutres, et "OK" et "Soumettre" "Actions du type "sont appelées actions positives, et les actions telles que "Abandonner" et "Annuler" sont appelées actions négatives). La valeur de survol est définie sur le bleu et les actions positives et négatives sont définies sur le vert et le rouge. Dans le code de style ci-dessous, nous utilisons différentes couleurs pour distinguer les actions positives telles que « ajouter » et « enregistrer » et les actions négatives telles que « annuler » et « supprimer ». Cela fait du bien, et bien sûr, vous pouvez également choisir la couleur que vous aimez.
/* STANDARD */
bouton:hover, .boutons a:hover{
background-color:#dff4ff;
border:1px solid #c2e1ef;
color:#336699;
}
.boutons a:actif{
couleur-de-fond:#6299c5;
bordure:1px solide #6299c5;
couleur:#fff;
}
/* POSITIF */
button.positive, .buttons a.positive{
color:#529214;
}
.buttons a.positive:hover, bouton.positive:hover{
background-color:#E6EFC2 ;
border:1px solid #C6D880;
color:#529214;
}
.buttons a.positive:active{
background-color:#529214;
border:1px solide #529214;
couleur:#fff;
}
/* NÉGATIF ​​*/
.boutons a.négatif, bouton.négatif{
couleur:#d12f19;
}
.boutons a.negative:hover, bouton.negative:hover{
background:#fbe3e4;
border:1px solid #fbc2c4;
color:#d12f19;
}
. boutons a.negative:active{
background-color:#d12f19;
border:1px solid #d12f19;
color:#fff;
}

RésuméLa dernière chose que je veux dire, c'est qu'il s'agit simplement d'une solution que nous avons conçue pour répondre aux besoins de Wufoo, mais qui a bien fonctionné grâce à nos efforts. Mais ce n’est pas la seule façon, vous pouvez trouver des façons plus intéressantes de rendre vos boutons arrondis ou encore plus colorés. Puisque presque n’importe quel autre élément peut être placé entre les balises
, vous pouvez également créer un très joli bouton tridimensionnel avec des coins arrondis en insérant la balise et en suivant la dernière méthode d’Alex Griffioen. Pour être honnête, j'espère que ce n'est qu'un début pour tous les concepteurs qui s'efforcent de réutiliser les interfaces dans leurs programmes. En tout cas, j'espère que vous pourrez réfléchir davantage avant d'ouvrir Photoshop pour créer un bouton de saisie, et jeter un nouveau regard sur cette balise presque oubliée, peut-être que cela vous surprendra.
Annexe : élément
en HTML4.0/xhmtl1.0Définition et utilisation
Définir un bouton. À l’intérieur de l’élément bouton, vous pouvez placer du contenu, tel que du texte ou des images. C'est la différence entre cet élément et les boutons créés à l'aide d'éléments d'entrée. Le contrôle
offre des fonctions plus puissantes et un contenu plus riche que . Tout ce qui se trouve entre les balises et correspond au contenu du bouton, y compris tout contenu de corps acceptable, tel que du texte ou du contenu multimédia. Par exemple, nous pouvons inclure une image et le texte associé dans un bouton et les utiliser pour créer une image de balisage attrayante dans le bouton.
Le seul élément interdit est le mappage d'images, car ses actions sensibles à la souris et au clavier interfèrent avec le comportement des boutons du formulaire.
Attributs sélectionnables
Description de la valeur de l'attribut DTD
désactivé désactivé Désactivez ce bouton. STF
namebutton_name spécifie un nom unique pour ce bouton. STF
type* bouton
* reset définit le type de bouton. STF
* submit
value some_value spécifie la valeur initiale du bouton. Cette valeur peut être modifiée par des scripts. STF
Attributs standards :
id, class, title, style, dir, lang, xml:lang, accesskey, tabindex
Attributs d'événement :
onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup