CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Styling Avancé des Formulaires avec CSS

Styling Avancé des Formulaires avec CSS

Styles les inputs
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

Introduction au Styling des Inputs et Textareas

Objectifs

Les objectifs de cette vidéo incluent :
- Apprendre à styliser les formulaires avec CSS pour une meilleure lisibilité et ergonomie.
- Maîtriser la gestion des états hover et focus des inputs.
- Savoir contrôler le redimensionnement des textareas.

Résumé

Découvrez les techniques avancées pour styler vos formulaires, inputs et textareas avec du CSS, en garantissant une expérience utilisateur optimale.

Description

Dans cette leçon, nous explorons les bonnes pratiques de styling des formulaires avec CSS. Nous commencerons par donner une taille appropriée à nos éléments input et textarea, en tenant compte de l'espace disponible dans le conteneur principal. Nous allons ensuite ajouter du padding pour améliorer l'ergonomie et la lisibilité.

Nous supplanterons les bordures par défaut des navigateurs avec des bordures personnalisées de 1 pixel de style solide et de couleur #e8e8e8. Nous explorerons également la gestion des états hover et focus pour les inputs, afin de renforcer l'interactivité visuelle. Vous apprendrez à utiliser la propriété outline pour personnaliser les effets de focus par défaut des navigateurs.

Un autre point crucial est la gestion du redimensionnement des textareas pour éviter que l'utilisateur ne déstructure la mise en page du formulaire. Nous définirons des valeurs minimales et maximales pour la hauteur et la largeur des textareas. Enfin, nous aborderons le styling des placeholders et l'ajustement du bouton de soumission en utilisant des sélecteurs d'attributs.

Voir plus

Questions - réponses

Pourquoi est-il important d'ajouter du padding aux inputs de formulaire ?
Ajouter du padding aux inputs de formulaire permet d'améliorer l'ergonomie et la lisibilité en offrant davantage d'espace intérieur pour le contenu.
Comment peut-on gérer le redimensionnement des textarea pour éviter de déstructurer la mise en page ?
On peut limiter le redimensionnement des textarea en définissant des valeurs minimum et maximum pour la hauteur et la largeur à l'aide des propriétés CSS min-width, max-width, min-height et max-height.
Quelle est la différence entre les propriétés border et outline en CSS ?
La propriété border crée une bordure autour de l'élément en influençant son layout, tandis que outline dessine une ligne autour de l'élément sans affecter sa taille ou son placement.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 7 months
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 year
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 years
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 years
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !