Bootstrap 5 Etichetta Fluttuante del Modulo

Etichetta fluttuante/etichetta animata

Per impostazione predefinita, quando si utilizza l'etichetta (label), di solito appaiono in alto nel campo di input:

Utilizzando il etichetta fluttuante, puoi inserire un'etichetta all'interno del campo di input e farla fluttuare/animare quando si clicca sul campo di input:

Esempio

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="Inserisci l'indirizzo email" name="email">
  <label for="email">Email</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="Inserisci la password" name="pswd">
  <label for="pwd">Password</label>
</div>

Prova personalmente

Considerazioni riguardanti i tag fluttuanti:

L'elemento <label> deve essere dopo l'elemento <input>, e ogni elemento <input> deve avere placeholder Proprietà (anche se non visualizzate).

Textarea

Anche per i campi di testo:

Esempio

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Commento va qui"></textarea>
  <label for="comment">Commento</label>
</div>

Prova personalmente

Menu di selezione

Puoi anche utilizzare il "tag fluttuante" nella selezione del menu. Tuttavia, non fluttueranno/animarsi. Il tag apparirà sempre nell'angolo superiore sinistro del menu di selezione:

Esempio

<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">Seleziona l'elenco (seleziona un'opzione):</label>
</div>

Prova personalmente