Un formulaire avec des étiquettes stylisées
Comment styliser une étiquette de formulaire avec CSS Un élément de formulaire utilisé pour étiqueter les différents champs et zones de saisie d'un formulaire de page Web est l'élément label. Il peut être stylisé à l'aide des règles de feuille de style en cascade.
Étape 1
Pour styliser les éléments d'étiquette de la manière dont ils apparaissent dans l'image de l'introduction, vous devez utiliser l'élément d'étiquette avec l'attribut « for ». De plus, vous devez fermer l'élément label avant d'ajouter l'élément "input" lui-même. Le code HTML du formulaire complet est indiqué dans l'illustration.
Vidéo du jour
Étape 2
Pour styliser les éléments d'étiquette, j'ai fait en sorte que les étiquettes s'affichent sous forme d'éléments de niveau bloc, qui ont été flottants vers la gauche. Ensuite, j'ai attribué une largeur aux étiquettes afin que les champs de saisie soient tous à une distance uniforme des étiquettes. J'ai attribué une couleur et mis le texte en gras. J'ai utilisé le contenu généré pour ajouter deux points (: ) après l'étiquette. (Les deux points peuvent ne pas apparaître dans tous les navigateurs.)
Voici le CSS :
étiquette { couleur: #B4886B; font-weight: gras; bloc de visualisation; largeur: 150px; flotteur: gauche; } libellé: après { contenu: ": " }
Étape 3
Pour être complet, je vais également vous montrer le CSS utilisé pour styliser l'ensemble de champs, car les éléments d'étiquette sont entourés d'un ensemble de champs encadré.
Voici ce CSS :
fieldset { border: 1px solide #CCA383; largeur: 400px; arrière-plan: #FFE8EF; remplissage: 3px; } légende de l'ensemble de champs { arrière-plan: #CCA383; rembourrage: 6px; font-weight: gras; }
Étape 4
Vous pouvez faire beaucoup d'autres choses pour styliser les éléments d'étiquette. Mon exemple n'est qu'une façon de le faire.
Le formulaire HTML
Choses dont vous aurez besoin
Une connaissance pratique du HTML
Une connaissance pratique de CSS
