Bootstrap erleichtert das Erstellen ansprechender und anpassungsfähiger Formulare durch eine Sammlung von Formularsteuerungsklassen und Komponenten. Diese Formularsteuerungsklassen können verwendet werden, um Eingabefelder, Kontrollkästchen, Optionsfelder, Auswahllisten, Dropdowns und Textbereiche auf der gesamten Website einheitlich zu gestalten.

Häufig verwendete Formularsteuerungsklassen

form-control Klasse

Diese Klasse wird verwendet, um verschiedene Formularelemente wie Eingabefelder, Textbereiche und Dropdown-Auswahllisten zu gestalten. Bei Anwendung sorgt sie dafür, dass Formularelemente responsiv sind und ein einheitliches Erscheinungsbild auf unterschiedlichen Geräten und Bildschirmgrößen bieten.

Hauptmerkmale der form-control Klasse

• Responsives Design: Mit form-control gestaltete Formularelemente passen ihre Breite automatisch an den verfügbaren Platz im Container an;
• Einheitliche Gestaltung: Durch die Anwendung von form-control erhalten Formularelemente ein konsistentes Design, einschließlich Rahmen, Abstände und Schriftarteigenschaften;
• Fokus- und Hover-Zustände: form-control bietet visuelles Feedback, indem sich das Erscheinungsbild der Formularelemente bei Hover oder Fokus ändert.

form-check Klassen

• form-check: Diese Klasse gestaltet Checkbox- und Radiobutton-Eingabefelder, sodass sie inline angezeigt und einheitlich formatiert werden;
• form-check-input: Wird auf Checkbox- und Radiobutton-Eingabeelemente innerhalb eines form-check Containers angewendet. Diese Klasse sorgt für eine konsistente Gestaltung der Eingabeelemente;
• form-check-label: Wird verwendet, um das zugehörige Label von Checkbox- und Radiobutton-Eingaben zu gestalten. Sie gewährleistet eine einheitliche Gestaltung der Labels und unterstützt die Ausrichtung mit den entsprechenden Eingabeelementen.

Rastersystem für Formular-Layouts

Das Rastersystem von Bootstrap bietet ein leistungsstarkes Werkzeug, um Formularelemente in mehrspaltigen Layouts zu organisieren. Durch die Verwendung von Rasterklassen wie col-md-6, col-lg-4 und anderen können Entwickler Formularelemente in responsive, flexible Layouts anordnen, die sich nahtlos an verschiedene Bildschirmgrößen und Geräte anpassen.

Hauptmerkmale:

• Responsive Spalten: Rasterklassen ermöglichen es Entwicklern, die Breite von Formularelementen für verschiedene Breakpoints festzulegen. Zum Beispiel gibt col-md-6 an, dass die Spalte auf mittelgroßen und größeren Bildschirmen die Hälfte der Containerbreite einnimmt. Ebenso gibt col-lg-4 eine Spaltenbreite von einem Drittel auf großen Bildschirmen an;
• Flexibilität: Es ist möglich, Rasterklassen zu kombinieren, um komplexe Formular-Layouts zu erstellen;
• Für Mobilgeräte optimiert: Das Rastersystem von Bootstrap ist von Haus aus mobilfreundlich und stellt sicher, dass Formular-Layouts standardmäßig auf kleineren Bildschirmen ansprechend dargestellt werden.

Ergebnis des responsiven Formular-Grid-Verhaltens

Formularvalidierungsstile

Formularvalidierungsstile bieten visuelles Feedback zur Gültigkeit der Benutzereingaben. Diese Stile umfassen Indikatoren für erfolgreiche, fehlerhafte und Warnzustände, sodass Benutzer leicht erkennen können, ob ihre Eingaben die erforderlichen Kriterien erfüllen.

Im bereitgestellten Beispiel:

• Die Klasse needs-validation wird hinzugefügt, um die Validierungsstile von Bootstrap zu aktivieren;
• Das Attribut novalidate wird verwendet, um die browserinterne Formularvalidierung zu deaktivieren;
• Das Eingabefeld für die E-Mail-Adresse besitzt das Attribut required und ist somit verpflichtend;
• Die Klassen valid-feedback und invalid-feedback dienen dazu, Rückmeldungen für gültige bzw. ungültige Eingaben anzuzeigen;
• Zusätzlich wird JavaScript verwendet, um das Absenden des Formulars bei ungültigen Feldern zu verhindern und die Klasse was-validated auf das Formular anzuwenden.