Formulaires CSS

Un exemple de formulaire, nous utilisons CSS pour afficher les éléments de formulaire HTML :

Styles de saisie (input)

Utilisez la propriété width pour définir la largeur de la zone de saisie :

Dans les exemples ci-dessus, la largeur de tous les éléments <input> est définie sur 100%. Si vous souhaitez uniquement définir un type spécifique d'input, vous pouvez utiliser les sélecteurs d'attributs suivants :

• input[type=text]- Sélectionne les champs de saisie de texte
• input[type=password]- Sélectionne les champs de saisie de mot de passe
• input[type=number]- Sélectionne les champs de saisie numériques
• ...

Marge intérieure du champ de saisie

UtilisationpaddingLa propriété peut ajouter du padding à l'intérieur de la zone de saisie.

Notez que nous avons définibox-sizingLa propriété estborder-boxCela garantit que le navigateur affiche la zone de saisie avec la largeur et la hauteur spécifiées, y compris la bordure et le padding.
Pour plus de contenu, vous pouvez lireCSS3 Box Sizing 。

Bordure de l'entrée (input)

UtilisationborderLa propriété peut modifier la taille ou la couleur de la bordure de l'entrée. Utilisezborder-radiusLa propriété peut ajouter des coins arrondis à l'entrée :

Si vous voulez seulement ajouter une bordure inférieure, vous pouvez utiliserborder-bottomPropriété :

Couleur de l'entrée (input)

Vous pouvez utiliserbackground-colorpropriété pour définir la couleur d'arrière-plan du champ de saisie,colorla propriété est utilisée pour modifier la couleur du texte :

Focus du champ de saisie (input)

Par défaut, certains navigateurs auront un contour bleu lorsque le champ de saisie reçoit le focus (en cliquant sur le champ de saisie). Nous pouvons définir le style du champ de saisie suroutline: none;pour ignorer cet effet.

Utilisation:focusLe sélecteur peut définir le style du champ de saisie lorsqu'il reçoit le focus :

Icône du champ de saisie (input)

Si vous souhaitez ajouter une icône dans le champ de saisie, vous pouvez utiliserbackground-imagepropriété et le positionnementbackground-positionpropriété. Remarque : définissez la marge gauche de l’icône pour lui donner un peu d’espace :

Champ de recherche animé

L’exemple suivant utilise CSStransitionpropriété, qui fait que le champ de saisie s’étend vers la droite lorsqu’il reçoit le focus. Vous pouvez utiliser la sectionAnimations CSSpour voir plus de contenu.

Style de zone de texte (textarea)

Remarque :Utilisationresizepropriété pour désactiver la capacité de redimensionnement de la zone de texte (généralement en faisant glisser le coin inférieur droit pour redimensionner).

Styles du menu déroulant (select)

Styles de boutons

Pour plus de contenu, veuillez consulter notretutoriel sur les boutons CSS.

Formulaires responsives

Les formulaires responsives peuvent réorganiser les éléments en fonction de la taille de la fenêtre du navigateur. Nous pouvons redimensionner la fenêtre du navigateur pour voir l'effet :

Avancé :L'exemple suivant utiliseRequêtes média CSS3pour créer un formulaire responsive.