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

book
Défi : Formulaires

Tâche

Utilisez Tailwind CSS pour compléter le style d'un formulaire avec des champs de saisie, des zones de texte, des boutons radio et un interrupteur.

Remplissez les blancs avec les classes Tailwind CSS appropriées pour obtenir le style souhaité.

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

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge: Forms - Task</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
<div class="max-w-md mx-auto mt-10 p-6 bg-white shadow-md rounded-lg">
<form>
<!-- Text Input -->
<div class="mb-4">
<label
class="block text-gray-700 text-sm font-bold mb-2"
for="username"
>
Username
</label>
<input
class="shadow appearance-none border _____ _____ p-2 w-full focus:_____ focus:_____"
id="username"
type="text"
placeholder="Enter your username"
/>
</div>
<!-- Textarea -->
<div class="mb-4">
<label
class="block text-gray-700 text-sm font-bold mb-2"
for="message"
>
Message
</label>
<textarea
class="shadow appearance-none border _____ _____ p-2 w-full focus:_____ focus:_____"
  1. Couleur de la bordure : Utilisez border-gray-300 pour une bordure gris clair ;
  2. Coins arrondis : Utilisez rounded-md pour des coins moyennement arrondis ;
  3. Anneau de focus : Utilisez focus:ring-2 pour ajouter un anneau au focus et focus:ring-blue-500 pour une couleur bleue.
  4. Survol du bouton de soumission : Utilisez hover:bg-blue-700 pour un bleu plus foncé au survol ;
  5. Anneau du bouton de soumission : Utilisez focus:outline-none pour supprimer le contour de focus par défaut, focus:ring-2 pour ajouter un anneau au focus, et focus:ring-blue-500 pour définir la couleur de l'anneau.
html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge: Forms - Solution</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
<div class="max-w-md mx-auto mt-10 p-6 bg-white shadow-md rounded-lg">
<form>
<!-- Text Input -->
<div class="mb-4">
<label
class="block text-gray-700 text-sm font-bold mb-2"
for="username"
>
Username
</label>
<input
class="shadow appearance-none border border-gray-300 rounded-md p-2 w-full focus:ring-2 focus:ring-blue-500"
id="username"
type="text"
placeholder="Enter your username"
/>
</div>
<!-- Textarea -->
<div class="mb-4">
<label
class="block text-gray-700 text-sm font-bold mb-2"
for="message"
>
Message
</label>
<textarea
class="shadow appearance-none border border-gray-300 rounded-md p-2 w-full focus:ring-2 focus:ring-blue-500"
id="message"
rows="4"
placeholder="Enter your message"
></textarea>
</div>
<!-- Radio Buttons -->
<div class="mb-4">
<span class="text-gray-700">Gender</span>
<div class="mt-2">
<label class="inline-flex items-center">
<input
type="radio"
class="form-radio text-blue-500"
name="gender"
value="male"
/>
<span class="ml-2">Male</span>
</label>
<label class="inline-flex items-center ml-6">
<input
type="radio"
class="form-radio text-blue-500"
name="gender"
value="female"
/>
<span class="ml-2">Female</span>
</label>
</div>
</div>
<!-- Switch -->
<div class="mb-4">
<label class="flex items-center">
<span class="mr-2 text-gray-700">Enable notifications</span>
<input
type="checkbox"
class="form-checkbox h-6 w-6 text-green-500"
/>
</label>
</div>
<!-- Submit Button -->
<div class="mb-4">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
>
Submit
</button>
</div>
</form>
</div>
</body>
</html>

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 6
some-alt