Dans ce chapitre, nous allons explorer comment styliser différents éléments de formulaire en utilisant Tailwind CSS, y compris <u>les champs de saisie, les zones de texte, les boutons radio et les interrupteurs</u>.

## Champs de saisie
Les champs de saisie sont essentiels pour la saisie de données par l'utilisateur. Tailwind fournit des classes utilitaires pour styliser efficacement les champs de saisie.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Rm9ybXMgLSBFeGFtcGxlIDE8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0icC00IGJnLXJlZC0xMDAiPgogICAgICA8aW5wdXQKICAgICAgICBjbGFzcz0iYm9yZGVyIGJvcmRlci1ncmF5LTMwMCBwLTIgcm91bmRlZC1tZCBmb2N1czpvdXRsaW5lLW5vbmUgZm9jdXM6cmluZy0yIGZvY3VzOnJpbmctZ3JlZW4tNjAwIgogICAgICAgIHR5cGU9InRleHQiCiAgICAgICAgcGxhY2Vob2xkZXI9IkVudGVyIHlvdXIgbmFtZSIKICAgICAgLz4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

## Zones de texte
Les zones de texte sont utilisées pour la saisie de texte multiligne. Elles peuvent être stylisées de manière similaire aux champs de saisie.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Rm9ybXMgLSBFeGFtcGxlIDI8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0icC00IGJnLXJlZC0xMDAiPgogICAgICA8dGV4dGFyZWEKICAgICAgICBjbGFzcz0iYm9yZGVyIGJvcmRlci1ncmF5LTMwMCBwLTIgcm91bmRlZC1tZCBmb2N1czpvdXRsaW5lLW5vbmUgZm9jdXM6cmluZy0yIGZvY3VzOnJpbmctZ3JlZW4tNjAwIgogICAgICAgIHJvd3M9IjQiCiAgICAgICAgcGxhY2Vob2xkZXI9IkVudGVyIHlvdXIgbWVzc2FnZSIKICAgICAgPjwvdGV4dGFyZWE+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

## Boutons Radio
Les boutons radio permettent aux utilisateurs de sélectionner une option parmi un ensemble.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Rm9ybXMgLSBFeGFtcGxlIDM8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0icC00IGJnLXJlZC0xMDAiPgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBjbGFzcz0iaW5saW5lLWZsZXggaXRlbXMtY2VudGVyIj4KICAgICAgICAgIDxpbnB1dAogICAgICAgICAgICB0eXBlPSJyYWRpbyIKICAgICAgICAgICAgY2xhc3M9ImZvcm0tcmFkaW8iCiAgICAgICAgICAgIG5hbWU9InJhZGlvLW9wdGlvbiIKICAgICAgICAgICAgdmFsdWU9Im9wdGlvbjEiCiAgICAgICAgICAvPgogICAgICAgICAgPHNwYW4gY2xhc3M9Im1sLTIgdGV4dC1ibHVlLTUwMCI+T3B0aW9uIDE8L3NwYW4+CiAgICAgICAgPC9sYWJlbD4KICAgICAgICA8bGFiZWwgY2xhc3M9ImlubGluZS1mbGV4IGl0ZW1zLWNlbnRlciBtbC00Ij4KICAgICAgICAgIDxpbnB1dAogICAgICAgICAgICB0eXBlPSJyYWRpbyIKICAgICAgICAgICAgY2xhc3M9ImZvcm0tcmFkaW8iCiAgICAgICAgICAgIG5hbWU9InJhZGlvLW9wdGlvbiIKICAgICAgICAgICAgdmFsdWU9Im9wdGlvbjIiCiAgICAgICAgICAvPgogICAgICAgICAgPHNwYW4gY2xhc3M9Im1sLTIgdGV4dC1ibHVlLTUwMCI+T3B0aW9uIDI8L3NwYW4+CiAgICAgICAgPC9sYWJlbD4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

`form-radio` applique le style par défaut de Tailwind CSS pour les boutons radio.

