Etiqueta flotante de formulario Bootstrap 5

Etiquetas flotantes/animadas

Por defecto, al usar etiquetas (label), generalmente aparecen en la parte superior del campo de entrada:

Al usar etiquetas flotantes, puede insertar etiquetas dentro de los campos de entrada y hacer que floten/animen al hacer clic en el campo de entrada:

Ejemplo

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="Por favor, ingrese la dirección de correo electrónico" name="email">
  <label for="email">Correo electrónico</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="Ingrese la contraseña" name="pswd">
  <label for="pwd">Contraseña</label>
</div>

Pruebe usted mismo

Consideraciones sobre las etiquetas flotantes:

El elemento <label> debe estar después del elemento <input>, y cada elemento <input> necesita placeholder Atributos (incluso si no se muestran).

Textarea

También se aplica a los campos de texto:

Ejemplo

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Agregue aquí un comentario"></textarea>
  <label for="comment">Comentario</label>
</div>

Pruebe usted mismo

Menú de selección

También puede usar "etiquetas flotantes" en el menú de selección. Sin embargo, no se flotarán/animarán. Las etiquetas siempre aparecerán en la esquina superior izquierda del menú de selección:

Ejemplo

<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">Seleccione una lista (seleccione una opción):</label>
</div>

Pruebe usted mismo