Chargement...

Contrôles de formulaire en CSS

Les formulaires sont l’endroit où l’on tape, choisit et envoie. CSS peut rendre input, textarea et select plus clairs et calmes — padding lisible, bordures soignées et un indice de focus vraiment visible — tandis que HTML garde la sémantique.

Une boîte à outils des contrôles

📊 Contrôles de formulaire en un coup d’œil

Pièce Rôle au quotidien
input / textarea / select Les contrôles principaux à styler ensemble
padding + border Donner de la place et un bord clair
border-radius Adoucir les coins
:focus-visible Afficher un anneau de focus clavier/pointeur
:disabled Atténuer les champs non modifiables pour l’instant

Stylez une classe partagée (ou un groupe d’éléments) une fois pour que chaque champ appartienne à la même famille. L’apparence des boutons attend la leçon suivante.

Inputs texte — place et bords

Les inputs par défaut sont souvent inégaux selon les appareils. Réglez largeur, padding, taille de police et une bordure légère pour un confort de saisie.

Input texte de base

css
CSS Code 
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

Textarea — de la place pour écrire

Les textareas ont besoin de hauteur et du même langage de padding que les inputs. Autorisez le redimensionnement vertical pour les longues réponses ; verrouillez-le si la mise en page doit rester fixe.

Textarea confortable

css
CSS Code 
textarea {
width: 100%;
max-width: 24rem;
min-height: 7rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
resize: vertical;
}

Select — la même famille

Les listes déroulantes doivent partager bordure, rayon et padding avec les champs texte pour que le formulaire ne paraisse pas bricolé.

Select dans la même famille

css
CSS Code 
select {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

Un focus que l’on voit

N’enlevez jamais les styles de focus sans remplacement. :focus-visible dessine un anneau clair pour le clavier tout en restant calme.

Anneau de focus visible

css
CSS Code 
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
border-color: #0b5fff;
}

Champs désactivés

Les contrôles disabled doivent paraître indisponibles — opacité plus faible ou fond atténué — sans disparaître de la mise en page.

Teinte disabled

css
CSS Code 
input:disabled,
textarea:disabled,
select:disabled {
opacity: 0.6;
background: #f3f3f3;
cursor: not-allowed;
}

Une habitude calme pour les champs

Gardez un style de champ partagé, respectez l’espace du label, préservez le focus, et laissez l’habillage des boutons à la leçon Buttons.

Classe de champ partagée

css
CSS Code 
.field {
display: block;
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
}

.field:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

À vous de jouer

  1. Stylez des inputs texte/e-mail avec padding, border et border-radius.
  2. Alignez un textarea ; mettez resize: vertical.
  3. Stylez un select avec la même famille de bordure.
  4. Ajoutez outline :focus-visible + couleur de bordure — pas de outline: none nu.
  5. Atténuez un input :disabled et vérifiez qu’il se lit encore comme un champ.

Erreurs fréquentes

  • outline: none sans remplacement de focus (les utilisateurs clavier se perdent)
  • Padding / police minuscules qui rendent la saisie mobile pénible
  • Styler chaque contrôle différemment pour un formulaire au hasard
  • Transformer cette leçon en design de boutons (c’est la suivante)
  • Mélanger avec border-collapse / zébrures de tableaux (session précédente)

Résumé

  • Padding, bordure et rayon partagés unifient inputs, textareas et selects
  • Donnez hauteur et resize raisonnable aux textareas
  • Gardez un indice :focus-visible visible
  • Atténuez les champs :disabled ; ne les cachez pas
  • Laissez la cosmétique des boutons à la leçon suivante

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
7
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 33 de 35
Css Tutoriel