Bootstrap 5 lomakkeen liikkuvat etiketit

Liukuvat merkinnät/animoidut merkinnät

Oletusarvoisesti, kun käytetään merkintää (label), ne näkyvät yleensä syöttökentän yläpuolella:

Käyttämällä liukuvaa merkintää voit lisätä merkinnän syöttökenttään ja tehdä siitä liukuvan/animoidun klikataessa syöttökenttää:

Esimerkki

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="Anna sähköpostiosoite" name="email">
  <label for="email">Sähköposti</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="Syötä salasana" name="pswd">
  <label for="pwd">Salasana</label>
</div>

Kokeile itse

Huomioitavaa liukuvista merkinnöistä:

<label> Elementin täytyy olla <input> elementin jälkeen, ja jokaisella <input> elementillä täytyy placeholder Atribuutit (vaikka ne eivät näy).

Tekstikenttä

Soveltuu myös tekstikenttiin:

Esimerkki

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Kommentti tähän"></textarea>
  <label for="comment">Kommentti</label>
</div>

Kokeile itse

Valitsin

Voit käyttää myös "liukuvaa merkintää" valitsimessa. Ne eivät kuitenkaan liu'uta/animoidu. Merkintä näkyy aina valitsimen ylävasemmassa kulmassa:

Esimerkki

<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">Valitse lista (valitse yksi kohta):</label>
</div>

Kokeile itse