Comment styliser des formulaires avec CSS: guide du débutant

Les applications collectent principalement des données via des formulaires. Prenez un formulaire dinscription générique, par exemple: il existe plusieurs champs permettant aux utilisateurs de saisir des informations telles que leur nom, leur adresse e-mail, etc.

Autrefois, les sites Web disposaient de formulaires HTML simples et ennuyeux avec pas de styles. Cétait avant que CSS ne change tout. Nous pouvons maintenant créer des formulaires plus intéressants et plus vivants en utilisant les dernières fonctionnalités de CSS.

Ne me croyez pas sur parole. Voici à quoi ressemble un formulaire HTML typique sans CSS.

Voici ce même formulaire agrémenté dun peu de CSS .

Dans ce didacticiel, nous allons vous montrer comment recréer le formulaire ci-dessus ainsi que quelques autres modifications que vous pouvez mettre en œuvre pour créer des formulaires visuellement impressionnants et conviviaux.

Nous allons montrer comment styliser des formulaires avec CSS en six étapes:

1. Réglage box-sizing
2. Sélecteurs CSS pour les éléments dentrée
3. Méthodes de style de base pour les champs de saisie de texte
4. Style dautres types dentrée
5. Pseudo-classes de linterface utilisateur
6. Entrées non personnalisables

Avant de plonger, il est important de comprendre quil ny a pas de style spécifique pour les formulaires. Les possibilités ne sont limitées que par votre imagination. Ce guide est destiné à vous aider à vous lancer dans la création de vos propres designs uniques avec CSS.

Commençons!

Définition du dimensionnement des boîtes

Je mets généralement * {box-sizing:border-box;} non seulement pour les formulaires, mais aussi pour les pages Web. Lorsque vous le définissez, la largeur de tous les éléments contiendra le remplissage.

Par exemple, définissez la largeur et le remplissage comme suit.

.some-class { width:200px; padding:20px;}

Le .some-class sans box-sizing:border-box aura une largeur supérieure à 200px, ce qui peut être un problème. Cest pourquoi la plupart des développeurs utilisent border-box pour tous les éléments.

Voici une meilleure version du code. Il prend également en charge les pseudo-éléments :before et :after.

*, *:before, *:after { box-sizing: border-box;}

Astuce: Le sélecteur * sélectionne tous les éléments du document.

Sélecteurs CSS pour les éléments dentrée

Le moyen le plus simple de sélectionner éléments dentrée consiste à utiliser des sélecteurs dattributs CSS.

Ces sélecteurs sélectionneront tous les éléments dentrée dans le document. Si vous devez spécifier des sélecteurs, vous devrez ajouter des classes aux éléments.

<input type="text" class="signup-text-input" />

Ensuite:

