La normalisation du Web a reçu de plus en plus d'attention de la part de tous.Lors de la création de pages Web conformes aux normes Web, nous rencontrons souvent des problèmes de forme dans ce domaine.L'article d'aujourd'hui vous présente certaines structures sémantiques de forme. j'espère que cela aidera la mise en page CSS de tout le monde.
1. Utilisez les balises de champs et de légende
Dans le formulaire, nous regroupons souvent les informations dans le formulaire. Par exemple, dans le formulaire d'inscription, nous pouvons regrouper les informations d'inscription en informations de base (généralement obligatoires) et informations détaillées (généralement facultatives). Alors, comment pouvons-nous faire mieux ? il? On peut envisager d'ajouter les deux balises suivantes au formulaire :
fieldset : formulaires de groupe. Un formulaire peut avoir plusieurs jeux de champs.
légende : décrire le contenu de chaque groupe
| Voici le contenu cité : <form id="demoform" class="democss" action=""> <ensemble de champs> <legend>Registre de base</legend> <p>Prénom : <input type="text" name="fname" value="" /></p> ... </fieldset> <ensemble de champs> <legend>Registre détaillé</legend> <p>Intérêt : <input type="text" name="interest" value="" /></p> ... </fieldset> ... </form> |
L'ensemble de champs est bordé par défaut et la légende est généralement affichée par défaut dans le coin supérieur gauche. Mais dans certains cas, vous ne souhaiterez peut-être pas laisser les styles par défaut ou les dispositions par défaut des jeux de champs et des légendes affecter l'esthétique de la conception.
Solution : Définissez les bordures du fieldset sur 0 et l'affichage de la légende sur none en CSS.
2. Utilisez des balises d'étiquette
Nous attribuons une étiquette à l'étiquette de texte dans le formulaire et utilisons l'attribut for pour l'associer au composant de formulaire. L'effet est que lorsque l'on clique sur l'étiquette de texte, le curseur s'affiche dans le composant de formulaire correspondant.
| Voici le contenu cité : <form id="demoform" class="democss" action=""> <ensemble de champs> <legend>Registre de base</legend> <p> <label for="fname">Prénom :</label> <input type="text" id="fname" name="fname" value="" /> </p> ... </fieldset> <ensemble de champs> <legend>Registre détaillé</legend> <p> <label for="interest">Intérêt :</label> <input type="text" id="interest" name="interest" value="" /> </p> ... </fieldset> ... </form> |
En plus des méthodes ci-dessus, nous pouvons également utiliser label pour imbriquer l'intégralité du composant de formulaire et de l'étiquette de texte, par exemple :
| Voici le contenu cité : <étiquette pour="fname"> Prénom: <input type="text" id="fname" name="fname" value="" /> </étiquette> |
Selon la spécification, le texte sera automatiquement associé aux composants de formulaire adjacents, mais malheureusement, le navigateur grand public actuel, IE6, ne prend pas en charge cette fonctionnalité.
3. Utilisez les attributs accesskey et tabindex
Les sites Web doivent prendre en compte davantage de situations d'utilisation. Par exemple, lorsqu'il n'y a pas de dispositif de curseur (comme une souris), le formulaire peut être rempli à l'aide d'opérations au clavier. Pour l'instant, cliquer n'a aucune signification. À ce stade, nous choisissons la clé d'accès de l'étiquette (touche de raccourci, valeur de l'attribut alt+accesskey sous IE, alt+shift+ valeur de l'attribut accesskey sous FF) et l'attribut tabindex (touche Tab, la valeur de l'attribut tabindex est une séquence) à ajouter à l'étiquette du formulaire, tels que l'étiquette, l'entrée, etc.
| Voici le contenu cité : <label for="fname" accesskey="f" tabindex="1" >Prénom :</label> <input type="text" id="fname" name="fname" value="" /> |
4. Utilisez la balise optgroup
Le rôle de la balise optgroup est de définir un ensemble d'options dans une liste de sélection. Nous pouvons utiliser la balise optgroup pour classer les options de l'élément select et utiliser l'attribut label La valeur de l'attribut sera affichée sous la forme d'un titre indenté non sélectionnable dans la liste déroulante (select). Remarque : les optgroups ne prennent pas en charge l'imbrication.
| Voici le contenu cité : <select name="Chine"> <étiquette optgroup="Jiangsu"> <option value="nj">Nankin</option> <option value="sz">Suzhou</option> </groupe optant> <étiquette optgroup="Zhejiang"> <option value="hz">Hangzhou</option> <option value="wz">Wen Zhou</option> </groupe optant> </sélectionner> |
Il y a un petit bug dans IE6.0 (non présent dans FireFox) : lors de l'utilisation des touches fléchées du clavier pour sélectionner, dans IE, lorsque l'élément sélectionné passe d'une option d'un optgroup à une option d'un autre optgroup, le changement ne sera pas être déclenché. La solution est la suivante : ajoutez des événements onkeydown ou onkeyup pour aider à résoudre le problème.
5. Utilisez des balises de bouton
Définition et utilisation
Défini comme un bouton de soumission. Dans 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 le bouton de l'élément d'entrée.
<button><img src="images/click.gif" alt="Cliquez sur moi !" />Cliquez sur moi !</button>
Le bouton fournit plus de fonctions et un contenu plus riche que la saisie. Le bouton sépare le texte du bouton et vous pouvez ajouter des images à l'intérieur du bouton, donnant au texte et aux images plus de styles parmi lesquels choisir, rendant le bouton rigide plus vivant.
Et l’utilisation de balises de bouton sera plus sémantique que les boutons de saisie et pourra être comprise simplement à partir du sens littéral.