CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Mise en forme des labels et des inputs en CSS

Mise en forme des labels et des inputs en CSS

Styler les labels
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription

89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
4,5
89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de :
- Apprendre à formater les éléments de formulaire en CSS.
- Comprendre l'utilisation des tailles de police et des marges pour un meilleur affichage.
- Savoir utiliser les pseudo-éléments CSS pour ajouter du contenu décoratif.

Apprenez à formater les labels et les inputs en CSS pour améliorer l'interface utilisateur.

Dans cette leçon, nous allons explorer la mise en forme de nos labels et de nos inputs en CSS. Nous commencerons par ajuster la taille de la police, qui doit être cohérente avec celle de nos labels à 16 pixels. Il est recommandé de définir explicitement la police pour les inputs et les labels, comme Roboto, afin de garantir une uniformité sur tous les navigateurs.


Ensuite, nous allons ajouter un margin-bottom aux labels pour les espacer légèrement des champs de formulaire. Nous appliquerons aussi une mise en forme en gras pour rendre les labels plus visibles.


Pour améliorer l'expérience utilisateur, nous mettrons en place un curseur de type pointer lorsqu'un utilisateur survole un label, indiquant que ce dernier est cliquable et qu'il active le champ correspondant. Enfin, nous aborderons le style de l'astérisque (*) pour les champs obligatoires, en utilisant les pseudo-éléments CSS :before et :after.

Voir plus
Questions réponses
Pourquoi est-il important de définir explicitement la taille de la police pour les inputs ?
Définir explicitement la taille de la police pour les inputs assure une cohérence visuelle sur tous les navigateurs.
Que fait la propriété CSS 'cursor: pointer' sur un label ?
La propriété 'cursor: pointer' change le curseur en une main lorsqu'on survole le label, indiquant qu'il est cliquable.
Comment utilise-t-on les pseudo-éléments ':before' et ':after' pour ajouter du contenu en CSS ?
Les pseudo-éléments ':before' et ':after' permettent d'ajouter du contenu avant ou après un élément spécifique, utilisé souvent pour du contenu décoratif en CSS.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 10 mois
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 an
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 4 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !