In diesem Kapitel werden wir untersuchen, wie man verschiedene Formularelemente mit Tailwind CSS stylen kann, einschließlich <u>Eingabefelder, Textbereiche, Optionsfelder und Schalter</u>.

## Eingabefelder
Eingabefelder sind wesentlich für die Dateneingabe durch den Benutzer. Tailwind bietet Utility-Klassen, um Eingabefelder effektiv zu stylen.

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

## Textbereiche
Textbereiche werden für mehrzeilige Texteingaben verwendet. Sie können ähnlich wie Eingabefelder gestaltet werden.

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

## Optionsfelder
Optionsfelder ermöglichen es Benutzern, eine Option aus einem Satz auszuwählen.

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

`form-radio` wendet die standardmäßige Tailwind CSS-Stilgebung für Optionsfelder an.

## Schalter
Schalter (Toggles) werden verwendet, um binäre Entscheidungen darzustellen. Während Tailwind CSS keine Standard-Utility-Klasse für Schalter hat, können Sie Utilities kombinieren, um eine zu erstellen.

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

- `sr-only`: Verbirgt das Kontrollkästchen, hält es aber für Screenreader zugänglich;
- `transition`: Ermöglicht einen sanften Übergang für den Schalterpunkt;
- Benutzerdefiniertes CSS wird verwendet, um den aktivierten Zustand zu handhaben.

> Hinweis
>
> Weitere Informationen zu Formularen in Tailwind CSS finden Sie <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'" >hier</a>.

Was bewirkt die Klasse `focus:ring-2`, wenn sie auf ein Eingabefeld angewendet wird?

Welche Klasse wird verwendet, um ein Element zu verstecken, es aber für Screenreader zugänglich zu halten?

Der Tailwind CSS-Kurs behandelt alles von Installationsmethoden und grundlegender Gestaltung bis hin zu fortgeschrittenen Techniken wie responsivem Design. Sie erhalten praktische Erfahrungen durch verschiedene Herausforderungen, einschließlich Typografie, Formulare, Flexbox und Grid-Utilities. Am Ende des Kurses werden Sie in der Lage sein, Tailwind CSS zu verwenden, um moderne, responsive und visuell ansprechende Webdesigns zu erstellen.

Lernen Sie Tailwind CSS kennen, ein Utility-First-Framework, das für seine Flexibilität und Effizienz im Web-Styling bekannt ist. Entdecken Sie die wichtigsten Vorteile und die Utility-First-Philosophie. Außerdem erfahren Sie mehr über die einfachen Installationsmethoden mit CDN oder npm/yarn.

Entdecken Sie die grundlegenden Elemente von Tailwind CSS, einschließlich des Verständnisses von Utility-Klassen und deren Anwendung auf HTML-Elemente. Tauchen Sie ein in wesentliche Gestaltungstechniken wie das Festlegen von Farben, Rändern, Schatten und Typografie-Utilities.

Tauchen Sie ein in praktische Anwendungen, die sich auf das Erstellen und Gestalten von Buttons, Formularen und Karten konzentrieren. Durch praktische Herausforderungen werden Sie das Erstellen dieser wesentlichen UI-Komponenten meistern und Ihre Fähigkeiten mit realen Beispielen verbessern.

Erkunden Sie die grundlegenden Abstands-Utilities von Tailwind CSS und erfahren Sie, wie Sie Margin und Padding auf Ihre Elemente anwenden. Sie lernen auch, Flexbox-Utilities zu nutzen, um das Layout mit Anzeigeeinstellungen, Flex-Richtung sowie horizontaler und vertikaler Ausrichtung zu steuern. Zusätzlich tauchen Sie in Grid-Utilities ein, um einfache, aber leistungsstarke Grid-Layouts zu erstellen und das Einrichten von Grid-Containern und -Elementen zu meistern.

Entdecken Sie, wie Sie Tailwind CSS anpassen können, um die Designanforderungen Ihres Projekts zu erfüllen und anpassungsfähige Layouts für verschiedene Geräte zu erstellen.

Tailwind CSS für Webentwicklung

Formulare

Eingabefelder

Textbereiche

Optionsfelder

Schalter

1. Was bewirkt die Klasse `focus:ring-2`, wenn sie auf ein Eingabefeld angewendet wird?

2. Welche Klasse wird verwendet, um ein Element zu verstecken, es aber für Screenreader zugänglich zu halten?