Formulare

Beispiele und Verwendungsrichtlinien für Formularsteuerungsstile, Layoutoptionen und benutzerdefinierte Komponenten zum Erstellen einer Vielzahl von Formularen.

Übersicht

Die Formularsteuerelemente von Bootstrap erweitern unsere neu gestarteten Formularstile mit Klassen. Verwenden Sie diese Klassen, um ihre benutzerdefinierten Anzeigen für ein konsistenteres Rendering über Browser und Geräte hinweg zu aktivieren.

Verwenden Sie für alle Eingaben ein geeignetes type -Attribut (z , email für E-Mail-Adresse oder number für numerische Informationen), um neuere Eingabesteuerelemente wie E-Mail-Überprüfung, Nummernauswahl und mehr zu nutzen.

Hier ist ein kurzes Beispiel, um die Formstile von Bootstrap zu demonstrieren. Lesen Sie weiter, um Dokumentation zu den erforderlichen Klassen, dem Formularlayout und vielem mehr zu erhalten.

Formularsteuerelemente

Lesen Sie unbedingt unsere benutzerdefinierten Formulare, um <select> s.

Tauschen Sie für Dateieingaben die .form-control gegen .

Größe

Stellen Sie Höhen mithilfe von Klassen wie .form-control-lg und .form-control-sm.

Nur Lesen

Fügen Sie die readonly boolesches Attribut für eine Eingabe, um eine Änderung des Eingabewerts zu verhindern. Schreibgeschützte Eingaben erscheinen heller (genau wie deaktivierte Eingaben), behalten jedoch den Standardcursor bei.

Nur schreibgeschützter Text

Wenn Sie <input readonly> Elemente in Ihrem Formular haben möchten, die als einfacher Text gestaltet sind, verwenden Sie die .form-control-plaintext -Klasse, um das Standardformular für Formularfelder zu entfernen und den korrekten Rand und die Auffüllung beizubehalten.

Kontrollkästchen und Funkgeräte

Standard Kontrollkästchen und Radios werden mithilfe von .form-check verbessert, einer einzelnen Klasse für beide Eingabetypen, die das Layout und Verhalten ihrer HTML-Elemente verbessert. Kontrollkästchen dienen zum Auswählen einer oder mehrerer Optionen in einer Liste, während Funkgeräte zum Auswählen einer Option aus mehreren Optionen dienen.

Deaktivierte Kontrollkästchen und Funkgeräte werden unterstützt, bieten jedoch eine not-allowed Cursor beim Hover des übergeordneten <label> müssen Sie das Attribut disabled zum . Das Attribut deaktiviert wird eine hellere Farbe anwenden, um den Status der Eingabe anzuzeigen.

Kontrollkästchen und Radios werden verwendet, um die HTML-basierte Formularvalidierung zu unterstützen und präzise, zugängliche Beschriftungen bereitzustellen. Daher sind unsere <input> s und <label> Geschwisterelemente im Gegensatz zu einer <input> innerhalb einer <label>. Dies ist etwas ausführlicher, da Sie die Attribute id und for angeben müssen, um die <input> in Beziehung zu setzen und <label>.

Standard (gestapelt)

Standardmäßig werden beliebig viele Kontrollkästchen und Funkgeräte, die unmittelbare Geschwister sind, vertikal gestapelt und angemessen beabstandet mit .form-check.

Inline

Gruppieren Sie Kontrollkästchen oder Radios in derselben horizontalen Zeile durch Hinzufügen von .form-check-inline zu .form-check.

Ohne Beschriftungen

Fügen Sie .position-static zu Eingaben in .form-check hinzu, die keinen Beschriftungstext enthalten. Denken Sie daran, weiterhin eine Art Beschriftung für unterstützende Technologien bereitzustellen (z. B. mit aria-label).

Layout

Da Bootstrap display: block und width: 100% auf fast alle unsere Formularsteuerelemente anwendet Formulare werden standardmäßig vertikal gestapelt. Zusätzliche Klassen können verwendet werden, um dieses Layout auf Formularbasis zu variieren.

Formulargruppen

Die Klasse .form-group ist der einfachste Weg Formulare strukturieren. Es bietet eine flexible Klasse, die die ordnungsgemäße Gruppierung von Beschriftungen, Steuerelementen, optionalem Hilfetext und Formularüberprüfungsnachrichten fördert. Standardmäßig wird nur margin-bottom angewendet, es werden jedoch bei Bedarf zusätzliche Stile in .form-inline übernommen. Verwenden Sie es mit <fieldset> s, <div> s oder fast jedem anderen Element.

