Bootstrap 5formulärflyttlänkar

Flytande etiketter/Animerade etiketter

Som standard visas etiketter (label) vanligtvis ovanpå inmatningsfältet:

Genom att använda flytande etiketter kan du lägga till etiketter inom inmatningsfält och animera dem när du klickar på inmatningsfältet:

Exempel

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="Vänligen ange e-postadress" name="email">
  <label for="email">E-post</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="Ange lösenord" name="pswd">
  <label for="pwd">Lösenord</label>
</div>

Prova själv

Viktiga punkter om flytande etiketter:

<label>Elementet måste komma efter <input>-elementet, och varje <input>-element behöver placeholder Egenskaper (även om de inte visas).

Textarea

Gäller också för textfält:

Exempel

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

Prova själv

Väljmeny

Du kan också använda "flytande etiketter" i väljmenyn. Men de kommer inte att flyta/animationera. Etiketterna kommer alltid att visas i övre vänstra hörnet av väljmenyn:

Exempel

<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älj en lista (välj ett alternativ):</label>
</div>

Prova själv