Bootstrap 5-Flottierende Formularbeschriftung

Schwebelabels/Animatelabels

Standardmäßig erscheinen Beschriftungen (label) normalerweise oben im Eingabefeld:

Durch die Verwendung von Schwebelabels können Sie Beschriftungen in Eingabefelder einfügen und diese beim Klicken auf das Eingabefeld schweben/animieren:

Beispiel

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="Bitte geben Sie die E-Mail-Adresse ein" name="email">
  <label for="email">E-Mail</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="Bitte geben Sie das Passwort ein" name="pswd">
  <label for="pwd">Passwort</label>
</div>

Versuchen Sie es selbst

Hinweise zur Verwendung von Schwebelabels:

Das <label>-Element muss nach dem <input>-Element stehen und jedes <input>-Element muss placeholder Eigenschaften (sogar wenn nicht angezeigt).

Textarea

Gilt auch für Textfelder:

Beispiel

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Kommentar hier einfügen"></textarea>
  <label for="comment">Kommentar</label>
</div>

Versuchen Sie es selbst

Auswahlmenü

Sie können auch "Schwebelabel" im Auswahlmenü verwenden. Sie werden jedoch nicht schweben/animiert. Das Label wird immer im linken oberen Ecke des Auswahlmenüs angezeigt:

Beispiel

<div class="form-floating">
  <select class="form-select" id="sel1" name="sellist">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <label for="sel1" class="form-label">Wählliste (Wählen Sie eine Option):</label>
</div>

Versuchen Sie es selbst