Formularraster

Mit unseren Rasterklassen können komplexere Formulare erstellt werden. Verwenden Sie diese für Formularlayouts, die mehrere Spalten, unterschiedliche Breiten und zusätzliche Ausrichtungsoptionen erfordern.

Formularzeile

Sie können auch .row gegen .form-row, eine Variation unserer Standardrasterzeile, die die Standardspaltenrinnen für engere und kompaktere Layouts überschreibt.

Mit dem Rastersystem können auch komplexere Layouts erstellt werden.

Horizontales Formular

Erstellen Sie horizontale Formulare mit dem Raster, indem Sie die Klasse .row hinzufügen, um Gruppen zu bilden, und die verwenden .col-*-* -Klassen, um die Breite Ihrer Beschriftungen und Steuerelemente anzugeben. Stellen Sie sicher, dass Sie .col-form-label auch zu Ihren <label> hinzufügen, damit sie vertikal mit den zugehörigen Formularsteuerelementen zentriert sind.

Manchmal müssen Sie möglicherweise Dienstprogramme für Ränder oder Auffüllungen verwenden, um die perfekte Ausrichtung zu erzielen, die Sie benötigen. Zum Beispiel haben wir die padding-top auf unserer gestapelten Funkeingangsbeschriftung entfernt, um die Textgrundlinie besser auszurichten.

Horizontale Formularbeschriftung Größe

Spaltengröße

Wie in den vorherigen Beispielen gezeigt, können Sie in unserem Rastersystem eine beliebige Anzahl von .col s innerhalb eines .row oder .form-row. Sie teilen die verfügbare Breite gleichmäßig auf. Sie können auch eine Teilmenge Ihrer Spalten auswählen, um mehr oder weniger Platz zu beanspruchen, während die verbleibenden .col den Rest mit bestimmten Spaltenklassen wie .

Automatische Größenanpassung

Im folgenden Beispiel wird ein Flexbox-Dienstprogramm verwendet, um den Inhalt vertikal zu zentrieren und bis .col-auto, sodass Ihre Spalten nur so viel Speicherplatz wie nötig beanspruchen. Anders ausgedrückt, die Spaltengrößen selbst basieren auf dem Inhalt.

Sie können diese dann erneut mit größenspezifischen Spaltenklassen neu mischen.

Und natürlich werden benutzerdefinierte Formularsteuerelemente unterstützt.

Inline-Formulare

Verwenden Sie die .form-inline Klasse, um eine Reihe von Beschriftungen, Formularsteuerelementen und Schaltflächen in einer einzelnen horizontalen Zeile anzuzeigen. Formularsteuerelemente in Inline-Formularen weichen geringfügig von ihren Standardzuständen ab.

• Steuerelemente sind display: flex, wodurch alle HTML-Leerzeichen reduziert werden und Sie die Ausrichtung steuern können Dienstprogramme für Abstand und Flexbox.
• Steuerelemente und Eingabegruppen erhalten width: auto, um den Bootstrap-Standard width: 100% zu überschreiben.
• Steuerelemente werden nur in Ansichtsfenstern mit einer Breite von mindestens 576 Pixel inline angezeigt, um enge Ansichtsfenster auf Mobilgeräten zu berücksichtigen.

Möglicherweise müssen Sie die Breite und Ausrichtung einzelner Formularsteuerelemente manuell festlegen mit Abstandsdienstprogrammen (wie unten gezeigt). Stellen Sie schließlich sicher, dass jedem Formularsteuerelement immer ein <label> hinzugefügt wird, auch wenn Sie es mit .sr-only vor Besuchern verbergen müssen, die keine Bildschirmleser sind

Steuerelemente und Auswahlen für benutzerdefinierte Formulare werden ebenfalls unterstützt.

Hilfetext

Hilfetext auf Blockebene in Formularen kann mit .form-text (früher bekannt als .help-block in v3). Inline-Hilfetext kann mithilfe beliebiger Inline-HTML-Element- und Dienstprogrammklassen wie .text-muted flexibel implementiert werden.

Der Hilfetext unter den Eingaben kann mit . Diese Klasse enthält display: block und fügt einen oberen Rand für einen einfachen Abstand zu den obigen Eingaben hinzu.

Inline-Text kann jedes typische Inline-HTML-Element verwenden (sei es ein <small>, <span> oder etwas anderes) mit nichts mehr als einer Utility-Klasse.

Deaktivierte Formulare