.signup-text-input { // styles here}

Méthodes de style de base pour les champs de saisie de texte sur une seule ligne

Les champs sur une seule ligne sont les champs de saisie les plus couramment utilisés dans les formulaires. Habituellement, une entrée de texte sur une seule ligne est une simple boîte avec une bordure (cela dépend du navigateur).

Voici le balisage HTML pour un champ sur une seule ligne avec un espace réservé.

<input type="text" placeholder="Name" />

Cela ressemblera à ceci:

Vous pouvez utiliser ce qui suit Propriétés CSS pour rendre ce champ de saisie plus attractif.

• Padding (pour ajouter un espacement interne)
• Margin (pour ajouter une marge autour du champ de saisie)
• Bordure
• Ombre de la boîte
• Rayon de la bordure
• Largeur
• Police

Zoomons dans chacune de ces propriétés.

Remplissage

Ajouter un espace intérieur au champ de saisie peut aider à améliorer la clarté. Vous pouvez accomplir cela avec la propriété padding.

input { padding: 10px;}

Marge

Sil y a dautres éléments à proximité de votre champ de saisie, vous pouvez ajouter une marge autour de celui-ci pour éviter le clustering.

input { padding:10px; margin:10px 0; // add top and bottom margin}

Bordure

Dans la plupart des navigateurs, les champs de saisie de texte ont des bordures que vous pouvez personnaliser.

.border-customized-input { border: 2px solid #eee;}

Vous pouvez également supprimer complètement une bordure.

.border-removed-input { border: 0;}

Conseil: Soyez sûr pour ajouter une couleur darrière-plan ou box-shadow lorsque la bordure est supprimée. Sinon, les utilisateurs ne verront pas lentrée.

Certains concepteurs Web préfèrent nafficher que la bordure inférieure car cela ressemble un peu à écrire sur une ligne dans un cahier.

.border-bottom-input { border:0; // remove default border border-bottom:1px solid #eee; // add only bottom border}

Box shadow

Vous pouvez utiliser la propriété CSS box-shadow pour ajouter une ombre portée. Vous pouvez obtenir une gamme deffets en jouant avec les cinq valeurs de la propriété.

input { padding:10px; border:0; box-shadow:0 0 15px 4px rgba(0,0,0,0.06);}

Rayon de la bordure

La propriété border-radius peut avoir un impact considérable sur la sensation de vos formulaires. En incurvant les bords des boîtes, vous pouvez modifier considérablement lapparence de vos champs de saisie.

.rounded-input { padding:10px; border-radius:10px;}

Vous pouvez obtenir une toute autre apparence et convivialité en utilisant ensemble box-shadow et border-radius.

Largeur

Utilisez la propriété width pour définir la largeur des entrées.

input { width:100%;}

Polices

La plupart des navigateurs utilisent une famille et une taille de police différentes pour les éléments de formulaire. Si nécessaire, nous pouvons hériter de la police du document.

input, textarea { font-family:inherit; font-size: inherit;}

Styliser dautres types dentrées

Vous pouvez styliser dautres types dentrées tels que zone de texte, bouton radio, case à cocher, etc. Regardons de plus près.

Zones de texte

Les zones de texte sont similaires aux entrées de texte, sauf quelles autorisent les entrées multilignes. Vous les utilisez généralement lorsque vous souhaitez collecter des données de forme plus longue auprès des utilisateurs, telles que des commentaires, des messages, etc. Vous pouvez utiliser toutes les propriétés CSS de base dont nous avons parlé précédemment pour styliser les zones de texte.

Le La propriété resize est également très utile dans les zones de texte. Dans la plupart des navigateurs, les zones de texte sont redimensionnables le long des axes x et y (valeur: both) par défaut. Vous pouvez le définir sur both, horizontal ou vertical.

Regardez cette zone de texte que jai stylisée:

Voir le stylo
dyomzez de Supun Kavinda (@SupunKavinda)
sur CodePen.

Dans cet exemple, jai utilisé resize:vertical pour autoriser uniquement le redimensionnement vertical. Cette pratique est utilisée dans la plupart des formulaires, car elle évite les barres de défilement horizontales gênantes.

Remarque: si vous devez créer des zones de texte à redimensionnement automatique, vous devrez utiliser une approche JavaScript, qui sort du cadre de cet article.

Cases à cocher et boutons radio

La case à cocher et les boutons radio par défaut sont difficiles à styliser et nécessitent des CSS (et HTML) plus complexes.

Pour styliser une case à cocher, utilisez le code HTML suivant.

<label>Name <input type="checkbox" /> <span></span></label>

Quelques points à noter:

• Puisque nous utilisons <label> pour envelopper le <input>, si vous cliquez sur un élément à lintérieur de <``label``>, le <input> sera cliqué
• Nous masquerons le <input> car les navigateurs ne nous permettent pas de le modifier beaucoup
• <span> crée une case à cocher personnalisée
• Nous utiliserons le sélecteur de pseudo-classe input:checked pour obtenir le statut vérifié et le style de la case à cocher personnalisée

Voici une case à cocher personnalisée (voir les commentaires dans le CSS pour plus dexplications):

Voir le stylo
yLNKQBo de Supun Kavinda ( @SupunKavinda)
sur CodePen.

Voici un bouton radio personnalisé:

Voir le stylo
eYNMQNM by Supun Kavinda (@SupunKavinda)
sur CodePen.

Nous avons utilisé le même concept (input:checked) pour créer des éléments personnalisés dans les deux exemples.

Dans les navigateurs, les cases à cocher sont en forme de boîte tandis que les boutons radio sont ronds. Il est préférable de conserver cette convention dans les entrées personnalisées pour éviter de confondre lutilisateur.

Sélectionnez les menus

Les menus de sélection permettent aux utilisateurs de sélectionner un élément parmi plusieurs choix.

Vous pouvez styliser lélément <select> pour quil soit plus attrayant.

select { width: 100%; padding:10px; border-radius:10px;}

Cependant, vous ne pouvez pas styliser la liste déroulante (ou les éléments <option>) car ils sont stylés par défaut en fonction du système dexploitation. La seule façon de styliser ces éléments est dutiliser des listes déroulantes personnalisées avec JavaScript.

Boutons

Comme la plupart des éléments, les boutons ont des styles par défaut.

<button>Click Me</button>

Pimentons cela un peu.

Pseudo-classes dinterface utilisateur

Voici quelques pseudo-classes dinterface utilisateur couramment utilisées avec les éléments de formulaire.

Elles peuvent être utilisées pour afficher des avis basé sur les attributs dun élément:

• :required
• :valid et :invalid
• :checked (nous lavons déjà utilisé)

Ceux-ci peuvent être utilisés pour créer des effets sur chaque état:

• :hover
• :focus
• :active

Messages générés avec: obligatoire

Pour afficher un message que lentrée est requise:

Si vous supprimez le avec JavaScript, le message "Required" sera supprimé automatiquement.

Nous pouvons faire la même chose avec :valid et :invalid pseudo-classes.

: hover et: focus

:hover sélectionne un élément lorsque le pointeur de la souris le survole. :focus sélectionne un élément lorsquil est focalisé.

Ces pseudo-classes sont souvent utilisées pour créer des transitions et de légers changements visuels. Par exemple, vous pouvez modifier la largeur, la couleur darrière-plan, la couleur de la bordure, la force de lombre, etc.Lutilisation de la propriété transition avec ces propriétés rend ces modifications beaucoup plus fluides.

Voici quelques effets de survol sur les éléments du formulaire (essayez de survoler les éléments).

Voir le stylo
yLNKZqg par Supun Kavinda (@SupunKavinda)
sur CodePen.

Lorsque les utilisateurs voient des éléments changer subtilement quand ils les survolent, ils ont limpression que lélément est exploitable. Cest une considération importante lors de la conception des éléments de formulaire.

Avez-vous remarqué que (dans certains navigateurs) un contour bleu apparaît lorsque vous vous concentrez sur les éléments de formulaire? Vous pouvez utiliser la pseudo-classe :focus pour la supprimer et ajouter dautres effets lorsque lélément est focalisé.

Le code suivant supprime le contour de focus pour tous les éléments.

*:focus {outline:none !important}

Pour ajouter un contour de focus:

input:focus { background-color: #ffd969; border-color: #000; // and any other style}

Avez-vous vu des entrées de recherche qui échelle une fois concentré? Essayez cette entrée.

Voir le stylo
KKpoJJa de Supun Kavinda (@SupunKavinda)
sur CodePen.

Entrées non personnalisables

Le style des éléments de formulaire a toujours été un défi de taille. Il y a certains éléments de formulaire sur lesquels nous navons pas beaucoup de contrôle sur le style. Par exemple:

• <input type="color">
• <input type="file">
• <progress>
• <option>, <optgroup>, <datalist>

Ces éléments sont fournis par le navigateur et stylisés en fonction du système dexploitation. La seule façon de styliser ces éléments est dutiliser des contrôles personnalisés, qui sont créés à laide déléments HTML stylables tels que div, span, etc.

Par exemple, lors du style <input type="file">, nous pouvons masquer lentrée par défaut et utiliser un bouton personnalisé.

Les contrôles personnalisés pour les éléments de formulaire sont développé pour la plupart des principales bibliothèques JavaScript. Vous pouvez les trouver sur GitHub.

Conclusion

Vous devez maintenant comprendre comment styliser des éléments de formulaire simples et comment utiliser des contrôles personnalisés lorsque les champs de saisie du navigateur sont difficiles à styliser. Comme je lai dit au début de cet article, ce ne sont que les éléments de base du style de formulaire CSS. Vous devriez utiliser ces conseils comme base pour laisser libre cours à votre imagination.

Pour terminer, noubliez pas de rendre tous vos formulaires réactifs.

Vous cherchez plus dinspiration pour la conception de formulaires? Découvrez cette collection CodePen.