Les formulaires nécessitent souvent des indices visuels pour guider l’utilisateur.
Sans ces indices, les utilisateurs peuvent être confus, entraînant des erreurs de saisie.
L’article démontre comment l’attribut placeholder, associé à Tailwind CSS, peut résoudre ce problème.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée
Dans les formulaires, il est souvent nécessaire de fournir des indices visuels ou des exemples pour aider les utilisateurs à comprendre quel type d’information est attendu dans un champ de saisie. Un excellent moyen de le faire est d’utiliser l’attribut placeholder . En combinant cela avec Tailwind CSS , il est possible de personnaliser à la fois le texte par défaut affiché dans le champ et son apparence.
Utiliser Tailwind CSS pour les placeholders
Pour ceux qui ne savent pas, l’attribut placeholder est utilisé dans les balises de formulaire tels que <input> , <textarea> , etc., pour afficher un texte indicatif ou un exemple à l’intérieur du champ. Ce texte disparaît automatiquement lorsque l’utilisateur commence à saisir des données.
Pour ajouter cela à votre balise, vous devez juste entrer le texte que vous voulez afficher dans la valeur de l’attribut placeholder sur la balise html. Vous pouvez voir le code de la figure ci-dessus dans l’exemple suivant :
- Code :
<form action="">
<label for="name" class="text-gray-500 font-medium mt-4 block">Nom :</label>
<input type="text" name="name" id="name" class="block border rounded-md p-2 outline-none focus:bg-gray-100" placeholder="Entrez votre nom">
<label for="email" class="text-gray-500 font-medium mt-4 block">Email :</label>
<input type="text" name="name" id="email" class="block border rounded-md p-2 outline-none focus:bg-gray-100" placeholder="Entrez votre email">
<input type="submit" class="mt-8 py-2 px-8 bg-blue-600 text-white rounded" value="Envoyer">
</form>
- Résultat :
Ce formulaire simple contient deux champs de saisie avec des placeholders pour le nom et l’email. Que nous allons styliser par la suite.
Styliser les placeholders avec Tailwind CSS
Par défaut, le texte du placeholder est souvent en italique ou légèrement grisé par les navigateurs. Mais avec Tailwind CSS, vous pouvez personnaliser la couleur, la taille, et d’autres aspects du texte du placeholder en utilisant le prefixe placeholder:
En reprenant le formulaire ci-dessus, j’ai décidé de changer le design de mon site web avec les couleurs pour obtenir ceci :
Comme vous pouvez le voir, la couleur des placeholders est devenue violette. Comment j’ai fait ça ? Tout simplement une combinaison du préfixe placeholder: et la classe text-fuchsia-500 dans mes balises input :
<input type="text" name="name" id="email" class="block border rounded-md p-2 outline-none placeholder:text-fuchsia-500 focus:bg-gray-100" placeholder="Entrez votre email">
Il vous suffit donc de placer la classe que vous voulez après le préfixe et le tour est joué.
En bref, l’attribut placeholder associé à Tailwind CSS permet de créer des champs de saisie à la fois fonctionnels et esthétiques, tout en guidant les utilisateurs avec des indices clairs et personnalisés. Cela améliore grandement l’accessibilité du site, surtout quand ce dernier est combiné avec les labels.
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.
