Bootstrap - Checks & Radios: Ein Anfängerleitfaden

Hallo da draußen, zukünftige Webentwickler! Heute tauchen wir in die aufregende Welt der Bootstrap-Formularsteuerelemente ein, insbesondere in Checkboxen und Optionsfelder. Diese kleinen interaktiven Elemente mögen einfach erscheinen, aber sie sind unglaublich mächtig, um Benutzereingaben zu sammeln. Also, rollen wir die Ärmel hoch und los geht's!

Einführung in Bootstrap-Formularsteuerelemente

Bevor wir ins Detail gehen, lassen Sie uns einen Moment innehalten und darüber nachdenken, warum wir Bootstrap lernen. Stellen Sie sich vor, Sie bauen ein Haus. Sie könnten jeden Ziegelstein von Grund auf neu herstellen oder vorgefertigte Komponenten verwenden. Bootstrap ist wie ein Schatzkästchen voller vorgefertigter Komponenten für Ihre Webseite. Es spart Zeit und stellt Konsistenz sicher. Lassen Sie uns unseren ersten Komponenten erkunden!

Checkbox: Das Multi-Select-Wunder

Grundlegende Checkbox

Checkboxen sind wie kleine quadratische Kästchen, die Benutzer anklicken können, um mehrere Optionen auszuwählen. Sie sind perfekt, wenn Sie möchten, dass Benutzer mehr als einen Artikel aus einer Liste auswählen. Lassen Sie uns unsere erste Checkbox erstellen:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Standard-Checkbox
</label>
</div>

In diesem Beispiel verwenden wir Bootstrap-Klassen, um unsere Checkbox zu gestalten. Die form-check-Klasse erstellt eine Hülle, während form-check-input die Checkbox selbst gestaltet. Das for-Attribut im Label entspricht der id des Eingabefelds, verbindet sie also.

Ausgewählter Zustand

Manchmal möchten Sie, dass eine Checkbox vorab ausgewählt ist. Das ist so einfach wie das Hinzufügen des checked-Attributs:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Ausgewählte Checkbox
</label>
</div>

Unbestimmter Zustand

Hier ist ein interessantes Detail: Checkboxen können einen dritten Zustand namens "unbestimmt" haben. Es ist so, als ob Ihr Teenager sein Zimmer aufräumt - es ist nicht ganz sauber, aber auch nicht完全 messy. Wir können diesen Zustand nicht in HTML festlegen, aber wir können es mit JavaScript tun:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
Unbestimmte Checkbox
</label>
</div>

<script>
document.getElementById('flexCheckIndeterminate').indeterminate = true;
</script>

Deaktivierte Checkbox

Manchmal möchten Sie eine Checkbox anzeigen, aber den Benutzern nicht erlauben, mit ihr zu interagieren. Hier kommt das disabled-Attribut ins Spiel:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
Deaktivierte Checkbox
</label>
</div>

Optionsfelder: Die Einzelfach-Champions

Grundlegende Optionsfelder

Optionsfelder sind wie Cousins der Checkboxen. Sie sehen ähnlich aus, verhalten sich aber anders. Während Checkboxen mehrere Auswahlen ermöglichen, erzwingen Optionsfelder eine einzelne Auswahl innerhalb einer Gruppe. Lassen Sie uns ein Satz Optionsfelder erstellen:

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Standard-Optionsfeld
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Standard-ausgewähltes Optionsfeld
</label>
</div>

Beachten Sie, wie beide Optionsfelder das gleiche name-Attribut haben? Dies gruppiert sie zusammen und stellt sicher, dass nur eines gleichzeitig ausgewählt werden kann.

Deaktivierte Optionsfelder

Genau wie bei Checkboxen können wir Optionsfelder deaktivieren:

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
Deaktivierte Optionsfeld
</label>
</div>

Schalter: Der moderne Umschalter

Schalter sind eine stilvolle Alternative zu Checkboxen. Sie sind perfekt für Ein/Aus-Einstellungen. Lassen Sie uns einen erstellen:

<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Standard-Schalter-Checkbox-Eingabe</label>
</div>

Die form-switch-Klasse verwandelt unsere Checkbox in einen schicken Umschalter.

Layoutoptionen

Standard (gestapelt)

Standardmäßig sind Checkboxen und Optionsfelder vertikal gestapelt:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck1">
<label class="form-check-label" for="stackedCheck1">Gestapelte Checkbox 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck2">
<label class="form-check-label" for="stackedCheck2">Gestapelte Checkbox 2</label>
</div>

Inline

Möchten Sie Ihre Optionen nebeneinander haben? Verwenden Sie die form-check-inline-Klasse:

<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>

Umgekehrt

Möchten Sie die Bezeichnung vor der Checkbox haben? Verwenden Sie form-check-reverse:

<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" id="reverseCheck1">
<label class="form-check-label" for="reverseCheck1">Umgekehrte Checkbox</label>
</div>

Ohne Bezeichnungen

Manchmal möchten Sie eine Checkbox oder ein Optionsfeld ohne Bezeichnung:

<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

Vergessen Sie nicht, aria-label für die Barrierefreiheit zu verwenden!

Schaltflächen umschalten

Schaltflächen mit Umschaltfunktion sind eine schicke Möglichkeit, Checkboxen und Optionsfelder zu verwenden. Sie sehen aus wie reguläre Schaltflächen, verhalten sich aber wie Checkboxen oder Radios:

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Einzelner Umschalter</label>

Umrandete Stile

Möchten Sie ein unauffälligeres Aussehen? Verwenden Sie die umrandeten Stile:

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Einzelner Umschalter</label>

Schlussfolgerung

Glückwunsch! Sie haben gerade eine grandiose Tour durch die Bootstrap-Checkboxen und Optionsfelder gemacht. Diese kleinen Komponenten mögen einfach erscheinen, aber sie sind die Bausteine interaktiver Formulare. Erinnern Sie sich daran, Übung macht den Meister. Versuchen Sie, diese Elemente auf verschiedene Weise zu kombinieren, um ansprechende Formulare für Ihre Benutzer zu erstellen.

Hier ist eine schnelle Referenztabelle der Methoden, die wir behandelt haben:

Methode	Beschreibung
Grundlegende Checkbox	<input class="form-check-input" type="checkbox">
Ausgewählte Checkbox	Fügen Sie das checked-Attribut hinzu
Unbestimmte Checkbox	Mit JavaScript festlegen
Deaktivierte Checkbox	Fügen Sie das disabled-Attribut hinzu
Grundlegendes Optionsfeld	<input class="form-check-input" type="radio">
Deaktivierte Optionsfeld	Fügen Sie das disabled-Attribut hinzu
Schalter	Verwenden Sie die form-switch-Klasse
Inline-Layout	Verwenden Sie die form-check-inline-Klasse
Umgekehrtes Layout	Verwenden Sie die form-check-reverse-Klasse
Ohne Bezeichnungen	Auslassen des Labels, verwenden Sie aria-label
Schaltflächen umschalten	Verwenden Sie die btn-check-Klasse
Umrandete Stile	Verwenden Sie die btn-outline-*-Klassen

Weiters experimentieren, weiter lernen und vor allem Spaß dabei haben, erstaunliche Webformulare zu erstellen!

Credits: Image by storyset