<
Bootstrap-Formulare
In diesem Tutorial erfahren Sie, wie Sie elegante Formulare mit Bootstrap erstellen.
Formulare mit Bootstrap erstellen
HTML-Formulare sind der integrale Bestandteil der Webseiten und Anwendungen, aber das Erstellen der Formularlayouts oder das manuelle Formatieren der Formularsteuerelemente nacheinander mit CSS sind oft langweilig und mühsam., Bootstrap vereinfacht das Stylen und Ausrichten von Formularsteuerelementen wie Beschriftungen, Eingabefeldern, Auswahlfeldern, Textbereichen, Schaltflächen usw. erheblich. durch vordefinierte Reihe von Klassen.
Bootstrap bietet drei verschiedene Arten von Formularlayouts:
- Vertikale Form (Standardformularlayout)
- Horizontale Form
- Inline-Form
Der folgende Abschnitt gibt Ihnen einen detaillierten Überblick über all diese Formularlayouts sowie die verschiedenen formularbezogenen Bootstrap-Komponenten nacheinander. Nun, lass uns anfangen.,
Erstellen eines vertikalen Formularlayouts
Dies ist das standardmäßige Bootstrap-Formularlayout, in dem Stile auf Formularsteuerelemente angewendet werden, ohne dem <form> – Element oder großen Änderungen im Markup eine Basisklasse hinzuzufügen.
Die Formularsteuerelemente in diesem Layout sind oben mit links ausgerichteten Beschriftungen gestapelt.,
— Die Ausgabe des obigen Beispiels sieht ungefähr so aus:
Hinweis: Alle textuellen Formularsteuerelemente wie <input>, <textarea> und <select> erfordert die Klasse .form-control für das allgemeine Styling. Die.form-control Klasse macht sie auch 100% breit. Um ihre Breite zu ändern oder sie inline zu verwenden, können Sie die vordefinierten Rasterklassen verwenden.,
Erstellen eines horizontalen Formularlayouts
Sie können auch horizontale Formularlayouts erstellen, in denen Beschriftungen und Formularsteuerelemente mithilfe der Bootstrap-Rasterklassen nebeneinander ausgerichtet sind. Um ein horizontales Formularlayout zu erstellen, fügen Sie die Klasse zu Formulargruppen hinzu und verwenden Sie die .col-*-* Rasterklassen, um die Breite Ihrer Beschriftungen und Steuerelemente anzugeben.
Stellen Sie außerdem sicher, dass Sie die Klasse .col-form-label auf die <label> – Elemente anwenden, sodass sie vertikal zentriert sind mit den zugehörigen Formularsteuerelementen., Schauen wir uns ein Beispiel an:
— Die Ausgabe des obigen Beispiels sieht ungefähr so aus:
Erstellen eines Inline-Formularlayouts
Manchmal möchten Sie möglicherweise eine Reihe von Beschriftungen, Formularsteuerelementen und Schaltflächen in einer einzelnen horizontalen Zeile anzeigen, um das Layout zu komprimieren. Sie können dies einfach tun, indem Sie die Klasse .form-inline zum Element <form> hinzufügen. Formularsteuerelemente werden jedoch nur in Ansichtsfenstern mit einer Breite von mindestens 576 Pixel inline angezeigt.,
Schauen wir uns folgendes Beispiel an, um zu sehen, wie es tatsächlich funktioniert:
— Die Ausgabe des obigen Beispiels sieht ungefähr so aus:
Hinweis: Es wird empfohlen, für jedes Formular eine Beschriftung einzufügen, da sonst Bildschirmleser Probleme mit Ihren Formularen haben. Bei Inline-Formularlayouts können Sie die Beschriftungen jedoch mithilfe der Klasse .sr-only ausblenden, sodass nur Bildschirmleser sie lesen können.,
Im Abschnitt Snippets finden Sie Beispiele für einige wunderschön gestaltete Bootstrap-Formulare.
Erstellen eines statischen Formularsteuerelements
Möglicherweise möchten Sie anstelle eines funktionierenden Formularsteuerelements nur einen Nur-Text-Wert neben einer Formularbeschriftung anzeigen. Sie können dies einfach tun, indem Sie die Klasse .form-control durch die .form-control-plaintext und das Attribut readonly.,
Die.form-control-plaintext – Klasse entfernt das Standard-Styling aus dem Formularfeld, behält jedoch den korrekten Rand und die korrekte Auffüllung bei. Schauen wir uns ein Beispiel an:
— Die Ausgabe des obigen Beispiels sieht ungefähr so aus:
Platzierung von Kontrollkästchen und Funkgeräten
Kontrollkästchen und Optionsfelder können entweder gestapelt oder inline platziert werden.
Gestapelte Kontrollkästchen und Radios
Um die Kontrollkästchen oder Optionsfelder vertikal gestapelt zu platzieren, dh, wickeln Sie einfach Zeile für Zeile alle Steuerelemente in eine Formulargruppe ein und wenden Sie die Klasse .d-block auf jede <label>an. Verwenden Sie außerdem die Randdienstprogrammklassen für den richtigen Abstand, wie im folgenden Beispiel gezeigt:
Inline-Kontrollkästchen und Radios
Um sie jedoch inline zu platzieren, dh nebeneinander, platzieren Sie einfach alle Formularsteuerelemente in einer Formulargruppe und verwenden Sie Randdienstprogrammklassen, um den richtigen Abstand sicherzustellen. In diesem Fall ist es nicht erforderlich, die .d-block – Klasse für das <label> – Element zu verwenden., Schauen wir uns das folgende Beispiel an:
Erstellen deaktivierter Formularsteuerelemente
Um einzelne Formularsteuerelemente wie <input>, <textarea>, <select> zu deaktivieren, fügen Sie einfach die Attribute disabled hinzu und Bootstrap erledigt den Rest.,ll sehen ungefähr so aus:
Wenn Sie jedoch alle Steuerelemente innerhalb eines <form> deaktivieren möchten, platzieren Sie sie sofort in einem <fieldset>— Element und wenden Sie das Attribut darauf an, wie im folgenden Beispiel gezeigt:
– Die Ausgabe des obigen Beispiels wird wie folgt aussehen: in etwa so:
Erstellen von schreibgeschützten Eingaben
Sie können auch das boolesche Attribut readonly zu einer Eingabe oder einem Textbereich hinzufügen, um die Änderung seines Werts zu verhindern., Schreibgeschützte Eingaben werden im Hintergrund angezeigt (genau wie deaktivierte Eingaben), behalten jedoch den Standard-Textcursor bei. Schauen Sie sich das folgende Beispiel an, um zu sehen, wie es funktioniert:
— Die Ausgabe des obigen Beispiels sieht ungefähr so aus:
Spaltengröße der Eingaben, Textbereiche und Auswahlfelder
Sie können auch die Größen Ihrer Formularsteuerelemente an die Spaltengrößen des Bootstrap-Rasters anpassen. Wickeln Sie einfach Ihre Formularsteuerelemente ein (dh, <input>, <textarea> und <select>) in Rasterspalten oder einem beliebigen benutzerdefinierten Element und wenden Sie die Rasterklassen darauf an, wie im folgenden Beispiel gezeigt:
Tipp: Sie können alternativ die Klasse.form-rowin ort von.row beim Erstellen von Formularlayouts. Die.form-row – Klasse ist eine Variation des Standard-Bootstrap-Rasters.row, das die Standardspaltenrinnen für engere und kompaktere Layouts überschreibt.,
Höhengröße von Eingaben und Auswahlfeldern
Sie können die Höhe Ihrer Texteingabe einfach ändern und Felder entsprechend den Schaltflächengrößen auswählen. Verwenden Sie die Form control height Sizing-Klassen wie .form-control-lg, .form-control-sm in den Feldern <input> und <select>, um größere oder kleinere Größen zu erstellen.
Platzieren von Hilfetext um Formularsteuerelemente
Platzieren von Hilfetext für die Formularsteuerelemente auf effiziente Weise, um Benutzer bei der Eingabe der richtigen Daten in ein Formular zu unterstützen., Sie können Hilfetext auf Blockebene für ein Formularsteuerelement mit der Klasse .form-textplatzieren. Der Block-Hilfetext wird normalerweise unten im Steuerelement angezeigt. Hier ist ein Beispiel:
— Die Ausgabe des obigen Beispiels sieht ungefähr so aus:
In ähnlicher Weise können Sie auch Inline-Hilfetext mit dem Element <small> platzieren. In diesem Fall muss .form-text nicht verwendet werden., Das folgende Beispiel zeigt, wie dies implementiert wird:
— Die Ausgabe des obigen Beispiels sieht ungefähr so aus:
Bootstrap Form Validation
Bootstrap 4 bietet eine einfache und schnelle Möglichkeit, Webformulare clientseitig zu validieren. Es verwendet die native Formularvalidierungs-API des Browsers, um das Formular zu validieren. Formularvalidierungsstile werden über CSS :invalid und :valid Pseudoklassen angewendet. Es gilt an <input>, <select> und <textarea> – Elemente.,
Schauen wir uns das folgende Beispiel an, um zu sehen, wie es tatsächlich funktioniert:
Hinweis: Für benutzerdefinierte Bootstrap-Formularvalidierungsnachrichten müssen Sie die Standard-Feedback-Tooltips des Browsers deaktivieren, indem Sie das boolesche Attribut <form> hinzufügen. Es bietet jedoch weiterhin Zugriff auf die Formularvalidierungs-APIs in JavaScript.
Hier ist der benutzerdefinierte JavaScript-Code, der Fehlermeldungen anzeigt und die Formularübermittlung deaktiviert, wenn ungültige Felder vorhanden sind., Weitere Informationen zur selbstausführenden Funktion finden Sie im Kapitel JavaScript-Schließungen.
— Die Ausgabe des obigen Beispiels sieht ungefähr so aus:
Tipp: Um das Erscheinungsbild des Formulars programmgesteuert zurückzusetzen, entfernen Sie die Klasse.was-validated<form> element nach der Einreichung. Diese Klasse wird vom Bootstrap automatisch auf das Formular angewendet, wenn Sie auf die Schaltfläche Senden klicken.,
Wenn Sie eine serverseitige Validierung benötigen, können Sie ungültige und gültige Formularfelder mit der .is-invalid und .is-validangeben. Die.invalid-feedback und.valid-feedback werden ebenfalls mit diesen Klassen unterstützt., Probieren Sie das folgende Beispiel aus, um zu sehen, wie es funktioniert:
— Die Ausgabe des obigen Beispiels sieht ungefähr so aus:
Alternativ können Sie die .{valid|invalid}-feedback – Klassen für .{valid|invalid}-tooltip – Klassen austauschen, um den Validierungs-Feedback-Text in einem Tooltip-Stil anzuzeigen.
Stellen Sie außerdem sicher, dass Sie den Stil position: relative oder die Klasse .position-relative auf das übergeordnete Element anwenden, um die korrekte Positionierung der Feedback-Tooltips zu gewährleisten., Hier ist ein Beispiel:
— Die Ausgabe des obigen Beispiels sieht ungefähr so aus:
Hinweis: Hintergrundsymbole für<select>Elemente funktionieren nur mit.custom-select, nicht mit.form-control. Im nächsten Kapitel erfahren Sie mehr über Bootstrap Custom Forms.,
Unterstützte Formularsteuerelemente in Bootstrap
Bootstrap unterstützt alle standardmäßigen HTML-Formularsteuerelemente sowie neue HTML5-Eingabetypen wie Datetime, Nummer, E-Mail, URL, Suche, Bereich, Farbe, URL usw. Das folgende Beispiel zeigt Ihnen die Verwendung von Standardformularsteuerelementen mit Bootstrap.
<