Bootstrap5 Formulare

In diesem Kapitel lernen wir, wie man mit Bootstrap Formulare erstellt. Bootstrap kann durch einige einfache HTML-Tags und erweiterte Klassen Formulare in verschiedenen Stilen erstellen.

Formularelemente<input>, <textarea>, und<select>Elemente.form-controlBei Verwendung der Klasse wird die Breite auf 100% festgelegt.

Bootstrap5 Formular-Layout

  • Gestapeltes Formular (Vollbildbreite): vertikale Richtung
  • Inline-Formular: horizontale Richtung

Bootstrap bietet zwei Arten von Formular-Layouts:

Gestapeltes Formular

Das folgende Beispiel verwendet zwei Eingabefelder, ein Kontrollkästchen und eine Absenden-Schaltfläche, um ein gestapeltes Formular zu erstellen:

Beispiel

<form> <div class="mb-3 mt-3"> <label for="email" class="form-label">E-Mail:</label> <input type="email" class="form-control" id="email" placeholder="E-Mail eingeben" name="email"> </div> <div class="mb-3"> <label for="pwd" class="form-label">Passwort:</label> <input type="password" class="form-control" id="pwd" placeholder="Passwort eingeben" name="pswd"> </div> <div class="form-check mb-3"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember"> Angemeldet bleiben </label> </div> <button type="submit" class="btn btn-primary">Absenden</button> </Form>

Ausprobieren »

Anzeigeeffekt:

Im Beispiel verwenden wir die.form-label-Klasse, um sicherzustellen, dass Label-Elemente ein bestimmtes Padding haben.

Checkboxen verwenden ein anderes Markup. Sie verwenden.form-check, das um das Container-Element gelegt wird. Checkboxen und Radio-Buttons verwenden.form-check-input, und ihre Labels können.form-check-label verwendenclass.

Inline-Formular

Wenn Sie möchten, dass Formularelemente nebeneinander angezeigt werden, verwenden Sie.rowund.col：

Das folgende Beispiel zeigt zwei Eingabefelder nebeneinander, um ein Inline-Formular zu erstellen:

Beispiel

<form> <div class="row"> <div class="col"> <input type="text" class="form-control" placeholder="E-Mail eingeben" name="email"> </div> <div class="col"> <input type="password" class="form-control" placeholder="Passwort eingeben" name="pswd"> </div> </div> </Form>

Ausprobieren »

Anzeigeeffekt:

Textarea

Verwenden Sie das textarea-Tag, um ein Textfeld im Formular zu erstellen, verwenden Sie die.form-control-Klasse, um die textarea-Tags zu rendern:

Beispiel

<label for="comment">Bitte geben Sie Ihren Kommentar ein:</label> <textarea class="form-control" rows="5" id="comment" name="text"></textarea>

Ausprobieren »

Anzeigeeffekt:

Eingabegröße

Wir können, indem wir.form-controlim Eingabefeld.form-control-lgoder.form-control-sm-Klasse verwenden, um die Größe des Eingabefelds festzulegen:

Beispiel

<input type="text" class="form-control form-control-lg" placeholder="Großes Eingabefeld"> <input type="text" class="form-control" placeholder="Eingabefeld normaler Größe"> <input type="text" class="form-control form-control-sm" placeholder="Kleines Eingabefeld">

Ausprobieren »

Anzeigeeffekt:

Deaktivierte/schreibgeschützte Formulare

Verwenden Sie dasdisabled/readonly-Attribut, um das Eingabefeld auf deaktiviert/schreibgeschützt zu setzen:

Beispiel

<input type="text" class="form-control" placeholder="Normales Eingabefeld"> <input type="text" class="form-control" placeholder="Deaktiviertes Eingabefeld" disabled> <input type="text" class="form-control" placeholder="Schreibgeschütztes Eingabefeld" readonly>

Ausprobieren »

Klartext-Eingabefeld

Verwenden Sie die.form-control-plaintext-Klasse, um den Rahmen des Eingabefelds zu entfernen:

Beispiel

<input type="text" class="form-control-plaintext" placeholder="Klartext-Eingabefeld"> <input type="text" class="form-control" placeholder="Normale Eingabe">

Ausprobieren »

Farbwähler

Verwenden Sie die.form-control-colorKlasse, um einen Farbwähler zu erstellen:

Beispiel

<input type="color" class="form-control form-control-color" value="#CCCCCC">

Ausprobieren »

Anzeigeeffekt:

Andere Erweiterungen