Bootstrap Formulare
In diesem Kapitel lernen wir, wie man mit Bootstrap Formulare erstellt. Bootstrap kann Formulare in verschiedenen Stilen durch einige einfache HTML-Tags und erweiterte Klassen erstellen.
Bootstrap bietet die folgenden Arten von Formularlayouts:
- Vertikales Formular (Standard)
- Inline-Formular
- Horizontales Formular
Vertikales oder Basisformular
Die grundlegende Formularstruktur ist in Bootstrap integriert, und einzelne Formularsteuerelemente erhalten automatisch einige globale Stile. Die Schritte zum Erstellen eines Basisformulars sind unten aufgeführt:
- Fügen Sie dem übergeordneten <form>-Element hinzu:role="form"。
- Platzieren Sie Beschriftungen und Steuerelemente in einem div mit der Klasse.form-groupin einem <div>. Dies ist für einen optimalen Abstand erforderlich.
- Fügen Sie die Klasse = zu allen Textelementen <input>, <textarea> und <select> hinzu:form-control" 。
Beispiel
<form role="form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Bitte geben Sie Ihren Namen ein">
</div>
<div class="form-group">
<label for="inputfile">Dateieingabe</label>
<input type="file" id="inputfile">
<p class="help-block">Hier ist ein Beispiel für Hilfetext auf Blockebene.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Bitte ankreuzen</label>
</div>
<button type="submit" class="btn btn-default">Absenden</button>
</form>
Ausprobieren »
Das Ergebnis ist wie folgt:
Inline-Formular
Wenn Sie ein Formular erstellen müssen, bei dem alle Elemente inline, linksbündig und Beschriftungen nebeneinander angeordnet sind, fügen Sie dem <form>-Tag die Klasse hinzu:.form-inline。
Beispiel
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Bitte geben Sie Ihren Namen ein">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">Dateieingabe</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox">Bitte ankreuzen</label>
</div>
<button type="submit" class="btn btn-default">Absenden</button>
</form>
Ausprobieren »
Das Ergebnis ist wie folgt:
- Standardmäßig haben input, select und textarea in Bootstrap eine Breite von 100 %. Bei der Verwendung von Inline-Formularen müssen Sie für die Formularsteuerelemente eine Breite festlegen.
- Mit der Klasse.sr-onlykönnen Sie die Beschriftungen des Inline-Formulars ausblenden.
Horizontales Formular
Horizontale Formulare unterscheiden sich von anderen Formularen nicht nur durch die Menge an Markup, sondern auch durch die Art und Weise, wie das Formular dargestellt wird. Um ein horizontal angeordnetes Formular zu erstellen, gehen Sie wie folgt vor:
- Fügen Sie dem übergeordneten <form>-Element die Klasse hinzu:.form-horizontal。
- Platzieren Sie Beschriftungen und Steuerelemente in einem div mit der Klasse.form-groupin einem <div>.
- Fügen Sie der Beschriftung die Klasse hinzu:.control-label。
Beispiel
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Vorname</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="Bitte geben Sie Ihren Vornamen ein">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">Nachname</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname" placeholder="Bitte geben Sie Ihren Nachnamen ein">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">Erinnern Sie sich an mich</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Anmelden</button>
</div>
</div>
</Form>
Ausprobieren »
Das Ergebnis ist wie folgt:
Bootstrap unterstützt die gängigsten Formularsteuerelemente, hauptsächlichinput, textarea, checkbox, radio und select。
Eingabe
Das gängigste Formular-Textfeld ist das input. Benutzer können die meisten der erforderlichen Formulardaten darin eingeben. Bootstrap bietet Unterstützung für alle nativen HTML5-Eingabetypen, einschließlich:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、telundcolor. Eine ordnungsgemäßetypeDeklaration ist erforderlich, damitinputdie vollständigen Stile erhält.
Beispiel
<form role="form">
<div class="form-group">
<label for="name">Beschriftungen</label>
<input type="text" class="form-control" placeholder="Texteingabe">
</div>
</Form>
Selbst ausprobieren »
Das Ergebnis ist wie folgt:
Textarea
Wenn Sie eine mehrzeilige Eingabe benötigen, können Sie die textarea verwenden. Sie können das Attributrowsbei Bedarf ändern (weniger Zeilen = kleineres Feld, mehr Zeilen = größeres Feld).
Beispiel
<form role="form">
<div class="form-group">
<label for="name">Textarea</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</form>
Selbst ausprobieren »
Das Ergebnis ist wie folgt:
Checkbox und Radio
Kontrollkästchen und Optionsfelder werden verwendet, damit Benutzer aus einer Reihe voreingestellter Optionen wählen können.
- Wenn Sie beim Erstellen eines Formulars möchten, dass Benutzer mehrere Optionen aus einer Liste auswählen, verwenden Siecheckbox. Wenn Sie Benutzer darauf beschränken möchten, nur eine Option auszuwählen, verwenden Sieradio。
- Verwenden Sie für eine Reihe von Kontrollkästchen und Optionsfeldern die Klasse.checkbox-inlineoder.radio-inline, damit sie in derselben Zeile angezeigt werden.
Das folgende Beispiel demonstriert beide Typen (Standard und Inline):
Beispiel
<label for="name">Beispiel für Standard-Kontrollkästchen und -Optionsfelder</label>
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option 1</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option 2 – Durch das Auswählen wird Option 1 abgewählt</label>
</div>
<label for="name">Beispiel für Inline-Checkboxen und -Radio-Buttons</label>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1">Option 1</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2">Option 2</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3">Option 3</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked>Option 1</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2">Option 2</label>
</div>
Selbst ausprobieren »
Das Ergebnis ist wie folgt:
Auswählen
Wenn Benutzer aus mehreren Optionen wählen sollen, aber standardmäßig nur eine Option ausgewählt werden kann, verwenden Sie ein Auswahlfeld.
- Verwenden Sie <select>, um eine Liste von Optionen anzuzeigen, meist Listen, mit denen Benutzer vertraut sind, wie Bundesländer oder Nummern.
- Verwenden Siemultiple="multiple", damit Benutzer mehrere Optionen auswählen können.
Das folgende Beispiel demonstriert beide Typen (select und multiple):
Beispiel
<form role="form">
<div class="form-group">
<label for="name">Auswahlliste</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="name">Auswahlliste mit Mehrfachauswahl</label>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
Selbst ausprobieren »
Das Ergebnis ist wie folgt:
Wenn Sie in einem horizontalen Formular einfachen Text nach einem Formularlabel platzieren müssen, verwenden Sie die Klasse für ein <p>.form-control-static。
Beispiel
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Passwort</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Bitte Passwort eingeben">
</div>
</div>
</form>
Selbst ausprobieren »
Das Ergebnis ist wie folgt:
Zusätzlich zum Zustand:focus(d. h. wenn der Benutzer auf das Eingabefeld klickt oder die Tab-Taste verwendet, um den Fokus darauf zu legen) definiert Bootstrap auch Stile für deaktivierte Eingaben und stellt Validierungsklassen für Formulare bereit.
Eingabefokus
Wenn das Eingabefeld:focuserhält, wird der Rahmen des Eingabefelds entfernt und einbox-shadow。
Deaktivierte Eingabe
Wenn Sie ein Eingabefeld deaktivieren möchten, fügen Sie einfach das Attributdisabledhinzu, das das Eingabefeld nicht nur deaktiviert, sondern auch seinen Stil und den Mauszeigerstil ändert, wenn sich der Zeiger über dem Element befindet.
Deaktiviertes Fieldset
Fügen Sie das Attribut disabled zu <fieldset> hinzu, um alle Steuerelemente innerhalb des <fieldset> zu deaktivieren.
Validierungszustände
Bootstrap enthält Validierungsstile für Fehler-, Warn- und Erfolgsmeldungen. Fügen Sie einfach die entsprechende Klasse dem Elternelement hinzu (.has-warning, .has-error oder .has-success), um die Validierungszustände zu verwenden.
Das folgende Beispiel demonstriert alle Steuerelement-Zustände:
Beispiel
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Fokus</label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" type="text" value="Dieses Eingabefeld erhält den Fokus...">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Deaktiviert</label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text" placeholder="Dieses Eingabefeld ist nicht bearbeitbar..." disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">Deaktivierte Eingabe (Fieldset deaktiviert)</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control" placeholder="Nicht bearbeitbar">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label">Deaktiviertes Auswahldokument (Fieldset deaktiviert)</label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>Nicht auswählbar</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success">
<label class="col-sm-2 control-label" for="inputSuccess">Eingabe erfolgreich</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
</div>
</div>
<div class="form-group has-warning">
<label class="col-sm-2 control-label" for="inputWarning">Eingabewarnung</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
</div>
</div>
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="inputError">Eingabefehler</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
</div>
</div>
</Form>
Selbst ausprobieren »
Die Ergebnisse sind wie folgt:
Sie können die Klasse.input-lgund.col-lg-*verwenden, um die Höhe und Breite des Formulars festzulegen. Das folgende Beispiel demonstriert dies:
Beispiel
<form role="form">
<div class="form-group">
<input class="form-control input-lg" type="text" placeholder=".input-lg">
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Standard-Eingabe">
</div>
<div class="form-group">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
</div>
<div class="form-group"></div>
<div class="form-group">
<select class="form-control input-lg">
<option value="">.input-lg</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="">Standardauswahl</option>
</select>
</div>
<div class="form-group">
<select class="form-control input-sm">
<option value="">.input-sm</option>
</select>
</div>
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
</form>
Selbst ausprobieren »
Die Ergebnisse sind wie folgt:
Bootstrap-Formularsteuerelemente können einen blockbasierten Hilfetext für das Eingabelement haben. Um einen Inhaltsblock hinzuzufügen, der die gesamte Breite einnimmt, verwenden Sie diesen nach <input>.help-block. Das folgende Beispiel veranschaulicht dies:
Beispiel
<form role="form">
<span>Beispiel für Hilfetext</span>
<input class="form-control" type="text" placeholder="">
<span class="help-block">Ein längerer Block aus Hilfetext, der eine Zeile überschreitet und sich über die nächste Zeile erstrecken muss. Der Hilfetext in diesem Beispiel hat insgesamt zwei Zeilen.</span>
</form>
Selbst ausprobieren »
Die Ergebnisse sind wie folgt:
Weitere Erweiterungen
