Formulaire CSS

En utilisant CSS, vous pouvez grandement améliorer l'apparence des formulaires HTML :

Essayez-le vous-même

Définir le style du champ d'entrée

Utiliser width Attribut pour déterminer la largeur du champ d'entrée :

Exemple

input {
  width: 100%;
}

Essayez-le vous-même

L'exemple précédent s'applique à tous les éléments <input>. Si vous ne souhaitez définir le style que pour un type d'entrée spécifique, vous pouvez utiliser un sélecteur d'attribut :

  • input[type=text] - Ne sélectionne que les champs de texte
  • input[type=password] - Ne sélectionne que les champs de mot de passe
  • input[type=number] - Ne sélectionne que les champs numériques
  • etc...

Remplissage du champ d'entrée

Utiliser padding l'attribut pour ajouter de l'espace dans le champ de texte.

Avis :Si vous avez beaucoup de champs d'entrée, vous devrez peut-être ajouter une marge extérieure pour ajouter plus d'espace autour d'eux :

Exemple

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Essayez-le vous-même

Veuillez noter que nous avons mis box-sizing l'attribut est configuré en border-boxCela assure que la largeur et la hauteur totales de l'élément incluent la marge interne (remplissage) et la bordure finale.

Dans nos Box Sizing CSS Dans cette section, apprenez à propos de box-sizing Pour plus d'informations sur les attributs.

Un champ d'entrée avec bordure

Utilisez border Attribut pour modifier l'épaisseur et la couleur de la bordure, et utiliser border-radius pour ajouter des arrondis :

Exemple

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

Essayez-le vous-même

Si vous avez besoin uniquement d'une bordure inférieure, utilisez border-bottom Attribut :

Exemple

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

Essayez-le vous-même

un champ d'entrée coloré

Utilisez background-color pour ajouter une couleur de fond à l'entrée, et utiliser color pour modifier la couleur du texte :

Exemple

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Essayez-le vous-même

le champ d'entrée qui obtient le focus

Par défaut, certains navigateurs ajoutent un contour bleu autour du champ d'entrée lors de l'obtention du focus (clic). Vous pouvez supprimer ce comportement en ajoutant outline: none; pour supprimer ce comportement.

Utiliser :focus Le sélecteur peut définir un style pour un champ d'entrée lorsque celui-ci obtient le focus :

Exemple 1

input[type=text]:focus {
  background-color: lightblue;
}

Cliquez dans le champ de texte :

Essayez-le vous-même

Exemple 2

input[type=text]:focus {
  border: 3px solid #555;
}

Cliquez dans le champ de texte :

Essayez-le vous-même

Champ de saisie avec icône/image

Si vous souhaitez inclure une icône dans le champ de saisie, utilisez background-image La propriété, et la combinaison avec background-position Les propriétés ensemble pour définir. Il convient également de noter que nous avons ajouté une marge interne gauche plus grande (padding-left) pour laisser de la place à l'icône :

Exemple

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

Essayez-le vous-même

Champ de recherche avec animation

Dans cet exemple, nous utilisons CSS transition La propriété pour définir l'animation de la variation de largeur lors du focus de la zone de saisie de recherche. Plus tard, vous découvrirez dans nos Transitions CSS Dans ce chapitre, vous apprendrez davantage sur transition connaissances des propriétés.

Exemple

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

Essayez-le vous-même

Définir le style des zones de texte

Avis :Utiliser resize La propriété peut empêcher la modification de la taille des textareas (désactiver le 'gripper' en bas à droite) :

Exemple

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Essayez-le vous-même

Définir le style des menus de sélection

Exemple

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Essayez-le vous-même

Définir le style des boutons d'entrée

Exemple

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* Astuce : utilisez width: 100%, pour obtenir un bouton de pleine largeur */

Essayez-le vous-même

Pour plus de connaissances sur la manière d'ajuster le style des boutons avec CSS, apprenez notre Boutons CSS Tutoriel.

Menu réactif

Veuillez ajuster la taille de la fenêtre de l'éditeur TIY pour voir les effets. Lorsque la largeur de l'écran est inférieure à 600 pixels, les deux colonnes sont empilées verticalement plutôt que horizontalement.

Avancé : les exemples suivants utilisent Requêtes média Pour créer un formulaire réactif. Dans le prochain chapitre, vous apprendrez plus sur ce sujet.

Voir le menu réactif