Eingabefelds

Eingabefelder bezeichnet man in der Webentwicklung als Formularelemente, die Benutzern Eingaben ermöglichen. Der korrekte deutsche Plural ist Eingabefelder; die Bezeichnung Eingabefelds wird gelegentlich verwendet. Sie bilden die Grundlage von Formularen und liefern Daten an Server oder Anwendungen.

Typen umfassen Textfelder (type=text) für kurze Zeichenfolgen, Passwortfelder (type=password) zum Verbergen von Eingaben, E-Mail-Felder (type=email), Telefonnummern (type=tel), Zahlenfelder (type=number), sowie Datums- und Zeitfelder (type=date, type=datetime-local), URLs (type=url), Farbauswahl (type=color) und Datei-Uploads (type=file). Mehrzeilige Eingaben erfolgen über textarea. Suchfelder (type=search) ergänzen die Palette. Versteckte Felder (type=hidden) dienen der Übermittlung von Metadaten, ohne dass der Benutzer sie sieht.

Wichtige Eigenschaften betreffen Semantik und Barrierefreiheit: Jedes Eingabefeld sollte ein zugehöriges Label haben, damit Bildschirmleser es eindeutig identifizieren können. Platzhaltertexte liefern Hinweise, ersetzen jedoch nicht ein dauerhaft sichtbares Label. Typische HTML-Attribute sind required, minlength, maxlength, pattern, autocomplete, autofocus, disabled und readonly. Validierung erfolgt oft clientseitig, doch eine serverseitige Prüfung ist unverzichtbar.

Barrierefreiheit: Neben korrekter Label-Zuordnung sollten Fehlerhinweise zugänglich sichtbar sein, Felder keyboard-navigierbar bleiben und ARIA-Attribute sinnvoll eingesetzt werden, wenn native Elemente nicht ausreichen.

Sicherheit und Datenschutz: Eingaben sollten serverseitig validiert und sanitisiert werden. Sensible Felder nutzen passende Typen, Dateien sind oft eingeschränkt, und sensible Daten sollten nicht dauerhaft im Browser gespeichert oder über unsichere Verbindungen übertragen werden (HTTPS). Autocomplete-Einstellungen sollten sorgfältig gewählt werden.

Design und Implementierung: Felder sollten responsiv gestaltet, Fokus-Indikatoren sichtbar und Fehlermeldungen klar formuliert sein. Placeholdertext darf niemals das Label ersetzen. Formulare können auch asynchron per JavaScript validiert oder eingereicht werden.