Formularfelder gestalten

Unter den Öffnungszeiten haben wir ein Kontaktformular hinzugefügt: einen Namen, eine E-Mail-Adresse, eine Nachricht und einen Button „Senden“. Der Button „Senden“ hat bereits dieselben Klassen wie Tigers Button.

Aber wo sind die Felder? Ihre Beschriftungen sind da, die Felder selbst sieht man aber nicht. Klicke direkt unter die Beschriftung Name und tippe etwas: Das Feld ist da, nur unsichtbar. Das ist Preflight am Werk, die Basisstile von Tailwind. So wie es Absätzen die Abstände und Überschriften das Aussehen nimmt, entfernt es Rahmen und Hintergrund der Formularfelder, damit jedes Feld schlicht anfängt und du es selbst gestaltest.

Ein Feld braucht mindestens einen Rahmen, damit man sieht, wo man klicken kann, und ein Padding, damit der Text den Rahmen nicht berührt. Alle Klassen dafür kennst du aus den vorigen Lektionen:

<input type="text" id="name" name="name" class="w-full rounded-lg border border-stone-300 px-3 py-2">

• w-full: das Feld ist so breit wie das Formular,
• rounded-lg: abgerundete Ecken,
• border border-stone-300: ein hellgrauer Rahmen, 1 px breit,
• px-3 py-2: ein Padding von 12 px links und rechts und 8 px oben und unten.

Das textarea für die Nachricht bekommt dieselben Klassen wie die beiden input-Elemente.

Ein leeres Feld kann auch einen Hinweis anzeigen: den Text seines Attributs placeholder. Er erscheint in einer helleren Farbe im Feld und verschwindet, sobald du zu tippen beginnst. Das ist ein guter Ort für ein Beispiel, was man eintragen kann, etwa placeholder="anna@beispiel.de". Die Beschriftung ersetzt er aber nicht: Die Beschriftung bleibt sichtbar, während du tippst, der Platzhalter nicht.

Die Farbe des Platzhalters stellst du mit der Variante placeholder: ein. Sie funktioniert wie die Varianten für Zustände: placeholder:text-stone-400 färbt nur den Platzhalter, nicht den Text, den man eintippt. In CSS ist der Platzhalter das Pseudoelement ::placeholder: ein Teil eines Elements, den man einzeln gestalten kann. (Preflight gibt dem Platzhalter die Farbe des Textes, nur halb durchsichtig. Eine Farbe aus der Palette passt besser zum Rest der Seite.)