Bootstrap 4 -Formulareingaben
Unterstützte Formularsteuerelemente
Bootstrap unterstützt die folgenden Formularsteuerelemente:
- Eingang
- Textbereich
- Kontrollkästchen
- Radio
- wählen
Bootstrap-Eingabe
Bootstrap unterstützt alle HTML5-Eingabetypen: Text, Passwort, DateTime, DateTime-Local, Date, Month, Time, Week, Number, E-Mail, URL, Search, Tel und Color.
Hinweis: Eingaben werden NICHT vollständig formatiert, wenn ihr Typ nicht richtig deklariert ist!
Das folgende Beispiel enthält zwei Eingabeelemente; einer von type="text"und einer von
type="password". Wie wir im Kapitel Formulare erwähnt haben, verwenden wir die .form-controlKlasse, um Eingaben mit voller Breite und korrekter Auffüllung usw. zu formatieren:
Beispiel
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Bootstrap-Textbereich
Das folgende Beispiel enthält einen Textbereich:
Beispiel
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Bootstrap-Kontrollkästchen
Kontrollkästchen werden verwendet, wenn Sie möchten, dass der Benutzer eine beliebige Anzahl von Optionen aus einer Liste von voreingestellten Optionen auswählt.
Das folgende Beispiel enthält drei Kontrollkästchen. Die letzte Option ist deaktiviert:
Beispiel
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Beispiel erklärt
Verwenden Sie ein Wrapper-Element mit class="form-check", um die richtigen Ränder für Beschriftungen und Kontrollkästchen sicherzustellen.
Fügen Sie die .form-check-labelKlasse hinzu, um Elemente zu kennzeichnen und Kontrollkästchen innerhalb des Containers .form-check-inputrichtig zu gestalten ..form-check
Inline-Kontrollkästchen
Verwenden Sie die .form-check-inlineKlasse, wenn Sie möchten, dass die Kontrollkästchen in derselben Zeile erscheinen:
Beispiel
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Bootstrap-Optionsschaltflächen
Optionsfelder werden verwendet, wenn Sie den Benutzer auf nur eine Auswahl aus einer Liste von voreingestellten Optionen beschränken möchten.
Das folgende Beispiel enthält drei Optionsfelder. Die letzte Option ist deaktiviert:
Beispiel
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Verwenden Sie wie bei Kontrollkästchen die .form-check-inlineKlasse, wenn Sie möchten, dass die Optionsfelder in derselben Zeile erscheinen:
Beispiel
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Bootstrap-Auswahlliste
Auswahllisten werden verwendet, wenn Sie dem Benutzer ermöglichen möchten, aus mehreren Optionen auszuwählen.
Das folgende Beispiel enthält eine Dropdown-Liste (Auswahlliste):
Beispiel
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
Größe des Formularsteuerelements
Ändern Sie die Größe des Formularsteuerelements mit .form-control-smoder .form-control-lg:
Beispiel
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
Formularsteuerung mit Klartext
Verwenden Sie das .form-control-plaintext, wenn Sie das Eingabefeld als reinen Text formatieren möchten:
Beispiel
<input type="text" class="form-control-plaintext">
Formularsteuerdatei und -bereich
Fügen Sie die .form-control-rangeKlasse zu input type"range"oder .form-control-filezu input type"file"hinzu, um ein Bereichssteuerelement oder ein Dateifeld mit voller Breite zu gestalten:
Beispiel
<input type="range" class="form-control-range">
<input type="file"
class="form-control-file border">