Formulare

Beispiele und Nutzungsrichtlinien für Formularsteuerstile, 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 Displays für ein konsistenteres Rendering zwischen Browsern und Geräten zu verwenden.

Stellen Sie sicher, dass Sie für alle Eingaben ein entsprechendes type Attribut verwenden (z.,, email für E-Mail-Adresse oder number für numerische Daten), um die Vorteile der neueren Eingabesteuerelemente wie E-Mail-überprüfung, Zahl, Auswahl, und mehr.

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

Formularsteuerelemente

Achten Sie darauf, unsere benutzerdefinierten Formulare zu erkunden, um weitere Stil <select>s.

Für Dateieingaben, tauschen Sie die .form-control für .form-control-file.,

Sizing

Höhen mit Klassen wie .form-control-lg und .form-control-sm.

Readonly

Fügen Sie das boolesche Attribut readonly einer Eingabe hinzu, um eine Änderung des Eingabewerts zu verhindern. Schreibgeschützte Eingaben erscheinen leichter (genau wie deaktivierte Eingaben), behalten jedoch den Standardcursor bei.,

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Readonly plain text

Wenn Sie <input readonly> Elemente in Ihrem Formular haben möchten, das als Klartext formatiert ist, verwenden Sie die .form-control-plaintext klasse, um das standardmäßige Formularfeldstyling zu entfernen und den korrekten Rand und die korrekte Auffüllung beizubehalten.

Bereichseingaben

Stellen Sie horizontal scrollbare Bereichseingaben mit .form-control-rangeein.,

Checkboxen und Radios

Standard Checkboxen und Radios werden mit Hilfe von verbessert .form-check, eine einzelne 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 Radios zum Auswählen einer Option aus vielen Optionen dienen.

Deaktivierte Kontrollkästchen und Radios werden unterstützt. Das Attribut disabled wendet eine hellere Farbe an, um den Status der Eingabe anzuzeigen.,

Checkboxen und Radios verwenden werden gebaut, um HTML-basierte Formularvalidierung zu unterstützen und bieten prägnante, zugängliche Etiketten. Daher sind unsere <input>s und <label>s Geschwisterelemente im Gegensatz zu einer <input> innerhalb einer <label>. Dies ist etwas ausführlicher, da Sie id und for Attribute angeben müssen, um die <input> und <label>.,

Standard (gestapelt)

Standardmäßig wird eine beliebige Anzahl von Kontrollkästchen und Radios, die unmittelbare Geschwister sind, vertikal gestapelt und entsprechend mit .form-check.

Inline

Gruppe von Checkboxen oder radios auf der gleichen horizontalen Zeile durch hinzufügen von .form-check-inline zu jedem .form-check.,

Ohne Beschriftungen

Fügen Sie .position-static zu Eingaben innerhalb von .form-check hinzu, die keine beschriftungstext. Denken Sie daran, weiterhin eine Art Label 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, stapeln sich Formulare standardmäßig vertikal. Zusätzliche Klassen können verwendet werden, um dieses Layout pro Formular zu variieren.

Formulargruppen

Die.form-group – Klasse ist der einfachste Weg, Formularen eine Struktur hinzuzufügen. Es bietet eine flexible Klasse, die eine ordnungsgemäße Gruppierung von Beschriftungen, Steuerelementen, optionalem Hilfetext und Formularvalidierungsnachrichten fördert., Standardmäßig gilt es nur margin-bottom, aber es nimmt zusätzliche Stile in .form-inline nach Bedarf auf. Verwenden Sie es mit <fieldset>en, <div>s oder fast jedem anderen element.

Formularraster

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

Formularzeile

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

Mit dem Grid-System können auch komplexere Layouts erstellt werden.

Horizontales Formular

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

Manchmal müssen Sie Margin-oder Padding-Dienstprogramme verwenden, um die perfekte Ausrichtung zu erstellen, die Sie benötigen. Zum Beispiel haben wir die padding-top auf unserem Label für gestapelte Radioeingaben entfernt, um die Textgrundlinie besser auszurichten.,

