Bootstrap 5 formularflydende etiketter

Flydende etiketter/Animerede etiketter

Som standard vises etiketter (label) normalt øverst på inputfeltet:

Ved at bruge flydende etiketter kan du indsætte etiketter i inputfeltet og lade dem flyde/animere, når inputfeltet klikkes på:

Eksempel

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="Indtast e-mail-adresse" 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="Indtast adgangskode" name="pswd">
  <label for="pwd">Adgangskode</label>
</div>

Prøv det selv

Bemærkninger om flydende etiketter:

<label>Elementet skal være efter <input>-elementet, og hvert <input>-element skal have placeholder Egenskaber (selvom de ikke vises).

Textarea

Gælder også for tekstfelter:

Eksempel

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Kommentar skal her"></textarea>
  <label for="comment">Kommentar</label>
</div>

Prøv det selv

Valgmenu

Du kan også bruge 'flydende etiketter' i valgmenuen. De vil dog ikke flyde/animere. Etiketterne vil altid være placeret øverst til venstre i valgmenuen:

Eksempel

<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">Vælg liste (vælg et element):</label>
</div>

Prøv det selv