Fügen Sie das boolesche Attribut disabled zu einer Eingabe hinzu, um Benutzerinteraktionen zu verhindern und anzuzeigen leichter.

Fügen Sie die disabled Attribut für ein <fieldset>, um alle darin enthaltenen Steuerelemente zu deaktivieren.

Validierung

Geben Sie Ihren Benutzern mit der HTML5-Formularvalidierung wertvolles, umsetzbares Feedback – verfügbar in allen unterstützten Browsern. Wählen Sie aus dem Standard-Validierungs-Feedback des Browsers oder implementieren Sie benutzerdefinierte Nachrichten mit unseren integrierten Klassen und dem Starter-JavaScript.

Funktionsweise

So funktioniert die Formularüberprüfung mit Bootstrap:

• Die HTML-Formularüberprüfung wird über die beiden Pseudoklassen von CSS angewendet. :invalid und :valid. Dies gilt für die Elemente <input>, <select> und <textarea>.
• Bootstrap umfasst die Stile :invalid und :valid für die übergeordnete Klasse .was-validated, die normalerweise auf die Klassen angewendet wird <form>. Andernfalls wird jedes erforderliche Feld ohne Wert beim Laden der Seite als ungültig angezeigt. Auf diese Weise können Sie auswählen, wann sie aktiviert werden sollen (normalerweise nach dem Versuch, ein Formular zu senden).
• Als Fallback können Sie .is-invalid und -Klassen können anstelle der Pseudoklassen für die serverseitige Validierung verwendet werden. Sie erfordern keine .was-validated übergeordnete Klasse.
• Aufgrund von Einschränkungen in der Funktionsweise von CSS können wir (derzeit) keine Stile auf eine , das ohne Hilfe von benutzerdefiniertem JavaScript vor einem Formularsteuerelement im DOM steht.
• Alle modernen Browser unterstützen die Constraint Validation API, eine Reihe von JavaScript-Methoden zum Überprüfen von Formularsteuerelementen.
• Feedbacknachrichten verwenden möglicherweise die Standardeinstellungen des Browsers (für jeden Browser unterschiedlich und über CSS nicht stylbar) oder unsere benutzerdefinierten Feedbackstile mit zusätzlichem HTML und CSS.
• Sie können benutzerdefinierte Gültigkeitsnachrichten mit setCustomValidity in JavaScript.

Berücksichtigen Sie in diesem Zusammenhang die folgenden Demos für unsere benutzerdefinierten Formularüberprüfungsstile, optionalen serverseitigen Klassen und Browser-Standardeinstellungen.

Benutzerdefinierte Stile

Für benutzerdefinierte Bootstrap-Formularüberprüfungsnachrichten müssen Sie das novalidate -Boolesche Attribut zu Ihrer <form>. Dadurch werden die Standard-Feedback-Tooltips des Browsers deaktiviert, es wird jedoch weiterhin Zugriff auf die APIs zur Formularüberprüfung in JavaScript bereitgestellt. Versuchen Sie, das folgende Formular einzureichen. Unser JavaScript fängt die Schaltfläche „Senden“ ab und leitet Feedback an Sie weiter.

Wenn Sie versuchen zu senden, sehen Sie die :invalid und Stile, die auf Ihre Formularsteuerelemente angewendet werden.

Standardeinstellungen des Browsers

Sie sind nicht an benutzerdefinierten Validierungs-Feedbacknachrichten interessiert oder schreiben JavaScript, um das Formularverhalten zu ändern? Alles gut, Sie können die Standardeinstellungen des Browsers verwenden. Senden Sie das folgende Formular. Abhängig von Ihrem Browser und Betriebssystem wird ein etwas anderer Feedback-Stil angezeigt.

Obwohl diese Feedback-Stile nicht mit CSS gestaltet werden können, können Sie den Feedback-Text dennoch über JavaScript anpassen.

Serverseite

Wir empfehlen die clientseitige Validierung. Wenn Sie jedoch eine Serverseite benötigen, können Sie mit .is-invalid und .is-valid. Beachten Sie, dass .invalid-feedback auch von diesen Klassen unterstützt wird.

Unterstützte Elemente

Unsere Beispielformulare zeigen native <input> oben, aber Formularvalidierungsstile sind verfügbar Auch für unsere benutzerdefinierten Formularsteuerelemente.

QuickInfos

