etykiety pływające formularzy Bootstrap 5

Etykiety pływające/etykiety animowane

Domyślnie, przy użyciu etykiet (label), zwykle pojawiają się one na górze pola wejściowego:

Dzięki użyciu etykiet pływających, możesz wstawić etykietę do pola wejściowego i animować ją po kliknięciu w pole wejściowe:

Przykład

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="Proszę wprowadzić adres e-mail" 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="Wprowadź hasło" name="pswd">
  <label for="pwd">Hasło</label>
</div>

Spróbuj sam

Uwagi dotyczące etykiet pływających:

Element <label> musi występować po elemencie <input>, a każdy element <input> musi mieć placeholder Atrybuty (nawet jeśli nie są wyświetlane).

Textarea

Również dotyczy to pola tekstowego:

Przykład

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

Spróbuj sam

Menu wyboru

Możesz również używać "etykiet pływających" w menu wyboru. Jednak one nie będą płynąć/animować. Etykiety będą zawsze pojawiać się w lewym górnym rogu menu wyboru:

Przykład

<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">Wybierz listę (wybierz jedno):</label>
</div>

Spróbuj sam