Bootstrap erleichtert das Erstellen von ansprechenden und anpassungsfähigen Formularen, indem es eine Sammlung von Formularsteuerungsklassen und -komponenten anbietet. Diese Formularsteuerungsklassen können verwendet werden, um Eingabefelder, Kontrollkästchen, Optionsfelder, Auswahlfelder, Dropdowns und Textbereiche konsistent auf der gesamten Website zu gestalten.

Allgemeine Formularsteuerungsklassen

form-control Klasse

Diese Klasse wird verwendet, um verschiedene Formularelemente zu stylen, einschließlich Eingabefelder, Textbereiche und Auswahl-Dropdowns. Bei Anwendung sorgt sie dafür, dass Formularelemente reaktionsfähig und visuell konsistent über verschiedene Geräte und Bildschirmgrößen hinweg sind.

Hauptmerkmale der form-control Klasse

• Responsive Design: Formularelemente, die mit form-control gestylt sind, passen ihre Breite automatisch an, um den verfügbaren Platz innerhalb ihres Containers auszufüllen;
• Einheitliches Styling: Durch die Anwendung von form-control erhalten Formularelemente ein konsistentes Styling, einschließlich Ränder, Abstände und Schriftarteigenschaften;
• Fokus- und Hover-Zustände: form-control bietet visuelles Feedback für Benutzer, indem es das Erscheinungsbild von Formularelementen ändert, wenn sie überfahren oder fokussiert werden.

form-check Klassen

• form-check: Diese Klasse stylt Checkbox- und Radiobutton-Eingaben, um sie inline anzuzeigen und ein konsistentes Styling anzuwenden;
• form-check-input: Wird auf Checkbox- und Radiobutton-Eingabeelemente innerhalb eines form-check Containers angewendet. Diese Klasse sorgt für ein konsistentes Styling der Eingabeelemente;
• form-check-label: Wird verwendet, um das Label zu stylen, das mit Checkbox- und Radiobutton-Eingaben verbunden ist. Es sorgt für ein konsistentes Styling der Labels und hilft, die Ausrichtung mit den entsprechenden Eingabeelementen beizubehalten.

Rastersystem für Formularlayout

Das Rastersystem von Bootstrap bietet ein leistungsstarkes Werkzeug zur Organisation von Formularelementen in mehrspaltige Layouts. Durch die Nutzung 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 innerhalb verschiedener Breakpoints zu definieren. Zum Beispiel gibt col-md-6 an, dass die Spalte die Hälfte der Breite ihres Containers auf mittelgroßen Bildschirmen und größer einnehmen soll. Ebenso gibt col-lg-4 eine Spaltenbreite von einem Drittel auf großen Bildschirmen an;
• Flexibilität: Wir können Rasterklassen mischen und kombinieren, um komplexe Formularlayouts zu erstellen;
• Für Mobilgeräte optimiert: Das Rastersystem von Bootstrap ist von Natur aus mobilfreundlich und stellt sicher, dass Formularlayouts standardmäßig auf kleineren Bildschirmen gut aussehen.

Ergebnis des Verhaltens des responsiven Formularrasters

Formularvalidierungsstile

Formularvalidierungsstile bieten visuelles Feedback für Benutzer über die Gültigkeit ihrer Eingaben. Diese Stile umfassen Indikatoren für Erfolgs-, Fehler- und Warnzustände, die es den Benutzern erleichtern zu verstehen, 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 browsernative Formularvalidierung zu deaktivieren;
• Das Eingabefeld für die E-Mail-Adresse hat das Attribut required, was es obligatorisch macht;
• Die Klassen valid-feedback und invalid-feedback werden verwendet, um Rückmeldungen für gültige und ungültige Eingaben bereitzustellen;
• Zusätzlich wird JavaScript verwendet, um die Formularübermittlung zu verhindern, wenn ungültige Felder vorhanden sind, und um die Klasse was-validated auf das Formular anzuwenden.