CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Styler les Formulaires avec CSS

Styler les Formulaires avec CSS

Positionner les labels et les input
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€ 44,50€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
89,00€ 44,50€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Personnalisation des Élémentes de Formulaires

Objectifs

Les objectifs de cette vidéo sont les suivants :

  • Apprendre à styliser les éléments de formulaires avec CSS
  • Comprendre l'importance des propriétés CSS telles que margin, padding, et border
  • Découvrir comment convertir des éléments en inline-block et block

Résumé

Découvrez comment personnaliser les éléments de formulaires en utilisant les propriétés CSS.

Description

Dans cette leçon, nous allons explorer les diverses méthodes de stylisation des formulaires. Vous apprendrez à utiliser les propriétés CSS pour améliorer l'apparence et l'ergonomie de vos formulaires. Nous commencerons par styliser le fieldset en ajustant ses marges, son padding, sa bordure, et sa couleur de fond. Ensuite, nous aborderons la mise en forme des labels et des inputs pour qu'ils s'alignent correctement et occupent correctement l'espace disponible.

Pour les labels, nous verrons pourquoi il est nécessaire de les convertir en inline-block afin de leur attribuer des dimensions spécifiques. Vous verrez également comment ajuster la taille des éléments input pour qu'ils se positionnent harmonieusement à côté des labels. Enfin, nous discuterons des techniques permettant de disposer les éléments les uns en dessous des autres en utilisant des display block.

Cette vidéo est donc essentielle pour quiconque souhaite améliorer l'apparence de ses formulaires et offrir une meilleure expérience utilisateur à travers des designs plus intuitifs et attrayants.

Voir plus

Questions fréquentes

Pourquoi le label n'accepte-t-il pas de dimensions directement assignées?
Le label est un élément inline par défaut, ce qui signifie qu'il ne peut pas recevoir de dimensions ou de marges. Pour changer cela, il doit être converti en inline-block.
Comment faire pour que les éléments input soient de la même taille?
Pour que les éléments input soient de la même taille, il faut assigner une certaine largeur (width) à ces éléments, en veillant à les convertir en inline-block si nécessaire.
Qu'est-ce que représente la propriété padding en CSS?
La propriété padding représente l'espace intérieur entre le contenu d'un élément et sa bordure. Elle permet de créer des espaces internes pour que le contenu ne soit pas collé à la bordure de l'élément.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 11 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 2 ans
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 !