Bootstrap 5-Formular

Gestapelte Formulare

Alle <input> und <textarea>-Elemente mit der Klasse .form-control erhalten die richtige Formulargestaltung:

Beispiel

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">E-Mail:</label>
    <input type="email" class="form-control" id="email" placeholder="Bitte geben Sie die E-Mail-Adresse ein" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Passwort：</label>
    <input type="password" class="form-control" id="pwd" placeholder="Bitte geben Sie Ihr Passwort ein" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Mich erinnern
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Einreichen</button>
</form>

Probieren Sie es selbst aus

Zusätzlich möchten wir darauf hinweisen, dass wir für jeden label-Element .form-label gesetzt, um eine richtige Füllung zu gewährleisten.

haben verschiedene Markierungen. Sie sind mit der Klasse .form-check Klasse der Containerelemente umgeben sind. Die label-Einstellungen .form-check-label Klasse, während für die Checkbox und die Radio-Button .form-check-input.

Textarea

Beispiel

<label for="comment">Kommentar：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

Probieren Sie es selbst aus

Formularzeile / Gitter (inline-Formular)

Wenn Sie möchten, dass die Formularelemente nebeneinander angezeigt werden, verwenden Sie .row und .col:

Beispiel

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Bitte geben Sie Ihre E-Mail-Adresse ein" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Bitte geben Sie Ihr Passwort ein" name="pswd">
    </div>
  </div>
</form>

Probieren Sie es selbst aus

Sie werden Bootstrap-Gitter Mehr über Spalten und Zeilen in diesem Kapitel lernen.

Größe der Formularkontrollen

Sie können .form-control-lg oder .form-control-sm Ändern .form-control Größe der Eingabekontrollen:

Beispiel

<input type="text" class="form-control form-control-lg" placeholder="Großer Eingabekontrollen">
<input type="text" class="form-control" placeholder="Regelmäßige Eingabekontrollen">
<input type="text" class="form-control form-control-sm" placeholder="Kleiner Eingabekontrollen">

Probieren Sie es selbst aus

Deaktiviert und schreibgeschützt

Verwenden Sie die Attribute disabled und/oder readonly, um Eingabefelder zu deaktivieren:

Beispiel

<input type="text" class="form-control" placeholder="Regelmäßige Eingabekontrollen">
<input type="text" class="form-control" placeholder="Deaktivierte Eingabekontrollen" disabled>
<input type="text" class="form-control" placeholder="Nur lesbarer Eingabekontrollen" readonly>

Probieren Sie es selbst aus

Reines Textfeld

Verwenden Sie .form-control-plaintext Verwenden Sie die Klasse, um den Stil der Eingabefelder ohne Rahmen zu setzen, aber angemessene Außen- und Innenabstände beizubehalten:

Beispiel

<input type="text" class="form-control-plaintext" placeholder="Reines Textfeld">
<input type="text" class="form-control" placeholder="Regelmäßige Eingabekontrollen">

Probieren Sie es selbst aus

Farbwähler

Um die Eingabestil für type="color" korrekt zu konfigurieren, verwenden Sie .form-control-color Klasse:

Beispiel

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

Probieren Sie es selbst aus