Bootstrap 4 Formulare

Bootstrap 4 Standardeinstellungen

Formularelemente erhalten automatisch ein globales Styling mit Bootstrap

Alle textuellen Elemente <input>, <textarea> und <select> mit der Klasse .form-control haben eine Breite von 100%.

Bootstrap 4 Formularlayouts

Bootstrap bietet zwei Arten von Formularlayouts:

Bootstrap 4 Stacked (gestapeltes/vertikale Anordnung) Formular

Im folgenden Beispiel wird ein gestapeltes Formular mit zwei Eingabefeldern, einem Kontrollkästchen und einer Übergabeschaltfläche erstellt.
Fügen Sie .form-group um jedes Formularsteuerelement hinzu, um korrekte Ränder sicherzustellen:

Beispiel

<form action="/action_page.php">
   <div class="form-group">
      <label for="email">Email Adresse:</label>
      <input type="email" class="form-control" id="email">
   </div>
   <div class="form-group">
       <label for="pwd">Passwort:</label>
       <input type="password" class="form-control" id="pwd">
   </div>
   <div class="form-group form-check">
      <label class="form-check-label">
         <input class="form-check-input" type="checkbox"> Anmeldedaten speichen
      </label>
   </div>
   <button type="submit" class="btn btn-primary">Senden</button>
</form>

Bootstrap Inline Formular (horizontale Anordnung

In einem Inline-Formular sind alle Elemente inline und linksbündig.

Hinweis: Dies gilt nur für Formulare in Ansichtsfenstern, die mindestens 576 Pixel breit sind. Auf Bildschirmen, die kleiner als 576 Pixel sind, wird es horizontal gestapelt.

Regel für ein Inline-Formular: Fügen Sie dem Element <form> die Klasse .form-inline hinzu

Im folgenden Beispiel wird ein Inline-Formular mit zwei Eingabefeldern, einem Kontrollkästchen und einer Übergabeschaltfläche erstellt:

Beispiel:

 <form class="form-inline" action="/action_page.php">
  <label for="email">Email Addresse:</label>
  <input type="email" class="form-control" id="email">
  <label for="pwd">Passwort:</label>
  <input type="password" class="form-control" id="pwd">
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Anmeldedaten speichen
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form> 

Inline Formular Styling

Das obige Inline-Formular sieht nicht wirklich gut aus und wird mit den Bootstrap-Klassen für Abstände viel besser aussehen.
Im folgenden Beispiel wird jedem Eingang auf allen Geräten (klein und hoch) ein rechter Rand (.mr-sm-2) hinzugefügt. Und eine Margin-Bottom-Klasse (.mb-2) wird verwendet, um das Eingabefeld zu formatieren, wenn es bricht (geht von horizontal zu vertikal, weil nicht genug Platz / Breite zur Verfügung steht):