Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Défi : Créer des Formulaires | Création de Composants de Base
Tailwind CSS pour le Développement Web

bookDéfi : Créer des Formulaires

Tâche

Utiliser Tailwind CSS pour finaliser le style d’un formulaire comprenant des champs de saisie, des zones de texte, des boutons radio et un interrupteur.

Compléter les espaces vides avec les classes Tailwind CSS appropriées afin d’obtenir le style souhaité.

  • Champs de saisie et zones de texte :
    • Bordure gris clair (border-gray-300) ;
    • Bords moyennement arrondis (rounded-md) ;
    • État de focus avec un anneau bleu (focus:ring-2 et focus:ring-blue-500).
  • Bouton de soumission :
    • Fond bleu principal (bg-blue-500) ;
    • Bleu plus foncé au survol (hover:bg-blue-700) ;
    • Bords arrondis (rounded) ;
    • État de focus avec un anneau (focus:outline-none, focus:ring-2 et focus:ring-blue-500).
index.html

index.html

copy
  1. Couleur de bordure : Utiliser border-gray-300 pour une bordure gris clair ;
  2. Coins arrondis : Utiliser rounded-md pour des coins moyennement arrondis ;
  3. Anneau de focus : Utiliser focus:ring-2 pour ajouter un anneau lors du focus et focus:ring-blue-500 pour une couleur bleue.
  4. Survol du bouton de soumission : Utiliser hover:bg-blue-700 pour un bleu plus foncé au survol ;
  5. Anneau du bouton de soumission : Utiliser focus:outline-none pour supprimer le contour de focus par défaut, focus:ring-2 pour ajouter un anneau lors du focus, et focus:ring-blue-500 pour définir la couleur de l’anneau.
index.html

index.html

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 6

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

What are the exact Tailwind classes I should use for each form element?

Can you show an example of a fully styled form using these Tailwind classes?

How do I apply these styles to radio buttons and switches with Tailwind?

Awesome!

Completion rate improved to 3.57

bookDéfi : Créer des Formulaires

Glissez pour afficher le menu

Tâche

Utiliser Tailwind CSS pour finaliser le style d’un formulaire comprenant des champs de saisie, des zones de texte, des boutons radio et un interrupteur.

Compléter les espaces vides avec les classes Tailwind CSS appropriées afin d’obtenir le style souhaité.

  • Champs de saisie et zones de texte :
    • Bordure gris clair (border-gray-300) ;
    • Bords moyennement arrondis (rounded-md) ;
    • État de focus avec un anneau bleu (focus:ring-2 et focus:ring-blue-500).
  • Bouton de soumission :
    • Fond bleu principal (bg-blue-500) ;
    • Bleu plus foncé au survol (hover:bg-blue-700) ;
    • Bords arrondis (rounded) ;
    • État de focus avec un anneau (focus:outline-none, focus:ring-2 et focus:ring-blue-500).
index.html

index.html

copy
  1. Couleur de bordure : Utiliser border-gray-300 pour une bordure gris clair ;
  2. Coins arrondis : Utiliser rounded-md pour des coins moyennement arrondis ;
  3. Anneau de focus : Utiliser focus:ring-2 pour ajouter un anneau lors du focus et focus:ring-blue-500 pour une couleur bleue.
  4. Survol du bouton de soumission : Utiliser hover:bg-blue-700 pour un bleu plus foncé au survol ;
  5. Anneau du bouton de soumission : Utiliser focus:outline-none pour supprimer le contour de focus par défaut, focus:ring-2 pour ajouter un anneau lors du focus, et focus:ring-blue-500 pour définir la couleur de l’anneau.
index.html

index.html

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 6
some-alt