Strukturierung und Gestaltung von Formularen
In diesem Kapitel wird erläutert, wie verschiedene Formularelemente mit Tailwind CSS gestaltet werden, einschließlich Eingabefelder, Textbereiche, Optionsfelder und Schalter.
Eingabefelder
Eingabefelder sind für die Dateneingabe durch Benutzer unerlässlich. Tailwind stellt Utility-Klassen zur Verfügung, um Eingabefelder effektiv zu gestalten.
index.html
Textbereiche
Textbereiche werden für die Eingabe von mehrzeiligem Text verwendet. Sie können ähnlich wie Eingabefelder gestaltet werden.
index.html
Optionsfelder
Optionsfelder ermöglichen es Nutzern, eine Option aus einer Auswahl auszuwählen.
index.html
form-radio wendet die Standard-Tailwind-CSS-Stile für Optionsfelder an.
Schalter
Schalter (Toggles) dienen zur Darstellung binärer Auswahlmöglichkeiten. Obwohl Tailwind CSS keine Standard-Utility-Klasse für Schalter bietet, können Sie Utilities kombinieren, um einen Schalter zu erstellen.
index.html
sr-only: Blendet das Kontrollkästchen aus, bleibt jedoch für Screenreader zugänglich;transition: Aktiviert einen sanften Übergang für den Schalterpunkt;- Benutzerdefiniertes CSS wird verwendet, um den aktivierten Zustand zu steuern.
Hinweis
Weitere Informationen zu Formularen in Tailwind CSS finden Sie hier.
1. Was bewirkt die Klasse focus:ring-2, wenn sie auf ein Eingabefeld angewendet wird?
2. Welche Klasse wird verwendet, um ein Element auszublenden, es aber für Screenreader zugänglich zu lassen?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 3.57Strukturierung und Gestaltung von Formularen
Swipe um das Menü anzuzeigen
In diesem Kapitel wird erläutert, wie verschiedene Formularelemente mit Tailwind CSS gestaltet werden, einschließlich Eingabefelder, Textbereiche, Optionsfelder und Schalter.
Eingabefelder
Eingabefelder sind für die Dateneingabe durch Benutzer unerlässlich. Tailwind stellt Utility-Klassen zur Verfügung, um Eingabefelder effektiv zu gestalten.
index.html
Textbereiche
Textbereiche werden für die Eingabe von mehrzeiligem Text verwendet. Sie können ähnlich wie Eingabefelder gestaltet werden.
index.html
Optionsfelder
Optionsfelder ermöglichen es Nutzern, eine Option aus einer Auswahl auszuwählen.
index.html
form-radio wendet die Standard-Tailwind-CSS-Stile für Optionsfelder an.
Schalter
Schalter (Toggles) dienen zur Darstellung binärer Auswahlmöglichkeiten. Obwohl Tailwind CSS keine Standard-Utility-Klasse für Schalter bietet, können Sie Utilities kombinieren, um einen Schalter zu erstellen.
index.html
sr-only: Blendet das Kontrollkästchen aus, bleibt jedoch für Screenreader zugänglich;transition: Aktiviert einen sanften Übergang für den Schalterpunkt;- Benutzerdefiniertes CSS wird verwendet, um den aktivierten Zustand zu steuern.
Hinweis
Weitere Informationen zu Formularen in Tailwind CSS finden Sie hier.
1. Was bewirkt die Klasse focus:ring-2, wenn sie auf ein Eingabefeld angewendet wird?
2. Welche Klasse wird verwendet, um ein Element auszublenden, es aber für Screenreader zugänglich zu lassen?
Danke für Ihr Feedback!
