Bootstrap-4- Formulare
Die Standardeinstellungen von Bootstrap 4
Formularsteuerelemente erhalten mit Bootstrap automatisch ein globales Styling:
Alle textuellen <input>, <textarea>, und
<select>Elemente mit Klasse .form-controlhaben eine Breite von 100%.
Bootstrap 4 Formularlayouts
Bootstrap bietet zwei Arten von Formularlayouts:
- Gestapeltes Formular (in voller Breite).
- Inline-Formular
Bootstrap 4 gestapeltes Formular
Das folgende Beispiel erstellt ein gestapeltes Formular mit zwei Eingabefeldern, einem Kontrollkästchen und einer Senden-Schaltfläche.
Fügen Sie ein Wrapper-Element mit .form-groupum jedes Formularsteuerelement hinzu, um die richtigen Ränder sicherzustellen:
Beispiel
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Bootstrap-Inline-Formular
In einem Inline-Formular sind alle Elemente inline und linksbündig ausgerichtet.
Hinweis: Dies gilt nur für Formulare in Ansichtsfenstern, die mindestens 576 Pixel breit sind. Auf Bildschirmen kleiner als 576 Pixel wird es horizontal gestapelt.
Zusätzliche Regel für ein Inline-Formular:
- Fügen Sie
.form-inlinedem<form>Element eine Klasse hinzu
Das folgende Beispiel erstellt ein Inline-Formular mit zwei Eingabefeldern, einem Kontrollkästchen und einer Senden-Schaltfläche:
Beispiel
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
<div class="form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Inline-Formular mit Dienstprogrammen
Das obige Inline-Formular fühlt sich "komprimiert" an und sieht mit den Spacing-Utilities von Bootstrap viel besser aus. Das folgende Beispiel fügt jeder Eingabe auf allen Geräten (klein und hoch) einen rechten Rand ( .mr-sm-2) hinzu. Und eine untere Randklasse ( .mb-2) wird verwendet, um das Eingabefeld zu formatieren, wenn es umbricht (geht von horizontal zu vertikal, weil nicht genügend Platz/Breite vorhanden ist):
Beispiel
<form class="form-inline" action="/action_page.php">
<label for="email"
class="mr-sm-2">Email address:</label>
<input type="email" class="form-control
mb-2 mr-sm-2" placeholder="Enter email" id="email">
<label for="pwd"
class="mr-sm-2">Password:</label>
<input type="password" class="form-control
mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary
mb-2">Submit</button>
</form>
In unserem Bootstrap 4 Utilities Kapitel erfahren Sie mehr über Spacing und andere "Hilfs"-Klassen .
Zeile/Raster bilden
Sie können auch Spalten ( .col) verwenden, um die Breite und Ausrichtung von Formulareingaben zu steuern, ohne Abstandsdienstprogramme zu verwenden. Denken Sie nur daran, sie in einen .rowBehälter zu legen.
Im folgenden Beispiel verwenden wir zwei Spalten, die nebeneinander angezeigt werden. Im Kapitel Bootstrap Grids erfahren Sie noch viel mehr über Spalten und Zeilen .
Beispiel
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Wenn Sie weniger Rasterränder wünschen (Standardspaltenstege überschreiben), verwenden Sie .form-rowanstelle von .row:
Beispiel
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Formularvalidierung
Sie können verschiedene Validierungsklassen verwenden, um Benutzern wertvolles Feedback zu geben. Fügen Sie entweder .was-validatedoder .needs-validationzum <form>Element hinzu, je nachdem, ob Sie Validierungsfeedback vor oder nach dem Absenden des Formulars bereitstellen möchten. Die Eingabefelder haben einen grünen (gültigen) oder roten (ungültigen) Rand, um anzuzeigen, was im Formular fehlt. .valid-feedbackSie können auch eine oder -Nachricht hinzufügen
.invalid-feedback, um dem Benutzer explizit mitzuteilen, was vor dem Absenden des Formulars fehlt oder getan werden muss.
Beispiel
In diesem Beispiel verwenden wir, .was-validatedum anzugeben, was vor dem Absenden des Formulars fehlt:
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
Beispiel
In diesem Beispiel verwenden wir .needs-validation, wodurch der Validierungseffekt hinzugefügt wird, NACHDEM das Formular gesendet wurde (falls etwas fehlt). Beachten Sie, dass Sie auch etwas jQuery-Code hinzufügen müssen, damit dieses Beispiel richtig funktioniert:
<form action="/action_page.php" class="needs-validation"
novalidate>
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
<script>
//
Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the
forms we want to add validation styles to
var forms =
document.getElementsByClassName('needs-validation');
//
Loop over them and prevent submission
var validation =
Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
},
false);
});
}, false);
})();
</script>