Horizontal form label sizing

Spalte sizing

Wie in den vorherigen beispielen gezeigt, unsere grid system ermöglicht es ihnen, eine beliebige anzahl von .cols innerhalb einer .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 einzunehmen, während die verbleibenden .cols den Rest gleichmäßig mit bestimmten Spaltenklassen wie .col-7.,

Auto-sizing

Das folgende Beispiel verwendet ein Flexbox-Dienstprogramm, um den Inhalt vertikal zu zentrieren, und ändert .col in .col-auto, sodass Ihre Spalten nur so viel Platz einnehmen, wie erforderlich. Anders ausgedrückt, die Spaltengrößen selbst basieren auf dem Inhalt.

Das kannst du dann noch einmal mit größenspezifischen Spaltenklassen remixen.

Und natürlich benutzerdefinierte Formularsteuerelemente werden 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 unterscheiden sich geringfügig von ihren Standardzuständen.

• Steuerelemente sind display: flex, wodurch HTML-Leerzeichen reduziert werden und Sie die Ausrichtungssteuerung mit Abstands-und Flexbox-Dienstprogrammen bereitstellen können.
• Steuerelemente und Eingabegruppen erhalten width: auto, um den Bootstrap-Standard width: 100%zu überschreiben.,
• Steuerelemente werden nur in Ansichtsfenstern angezeigt, die mindestens 576 Pixel breit sind, um schmale Ansichtsfenster auf Mobilgeräten zu berücksichtigen.

Möglicherweise müssen Sie die Breite und Ausrichtung einzelner Formularsteuerelemente manuell mit Abstandsdienstprogrammen adressieren (wie unten gezeigt). Stellen Sie schließlich sicher, dass Sie bei jedem Formularsteuerelement immer eine <label>, auch wenn Sie sie vor Nicht-Screenreader-Besuchern mit .sr-only.

Benutzerdefinierte Formularsteuerelemente und-auswahlen werden ebenfalls unterstützt.,

Hilfetext

Hilfetext auf Blockebene in Formularen kann mit (früher bekannt als .help-block in v3) erstellt werden. Inline-Hilfetext kann flexibel mit jedem Inline-HTML-Element und Utility-Klassen wie .text-mutedimplementiert werden.,

Hilfetext unten Eingaben können mit gestylt werden. 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 eine <small>, oder etwas anderes) mit nichts weiter als einer Utility-Klasse.

Deaktivierte Formulare

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

<input class="form-control" type="text" placeholder="Disabled input here..." disabled>

Fügen Sie das Attribut disabled zu einem <fieldset> hinzu, um alle darin enthaltenen Steuerelemente zu deaktivieren.

Validierung

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

Wie es funktioniert

So funktioniert die Formularvalidierung mit Bootstrap:

• Die HTML-Formularvalidierung wird über die beiden Pseudoklassen von CSS angewendet, :invalid und :valid. Es gilt an <input>, <select> und <textarea> – Elemente.,
• Bootstrap Bereiche :invalid und :valid Stile zu übergeordneten .was-validated – Klasse, die in der Regel angewendet, um die <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 der Formularübermittlung).
• Um das Erscheinungsbild des Formulars zurückzusetzen (z. B. bei dynamischen Formularübermittlungen mit AJAX), entfernen Sie die .was-validated – Klasse nach dem Senden erneut aus der <form>.,
• Als Fallback können .is-invalid und .is-valid anstelle der Pseudoklassen für die serverseitige Validierung verwendet werden. Sie benötigen keine.was-validated übergeordnete Klasse.
• Aufgrund von Einschränkungen in der Funktionsweise von CSS können wir (derzeit) keine Stile auf ein <label> anwenden, das ohne die Hilfe von benutzerdefiniertem JavaScript vor einem Formularsteuerelement im DOM steht.
• Alle modernen Browser unterstützen die constraint validation API, eine Reihe von JavaScript-Methoden zur Validierung von Formularsteuerelementen.,
• Feedback-Nachrichten können die Standardeinstellungen des Browsers (für jeden Browser unterschiedlich und über CSS nicht formatierbar) oder unsere benutzerdefinierten Feedback-Stile mit zusätzlichem HTML und CSS verwenden.
• Sie können benutzerdefinierte Gültigkeit Nachrichten mit setCustomValidity in JavaScript.

