Lorsque vous utilisez du CSS pour styliser un formulaire HTML, il est important de suivre certaines bonnes pratiques afin de créer un formulaire qui soit à la fois esthétiquement agréable et facile à utiliser.
Voici quelques conseils à suivre :
- Utilisez des polices de caractères lisibles et de tailles adaptées : il est important que les utilisateurs puissent lire facilement les étiquettes et les champs de formulaire. Utilisez des polices de caractères de tailles suffisamment grandes et lisibles, telles que Arial, Verdana ou Helvetica.
- Faites attention à l’espacement et à la mise en page : utilisez des marges et des paddings pour ajouter de l’espace entre les éléments et créer un formulaire aéré et facile à lire.
- Utilisez des couleurs et des styles cohérents : choisissez des couleurs qui sont cohérentes avec l’identité visuelle de votre site et utilisez les de façon cohérente sur tous les éléments du formulaire.
- Utilisez des styles adaptatifs pour une meilleure expérience sur mobile : de plus en plus de personnes accèdent à internet via des appareils mobiles, il est donc important de s’assurer que votre formulaire s’affiche correctement sur ces appareils. Utilisez des styles adaptatifs (par exemple, en utilisant les feuilles de style en cascade ou en utilisant des frameworks de style tels que Bootstrap) pour créer un formulaire qui s’adapte automatiquement à la taille de l’écran.
- Testez et validez votre formulaire : assurez-vous que votre formulaire fonctionne correctement et qu’il est facile à utiliser en le testant et en le validant. Utilisez des outils de test et de validation tels que Lighthouse ou le validateur de formulaire HTML de W3C
Cibler un élément par son attribut
Comme tout élément HTML, les balises composants notre formulaire sont impacté par la feuille de style définie par le navigateur. Lorsque nous abordons l’aspect graphique de notre formulaire nous redéfinissons l’ensemble ou une partie des styles en place. Certaines pratiques peuvent nous aider à travailler de façon plus rapide.
La première, consiste à cibler les éléments input en s’appuyant sur son attribut type. Nous pourrons ainsi définir une aspect visuel différent en fonction de la nature du champs. Ainsi un élément input de type text pourra être traité de façon totalement différente d’un input de type submit. Nous pourrons, pourquoi pas, modifier la couleur ou la taille d’un input de type number sans impacter le reste des champs, etc.
Dans l’exemple suivant, nous allons définir l’aspect commun aux éléments input de notre formulaire puis ciblerons les champs de type text pour modifier leur rendu visuel et enfin les champs de type input :
input{
font-size : 1.3rem;
padding : .5em 1em;
border-radius : 3px;
}
input[type="text"]{
background : white;
color : #999999;
border:solid 1px #cccccc;
}
input[type="submit"]{
background : black;
color : white;
border : none;
cursor : pointer;
}Nous venons donc de définir un corps de texte, une marge intérieur et les bords arrondis communs à tous les éléments input, puis les aspects graphiques spécifiques aux champs texte et aux boutons d’envois.
Cette méthode permet d’éviter la multiplication des appels par le biais de classes ou d’identifiants et la répétition des règles. De cette façon, nous allégeons la feuille de style et optimisons le temps de rédaction.
La méthode de ciblage CSS par attribut n’est pas uniquement réservée aux formulaires, elle peut également rendre bien des services pour l’ensemble des éléments présents dans la page.
Utiliser les pseudo-classes spécifiques aux formulaires
Avant toute chose, rappelons le principe des pseudo-classes :
Les pseudo-classes en CSS permettent de cibler des éléments en fonction de leur état ou de leur position dans le document HTML. Par exemple, vous pouvez utiliser la pseudo-classe :hover pour changer le style d’un élément lorsqu’un utilisateur le survole avec la souris, ou encore la pseudo-classe :first-child pour cibler le premier élément enfant d’un élément parent. Il existe de nombreuses pseudo-classes différentes que vous pouvez utiliser en CSS, chacune ayant une fonction différente.
:focus
Certaines de pseudo-classes nous permettrons d’agir sur l’aspect graphique d’éléments propres au contexte d’un formulaire. Ainsi, nous pourrons agir sur l’aspect d’un champs lorsque celui-ci est sélectionné par l’internaute. C’est ce que nous appellerons le focus.
Dans l’exemple suivant, nous allons définir une couleur d’arrière-plan de base aux champs de type texte et la modifier lorsque l’internaute aura sélectionné le champs pour le remplir :
input[type="text"]{
background-color:#cccccc;
}
input[type="text"]:focus{
background-color:#aaaaaa;
}:placeholder
La pseudo-classe :placeholder, permettra de cibler le texte de substitution présent dans un champs <input> ou un <textarea>. Il sera ainsi possible d’en définir certaines caractéristiques graphiques comme la couleur, la taille, la typo, etc.
Dans l’exemple suivant, nous définissons la couleur du :placeholder d’un champs texte en noire.
input[type="text"]:focus{
color:#000000;
}:enable et :disable
Les pseudo-classes :enable et :disable sont intéressantes à l’heure des certifications RGPD. Il est désormais obligatoire d’ajouter un champs « d’acceptance » à nos formulaires pour indiquer à l’internaute que nous récupérons les données qu’il saisi dans les différents champs. Ces champs se traduisent le plus souvent par une case à cocher que l’internaute doit activer pour certifier qu’il a bien pris connaissance de l’enregistrement de ses données saisies. Il est courant de désactiver le boutons d’envois du formulaire à l’aide de l’attribut disable pour empêcher l’envoie du formulaire sans cette case cochée. Nous pourrons donc modifier l’aspect graphique du bouton d’envois dans ce cadre spécifique.
input[type:submit]:disable{
opacity:0.6;
cursor:none;
}Dans l’exemple précédent, nous venons de définir l’opacité du bouton à 60% et modifié l’aspect visuel du curseur en le masquant lorsque l’internaute survol l’élément tant que celui-ci est désactivé. L’activation du bouton (à l’aide de l’attribut enable) pourra être réalisée à l’aide d’un petit code JavaScript lorsque la case d’acceptance aura été cochée.
Il ne s’agit que d’un exemple d’utilisation des attribut :disable et :enable, ce principe peut être appliqué à d’autres champs en fonction de l’expérience utilisateur souhaitée.
:checked
Cette pseudo-classe permettra de cibler un élément case à cocher ou bouton radio lorsque celui-ci aura été sélectionné par l’internaute.
Dans l’exemple suivant, nous allons définir la couleur d’arrière plan d’une case à cocher en blanc et la passer en rouge lorsque l’internaute l’aura coché.
input[type="checkbox"]{
background-color : white;
}
input[type="checkbox"]:checked{
background-color : red;
}Dans certains cas, l’utilisation de cette pseudo-classe combinée à d’autres sélecteurs CSS nous permettra de modifier l’aspect d’un élément seulement lorsque la case aura été cochée.
Dans l’exemple suivant nous allons créer un petit bout de code html simple dans lequel une case à cochée est suivie d’un bloc <div>.
<label for="my_box">clic me</label>
<input type="checkbox" id="my_box">
<div><p>Vous venez de cliquer !</p></div>Nous allons maintenant appliquer un CSS permettant de masque la <div> suivant directement notre checkbox à l’aide du sélecteur + et de la propriété display. Puis, nous allons rendre visible cette même <div> lorsque l’internaute aura coché la checkbox :
input[type="checkbox"] + div{
display : none;
}
input[type="checkbox"]:checked + div{
display : block;
}Intéressant non ?
Pour conclure
Les principes présentés dans cet article ne sont que quelques astuces pour designer un formulaire, les pseudo-classes listées ne sont que quelques exemples, vous pourrez en retrouver d’autre dans l’article dédié aux sélecteurs CSS.
Il vous faudra expérimenter et tester différents cas pour progresser et rendre vos formulaire interactifs et esthétiques. Il existe bon nombres de cas spécifiques qui parfois nécessiterons l’intervention de codes JavaScript, mais c’est une autre histoire.