Les formulaires non stylisés peuvent nuire à l’expérience utilisateur et à l’esthétique d’une page web.
Un design médiocre peut entraîner une mauvaise impression, rendant la navigation frustrante et contre-productive.
Découvrez comment utiliser Tailwind CSS pour transformer vos formulaires avec style et interactivité, améliorant ainsi l’attrait visuel et la fonctionnalité.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée
Pour parfaire notre projet et lui apporter une touche finale élégante, nous allons nous concentrer sur la stylisation et l’ajout d’interactions à notre formulaire. L’objectif est de parvenir à un résultat soigné et fonctionnel, comme illustré ici.
Avant de plonger dans les détails techniques, commençons par définir le style principal du formulaire en utilisant les classes Tailwind.
Stylisation formulaire avec Tailwind CSS
On se concentre tout de suite sur la forme de la section afin qu’il soit comme sur l’image ci-dessus. En effet, il faut ajouter de bords arrondis de 7px et une ombre portée avec la classe shadow-md .
Suite à cela, vous allez modifier la balise <input> de type email et la balise <textarea> comme ceci :
- Chacun doit avoir une largeur maximale avec le suffixe -full, un padding de 10px et une marge inférieure de 10px
- Quant à leurs formes, vous allez ajouter des bords arrondis de 5px, une bordure de 1px avec la couleur #bdc3c7
- Enfin, il faudra mettre le début de chaque mot du placeholder en majuscule
Si vous avez terminer cela, votre prochaine mission sera de styliser le bouton envoyer en suivant ces consignes :
- Tout d’abord déclarer la balise comme étant un block afin que vous puissiez le centrer avec la marge mx-auto
- Donner ensuite la couleur #f39c12 au background, avec une padding de 10px sur l’axe horizontal et 30px sur le vertical et des bords arrondis avec la classe rounded-md.
- Pour finir, mettez tout le texte en majuscule, avec une couleur blanche et en gras.
Interactions formulaire et classes Tailwind
Ce qu’on vient de réaliser précédemment, c’est déjà pas mal, mais ça serait encore mieux si on ajoutait quelques interactions.
Pour notre première balise <input> et la balise <textarea>, il faudra ajouter une interaction lors du focus où quand celle-ci est active pour que l’utilisateur sache qu’il vient de sélectionner la balise et écrire par la suite. Nous allons donc enlever l’ outline par défaut, et changer la couleur de la bordure par #2ecc71
Avec notre bouton, nous allons procéder autrement en ajoutant les interactions quand on survole ce dernier. Nous allons juste changer la couleur du background par #d35400 , agrandir la taille de la balise de 110% avec scale et changer le curseur par pointer .
Nous voici arrivés à la fin de ce projet avec Tailwind CSS. Vous avez maintenant une meilleure compréhension des classes à utiliser pour accomplir différentes tâches et styliser vos pages web. Si vous avez rencontré des difficultés en cours de route, vous pouvez consulter la solution de cet exercice dans le lien CodePen ci-dessous, où vous trouverez la correction complète.
CodePen : Retrouver la correction de ce projet dans le lien CodePen suivant.
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