Berücksichtigen Sie in diesem Sinne die folgenden Demos für unsere benutzerdefinierten Formularvalidierungsstile, optionale serverseitige Klassen und Browservorgaben.,

Benutzerdefinierte Stile

Für benutzerdefinierte Bootstrap-Formularvalidierungsnachrichten müssen Sie das boolesche Attribut zu Ihrem hinzufügen <form>. Dies deaktiviert die Standard-Feedback-Tooltips des Browsers, bietet jedoch weiterhin Zugriff auf die Formularvalidierungs-APIs in JavaScript. Versuchen Sie, das Formular unten einzureichen; Unser JavaScript wird den Senden-Button abfangen und Feedback an Sie weiterleiten. Wenn Sie versuchen zu senden, werden die Stile :invalid und :valid auf Ihre Formularsteuerelemente angewendet.,

Benutzerdefinierte Feedback-Stile Wenden Sie benutzerdefinierte Farben, Rahmen, Fokusstile und Hintergrundsymbole an, um Feedback besser zu kommunizieren. Hintergrundsymbole für <select>s sind nur mit .custom-select und nicht mit .form-controlverfügbar.

Browser-Standardeinstellungen

Sie interessieren sich nicht für benutzerdefinierte Validierungs-Feedback-Nachrichten oder Schreiben von JavaScript, um das Formularverhalten zu ändern? Alles gut, Sie können die Browser-Standardeinstellungen verwenden. Versuchen Sie, das Formular unten einzureichen. Abhängig von Ihrem Browser und Betriebssystem sehen Sie eine etwas andere Art von Feedback.,

Während diese Feedback-Stile nicht mit CSS gestylt werden können, können Sie den Feedback-Text weiterhin über JavaScript anpassen.

serverseitig

Wir empfehlen die clientseitige Validierung, falls Sie jedoch eine serverseitige Validierung benötigen, können Sie ungültige und gültige Formularfelder mit .is-invalid und .is-validangeben. Beachten Sie, dass .invalid-feedback auch mit diesen Klassen unterstützt wird.,

Unterstützte Elemente

Validierungsstile sind für die folgenden Formularsteuerelemente und-komponenten verfügbar:

Tooltips

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

Customizing

Validierungszustände können über Sass mit der Map angepasst werden. Diese Sass-Map befindet sich in unserer _variables.scss – Datei und wird durchlaufen, um die standardmäßigen valid/invalid – Validierungszustände zu generieren. Enthalten ist eine verschachtelte Karte zum Anpassen der Farbe und des Symbols jedes Staates. Während keine anderen Zustände von Browsern unterstützt werden, können Benutzer, die benutzerdefinierte Stile verwenden, problemlos komplexere Formularfeedbacks hinzufügen.,

Bitte beachten Sie, dass wir nicht empfehlen, diese Werte anzupassen, ohne auch das form-validation-state mixin zu ändern.

Benutzerdefinierte Formulare

Für noch mehr Anpassung und browserübergreifende Konsistenz verwenden Sie unsere vollständig benutzerdefinierten Formularelemente, um die Browsereinstellungen zu ersetzen. Sie basieren auf semantischen und zugänglichen Markups und sind daher solide Ersatz für jedes Standardformularsteuerelement.,

Checkboxen und Radios

Jedes Kontrollkästchen und Radio <input> und <label> Die Paarung ist in eine <div> eingeschlossen, um unser benutzerdefiniertes Steuerelement zu erstellen. Strukturell ist dies der gleiche Ansatz wie unser Standard .form-check.

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

