Textfeld
Einzeiliges Eingabefeld, z. B. für eine E-Mail-Adresse.
Auswahlliste
Dropdown mit denselben Massen wie ein Textfeld – eigener Pfeil statt Browser-Standard.
Textbereich
Mehrzeiliges Feld für längere Eingaben, z. B. eine Nachricht.
Checkbox
Binäre Option, immer mit sichtbarem, anklickbarem Label daneben.
Best Practices
Label mit for/id verknüpfen
Jedes Formularfeld braucht ein <label for="..."> mit passender id – so springt der Fokus beim Klick aufs Label ins Feld, und Screenreader lesen die Beschriftung korrekt vor.
Placeholder ersetzt kein Label
Ein Placeholder verschwindet, sobald getippt wird, und wird von vielen Screenreadern nicht als Beschriftung erkannt – er ergänzt das Label, ersetzt es aber nie.
Select wie Textfeld gestalten
Der Browser-Standardpfeil eines <select> sprengt oft die einheitliche Höhe. Mit appearance-none und einem eigenen Pfeil-Icon lässt sich dieselbe Höhe und Optik wie bei <input> erreichen.
Sichtbarer Fokus-Zustand
Jedes Feld braucht einen deutlich sichtbaren Fokusring für Tastaturnutzer – hier über die Markenfarbe Lochmara, nicht nur über eine leichte Rahmenfarbe-Änderung.