Beaucoup de développeurs peinent à styliser efficacement leurs formulaires HTML.
Cela peut entraîner des designs peu attrayants et des interfaces utilisateurs non optimisées.
Cet article vous guide à travers l’utilisation de Tailwind CSS pour créer des formulaires élégants et fonctionnels.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée
Nous voici maintenant dans ma partie préférée qui n’est nulle autre que la partie pratique donc sans plus attendre, je vous montre le petit exercice que nous allons réaliser.
Formater un formulaire CSS avec Tailwind
Afin de vous mettre un peu à l’épreuve, nous allons cette fois-ci réaliser un petit formulaire qui ressemblera à ceci :
Impressionnant n’est-ce pas ? Pas vraiment, le code de base ne dépasse même les 20 lignes. Maintenant si vous êtes assez courageux, je sais que vous l’êtes, essayez de reproduire le code HTML du formulaire ci-dessus par vos propres moyens.
Si vous êtes un peu égaré, vous pouvez utiliser le code HTML suivant ou bien le lien CodePen pour voir les changements en temps réel :
- Code :
<section>
<h1>formulaire</h1>
<form action="">
<input type="text" name="pseudo" placeholder="Pseudo">
<input type="password" name="pass" placeholder="Pass">
<button>valider</button>
</form>
</section>
<script src="https://cdn.tailwindcss.com" data-rocket-defer defer></script>
- CodePen :
CodePen : Retrouver dans ce CodePen la base de l’exercice :
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
Une fois cela fait, passons maintenant à l’étape suivante.
Image de fond pour formulaire HTML Tailwind
La première chose que nous allons faire sera d’abord de poser notre background comme ceci :
Vous pouvez utiliser d’autres images, mais je vais faire avec celle-ci pour notre exercice. Pour arriver à ce résultat :
- Utiliser la classe bg-[url(‘…’)] sur la balise body,
- Assurez-vous de ne pas répéter le background,
- Bien centrer l’image de fond,
- Faites en sorte de couvrir toute la surface disponible.
- Ajouter la classe bg-fixed pour que le background s’adapte sur tout type d’appareil.
À ce stade, c’est une correction directe que je vous donne, mais essayez de faire l’exercice tout seul, de regarder dans le mémo ou les chapitres précédents si nécessaire.
Styles CSS pour la section du formulaire
Prochaine étape, on ajoute un style à la section pour que notre travail ressemble un peu plus à notre projet final. Une fois cette partie finie, vous devrez avoir quelque chose qui ressemble à peu près à cela :
Là, on peut dire que ça se rapproche du résultat final. Pour vous guider à travers les différentes étapes que vous devez faire, vous pouvez suivre le plan suivant :
- Ajouter un background de couleur orange avec une nuance de 300
- Pour la larguer, ça sera 50% du body
- Ajouter une marge sur le top de la section, et une autre sur l’axe horizontal pour centrer le tout.
- Pour les bordures, c’est cadeau utiliser la classe border-2 pour l’épaisseur et la couleur vous allez le trouver dans l’aperçu du projet final de tout à l’heure.
- Afin de mettre un peu plus d’espace, ajouter un padding avec la valeur 7 .
- Et pour finir, on ajoute un arrondi sur tous les bords d’une intensité xl .
Maintenant, notre section est bien en place, on passe maintenant aux éléments du formulaire.
Finaliser le design du formulaire Tailwind
Après cette dernière, étape nous aurons terminé le projet donc sans plus attendre, voici les modifications que vous allez apporter :
- Pour le titre de niveau 1 :il faut le centrer, le mettre en majuscule, on lui donne une marge inférieure d’une valeur4, on le met en gras avec une taillexlet une couleurgray-800.
- Pour les inputs :il faudra mettre la largeur à100%,unpaddingde valeur2avec une marge inférieure d’une valeur4,une bordure de1pxde couleurgray-400et un arrondi maximum sur les coins.
- On finit avec le bouton Valider :qui sera centré sur la largeur, une couleur blanche, la première lettre en majuscule et une taille de2xl.
Un petit bonus, vous savez quand vous sélectionner une balise input , vous avez comme une autre bordure qui apparait à l’écran et qui peut être déplaisant comme vous le voyez à l’écran :
Et bien pour supprimer cela, il nous suffit d’ajouter la classe outline-none et le tour est joué.
CodePen : Et comme d’habitude, pour la correction, vous pouvez retrouver cela via ce lien CodePen :
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.
FAQ
Comment créer un formulaire HTML simple ?
Comment appliquer un style CSS à un formulaire ?
Comment ajouter une image de fond avec Tailwind CSS ?
Comment centrer les éléments d'un formulaire ?
Comment supprimer la bordure de focus sur les inputs ?
Conclusion
Nous espérons que ce guide vous a aidé à créer un formulaire stylé avec Tailwind CSS. Quelle est votre prochaine étape pour améliorer encore votre design web ?