Wir verstecken den Standard <input> mit opacity und verwenden die .custom-control-label um an seiner Stelle einen neuen benutzerdefinierten Formularindikator mit ::before und ::afterzu erstellen. Leider können wir nicht nur aus der <input> eine benutzerdefinierte erstellen, da die content von CSS für dieses Element nicht funktioniert.,

In den geprüften Zuständen verwenden wir base64 embedded SVG Icons von Open Source. Dies bietet uns die beste Kontrolle für das Styling und die Positionierung über Browser und Geräte hinweg.

Kontrollkästchen

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

Wenn Sie die Verwendung von jQuery, so etwas wie dies sollte ausreichen:

$('.your-checkbox').prop('indeterminate', true)

Radios

Inline

Deaktiviert

Custom checkboxes und Radio kann auch deaktiviert werden., Fügen Sie das boolesche Attribut disabled zum <input> hinzu und die benutzerdefinierte Anzeige-und Beschriftungsbeschreibung wird automatisch formatiert.

Switches

Ein Schalter hat das markup einer custom-checkbox sondern nutzt die .custom-switch Klasse zu Rendern Umschalten. Switches unterstützen auch das Attribut disabled.,

Menü auswählen

Benutzerdefinierte <select> Menüs benötigen nur eine benutzerdefinierte Klasse, .custom-select um die benutzerdefinierten Stile auszulösen. Benutzerdefinierte Stile sind auf das ursprüngliche Erscheinungsbild <select>beschränkt und können die <option>s aufgrund von Browsereinschränkungen nicht ändern.

Sie können auch aus kleinen und großen benutzerdefinierten Auswahlen auswählen, die unseren ähnlich großen Texteingaben entsprechen.,

Das multiple Attribut wird ebenfalls unterstützt:

Ebenso wie das size Attribut:

Bereich

Erstellen Sie benutzerdefinierte <input type="range"> Steuerelemente mit .custom-range. Die Spur (der Hintergrund) und der Daumen (der Wert) sind beide so gestaltet, dass sie browserübergreifend gleich erscheinen. Da nur IE und Firefox das „Füllen“ ihrer Spur von links oder rechts des Daumens unterstützen, um den Fortschritt visuell anzuzeigen, unterstützen wir dies derzeit nicht.,

<label for="customRange1">Example range</label><input type="range" class="custom-range">

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

<label for="customRange2">Example range</label><input type="range" class="custom-range" min="0" max="5">

By default, range inputs „snap” to integer values., Um dies zu ändern, können Sie einen step Wert. Im folgenden Beispiel verdoppeln wir die Anzahl der Schritte mit step="0.5".

<label for="customRange3">Example range</label><input type="range" class="custom-range" min="0" max="5" step="0.5">

Dateibrowser

Die Dateieingabe ist die knorrigste des Bündels und erfordert zusätzliches JavaScript, wenn Sie sie mit funktionaler Datei auswählen… und ausgewähltem Dateinamentext verbinden möchten.

Wir verstecken die Standarddatei <input> über opacity und stylen stattdessen die <label>. Die Schaltfläche wird generiert und mit ::afterpositioniert. Schließlich deklarieren wir eine width und height auf der <input> für den richtigen Abstand für den umgebenden Inhalt.,

Übersetzen oder Anpassen der Zeichenfolgen mit SCSS

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

$custom-file-text: ( en: "Browse", es: "Elegir");

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

Sie müssen die Sprache Ihres Dokuments (oder Teilbaums davon) richtig einstellen, damit der richtige Text angezeigt wird., Dies kann unter anderem mit dem Attribut lang im Element oder dem HTTP-Header Content-Language erfolgen.

Übersetzen oder Anpassen der Zeichenfolgen mit HTML

Bootstrap bietet auch eine Möglichkeit, den Text „Durchsuchen“ in HTML mit dem Attribut data-browse zu übersetzen, das dem benutzerdefinierten Eingabeetikett hinzugefügt werden kann (Beispiel auf Niederländisch):