Bootstrap 5 Formulier Drijvende Label

Zwevende labels/animatielabels

Standaard verschijnen labels (label) meestal boven het invoerveld:

Door het gebruik van float labels, kunt u labels invoegen in invoervelden en ze laten zweven/animeren wanneer u op het invoerveld klikt:

Voorbeeld

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="Vul uw e-mailadres in" 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="Voer wachtwoord in" name="pswd">
  <label for="pwd">Wachtwoord</label>
</div>

Probeer het zelf

Opmerkingen over draaiende labels:

Het <label>-element moet achter het <input>-element komen en elk <input>-element heeft placeholder Eigenschappen (zelfs als ze niet worden weergegeven).

Textarea

Ook van toepassing op tekstvelden:

Voorbeeld

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

Probeer het zelf

Selectiemenu

U kunt ook "draaiende labels" gebruiken in het selectiemenu. Ze zullen echter niet drijven/animeren. De labels zullen altijd in de linkerbovenhoek van het selectiemenu verschijnen:

Voorbeeld

<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">Selecteer lijst (maak een keuze):</label>
</div>

Probeer het zelf