Eingabefeld für Angebotsanfrage-Formular
Dieses wiederverwendbare Eingabefeld wird für alle Kontaktdaten im Angebotsanfrage-Formular verwendet. Es bietet eine einheitliche Darstellung und Funktionalität für verschiedene Arten von Eingaben wie Text, E-Mail oder Telefonnummer.
Voraussetzungen
- Wird automatisch von anderen Bereichen des Formulars verwendet
- Keine separate Konfiguration erforderlich
Aufbau des Eingabefelds
Jedes Eingabefeld besteht aus mehreren Elementen:
Beschriftung (Label):
- Zeigt den Namen des Felds an (z.B. "Vorname", "E-Mail")
- Ist mit dem Eingabefeld verknüpft für bessere Barrierefreiheit
- Erscheint oberhalb des Eingabefelds
Eingabebereich:
- Das eigentliche Feld für die Dateneingabe
- Passt sich automatisch an den Feldtyp an
- Hat abgerundete Ecken für modernes Design
Platzhalter-Text:
- Zeigt ein Beispiel für die richtige Eingabe
- Verschwindet beim Tippen
- Hilft Besuchern beim korrekten Ausfüllen
Feldtypen und ihre Funktionen
Text-Felder:
- Für Namen, Unternehmen und allgemeine Texteingaben
- Akzeptieren alle Buchstaben und Zeichen
- Beispiel: Vorname, Nachname, Unternehmensname
E-Mail-Felder:
- Speziell für E-Mail-Adressen optimiert
- Automatische Validierung des E-Mail-Formats
- Zeigt @ und .com Tasten auf mobilen Tastaturen
Telefon-Felder:
- Für Telefonnummern optimiert
- Zeigt Ziffernblock auf mobilen Geräten
- Akzeptiert verschiedene Telefonnummer-Formate
Eigenschaften der Eingabefelder
Pflichtfeld-Kennzeichnung:
- Pflichtfelder werden mit * markiert
- Browser-eigene Validierung verhindert Absenden bei leeren Pflichtfeldern
- Fehlermeldungen erscheinen automatisch
Responsive Design:
- Automatische Anpassung an verschiedene Bildschirmgrößen
- Touch-optimiert für mobile Geräte
- Ausreichend große Eingabebereiche für einfache Bedienung
Barrierefreiheit:
- Korrekte Verknüpfung von Label und Eingabefeld
- Unterstützung für Screenreader
- Tastatur-Navigation möglich
Spalten-Layout
Die Eingafelder können in verschiedenen Spaltenbreiten dargestellt werden:
Halbe Breite (col-6):
- Zwei Felder nebeneinander
- Spart Platz und wirkt kompakter
- Beispiel: Vorname und Nachname
Volle Breite (col-12):
- Ein Feld über die ganze Breite
- Für längere Eingaben geeignet
- Beispiel: Lange Unternehmensbezeichnungen
Validierung und Fehlermeldungen
Automatische Prüfung:
- Pflichtfelder werden beim Absenden geprüft
- E-Mail-Format wird automatisch validiert
- Browser zeigt entsprechende Fehlermeldungen
Benutzerfreundliche Hinweise:
- Platzhalter-Texte zeigen das erwartete Format
- Klare Fehlermeldungen bei ungültigen Eingaben
- Sofortige Rückmeldung bei der Eingabe
Tipps und Hinweise
- Platzhalter beachten: Die Beispieltexte zeigen das gewünschte Format
- Pflichtfelder ausfüllen: Alle mit * markierten Felder sind erforderlich
- Korrekte Formate verwenden: Besonders bei E-Mail und Telefon
- Mobile Optimierung: Die Felder funktionieren optimal auf allen Geräten
- Barrierefreiheit: Labels und Felder sind korrekt verknüpft