Wenn Ihr Formularlayout dies zulässt, können Sie die .{valid|invalid}-feedback -Klassen für .{valid|invalid}-tooltip -Klassen, um Validierungsfeedback in einem gestalteten Tooltip anzuzeigen. Stellen Sie sicher, dass ein übergeordnetes Element mit position: relative für die Positionierung in QuickInfos vorhanden ist. Im folgenden Beispiel haben unsere Spaltenklassen dies bereits, aber für Ihr Projekt ist möglicherweise eine alternative Einrichtung erforderlich.

Benutzerdefinierte Formulare

Für noch mehr Anpassung und Kreuz Verwenden Sie unsere vollständig benutzerdefinierten Formularelemente, um die Standardeinstellungen des Browsers zu ersetzen. Sie basieren auf semantischem und zugänglichem Markup und sind daher ein solider Ersatz für jede Standard-Formularsteuerung.

Kontrollkästchen und Radios

Jedes Kontrollkästchen und Radio ist in ein <div> mit einem Geschwister <span> zum Erstellen unseres benutzerdefinierten Steuerelements und einer <label> für den Begleittext. Strukturell ist dies der gleiche Ansatz wie bei unserem Standard .form-check.

Wir verwenden den Geschwister-Selektor (~) für Alle unsere <input> -Zustände – wie :checked -, um unseren benutzerdefinierten Formularindikator richtig zu formatieren. In Kombination mit der Klasse .custom-control-label können wir den Text für jedes Element auch basierend auf dem Status von <input> formatieren.

Wir verbergen die Standardeinstellung <input> mit opacity und verwenden die .custom-control-label, um eine zu erstellen neuer benutzerdefinierter Formularindikator an seiner Stelle mit ::before und ::after. Leider können wir keine benutzerdefinierte Version nur aus <input> erstellen, da die content von CSS für dieses Element nicht funktioniert.

In den aktivierten Zuständen verwenden wir Base64-eingebettete SVG-Symbole von Open Iconic. Dies bietet uns die beste Kontrolle für das Styling und die Positionierung zwischen Browsern und Geräten.

Kontrollkästchen

Benutzerdefinierte Kontrollkästchen kann auch die Pseudoklasse :indeterminate verwenden, wenn sie manuell über JavaScript festgelegt wird (es ist kein HTML-Attribut für die Angabe verfügbar).

Wenn Sie jQuery verwenden, sollte so etwas ausreichen:

Radios

Inline

Deaktiviert

Benutzerdefinierte Kontrollkästchen und Radios können ebenfalls deaktiviert werden. Fügen Sie das boolesche Attribut disabled zum <input> hinzu, und die Beschreibung des benutzerdefinierten Indikators und der Bezeichnung wird automatisch formatiert.

Menü auswählen

Benutzerdefiniert <select> Menüs benötigen nur eine benutzerdefinierte Klasse, .custom-select, um die benutzerdefinierten Stile auszulösen.

Sie können auch zwischen kleinen und großen benutzerdefinierten Auswahlen wählen stimmen mit unseren ähnlich großen Texteingaben überein.

Das Attribut multiple wird ebenfalls unterstützt:

Wie das Attribut size:

Dateibrowser

Die Dateieingabe ist am knorrigsten und erfordert zusätzliches JavaScript, wenn Sie sie mit der Funktion „Datei auswählen“ und dem ausgewählten Dateinamen-Text verbinden möchten.

Wir verstecken die Standarddatei <input> über und formatieren Sie stattdessen die <label>. Die Schaltfläche wird mit ::after generiert und positioniert. Zuletzt deklarieren wir ein width und height auf dem <input> für den richtigen Abstand für den umgebenden Inhalt .

Übersetzen oder Anpassen der Zeichenfolgen

Die Pseudoklasse :lang() wird verwendet, um die Übersetzung des Textes „Durchsuchen“ in einen anderen zu ermöglichen Sprachen. Überschreiben oder fügen Sie Einträge zur Variablen $custom-file-text Sass mit dem entsprechenden Sprach-Tag und lokalisierten Zeichenfolgen hinzu. Die englischen Zeichenfolgen können auf die gleiche Weise angepasst werden.So könnte man beispielsweise eine spanische Übersetzung hinzufügen (der spanische Sprachcode lautet es):

Hier ist lang(es) in Aktion für die benutzerdefinierte Dateieingabe für eine spanische Übersetzung:

Sie müssen die Sprache Ihres Dokuments (oder eines Teilbaums davon) korrekt einstellen, damit der richtige Text angezeigt wird. Dies kann mithilfe des Attributs lang für das Element <html> oder des HTTP-Headers Content-Language erfolgen unter anderem.