## Interrupteurs
Les interrupteurs (ou bascules) sont utilisés pour représenter des choix binaires. Bien que Tailwind CSS n'ait pas de classe utilitaire par défaut pour les interrupteurs, vous pouvez combiner des utilitaires pour en créer un.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Rm9ybXMgLSBFeGFtcGxlIDQ8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgICA8c3R5bGU+CiAgICAgIGlucHV0OmNoZWNrZWQgfiAuZG90IHsKICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMTAwJSk7CiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzQ4YmI3ODsgLyogVGFpbHdpbmQncyBncmVlbi01MDAgKi8KICAgICAgfQogICAgPC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJwLTQgYmctcmVkLTEwMCI+CiAgICAgIDxsYWJlbCBjbGFzcz0iZmxleCBpdGVtcy1jZW50ZXIgY3Vyc29yLXBvaW50ZXIiPgogICAgICAgIDxkaXYgY2xhc3M9InJlbGF0aXZlIj4KICAgICAgICAgIDxpbnB1dCB0eXBlPSJjaGVja2JveCIgaWQ9InRvZ2dsZSIgY2xhc3M9InNyLW9ubHkiIC8+CiAgICAgICAgICA8ZGl2IGNsYXNzPSJibG9jayBiZy1ncmF5LTYwMCB3LTE0IGgtOCByb3VuZGVkLWZ1bGwiPjwvZGl2PgogICAgICAgICAgPGRpdgogICAgICAgICAgICBjbGFzcz0iZG90IGFic29sdXRlIGxlZnQtMSB0b3AtMSBiZy13aGl0ZSB3LTYgaC02IHJvdW5kZWQtZnVsbCB0cmFuc2l0aW9uIgogICAgICAgICAgPjwvZGl2PgogICAgICAgIDwvZGl2PgogICAgICAgIDxkaXYgY2xhc3M9Im1sLTMgdGV4dC1ncmF5LTcwMCBmb250LW1lZGl1bSI+VG9nZ2xlIE1lPC9kaXY+CiAgICAgIDwvbGFiZWw+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

- `sr-only`: Cache la case à cocher mais la garde accessible pour les lecteurs d'écran;
- `transition`: Permet une transition fluide pour le point de l'interrupteur;
- CSS personnalisé est utilisé pour gérer l'état coché.

> Remarque
>
> Vous pouvez trouver plus d'informations sur les formulaires dans Tailwind CSS <a href="https://v1.tailwindcss.com/components/forms" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" >ici</a>.

Que fait la classe `focus:ring-2` lorsqu'elle est appliquée à un champ de saisie ?

Quelle classe est utilisée pour masquer un élément mais le garder accessible pour les lecteurs d'écran ?

Le cours Tailwind CSS couvre tout, des méthodes d'installation et du style de base aux techniques avancées comme le design réactif. Vous acquerrez une expérience pratique à travers divers défis, y compris la typographie, les formulaires, flexbox et les utilitaires de grille. À la fin du cours, vous serez compétent dans l'utilisation de Tailwind CSS pour créer des conceptions web modernes, réactives et visuellement attrayantes.

Découvrez Tailwind CSS, un framework axé sur les utilitaires connu pour sa flexibilité et son efficacité dans le style web. Découvrez les principaux avantages et la philosophie axée sur les utilitaires. De plus, explorez les méthodes d'installation simples utilisant CDN ou npm/yarn.

Découvrez les éléments fondamentaux de Tailwind CSS, y compris une compréhension des classes utilitaires et leur application aux éléments HTML. Plongez dans les techniques de style essentielles telles que la définition des couleurs, des bordures, des ombres et des utilitaires de typographie.

Plongez dans des applications pratiques en vous concentrant sur la création et le style des Buttons, Forms, et Cards. À travers des défis pratiques, vous maîtriserez la construction de ces composants d'interface utilisateur essentiels, améliorant vos compétences avec des exemples concrets.

Explorez les utilitaires d'espacement essentiels de Tailwind CSS, couvrant comment appliquer des marges et des espacements à vos éléments. Vous apprendrez également à utiliser les utilitaires flexbox pour contrôler la mise en page avec les paramètres d'affichage, la direction flex et l'alignement horizontal et vertical. De plus, vous plongerez dans les utilitaires de grille pour créer des mises en page de grille simples mais puissantes, maîtrisant la configuration des conteneurs et des éléments de grille.

Découvrez comment personnaliser Tailwind CSS pour répondre aux exigences de conception de votre projet et créer des mises en page adaptables pour divers appareils.

Tailwind CSS pour le Développement Web

Formulaires

Champs de saisie

Zones de texte

Boutons Radio

Interrupteurs

1. Que fait la classe `focus:ring-2` lorsqu'elle est appliquée à un champ de saisie ?

2. Quelle classe est utilisée pour masquer un élément mais le garder accessible pour les lecteurs d'écran ?