Bootstrap 5: Formulario de etiquetas flotantes - Etiquetas animadas

Tabla de contenido

    Mostrar tabla de contenidos

Etiquetas flotantes/Etiquetas animadas

De forma predeterminada, cuando se utilizan etiquetas, normalmente aparecen en la parte superior del campo de entrada:

With floating labels, you can insert the label inside the input field, and make them float/animate when you click on the input field:

Ejemplo

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="Enter 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="Enter password" name="pswd">
  <label for="pwd">Password</label>
</div>

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Floating Labels - Inputs</h2>
  <p>Click inside the input field to see the floating label effect:</p>
  <form action="/action_page.php">
    <div class="form-floating mb-3 mt-3">
      <input type="text" class="form-control" id="email" placeholder="Enter 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="Enter password" name="pswd">
      <label for="pwd">Password</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

</body>
</html>

Notas sobre las etiquetas flotantes: Los elementos

área de texto

También funciona para áreas de texto:

Ejemplo

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Comment goes here"></textarea>
  <label for="comment">Comments</label>
</div>

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Floating Labels - Textarea</h2>
  <p>Click inside the textarea to see the floating label effect:</p>
  <form action="/action_page.php">
    <div class="form-floating mb-3 mt-3">
      &lt;textarea class="form-control" id="comment" name="text" placeholder="Comment goes here">&lt;/textarea>
      <label for="comment">Comments</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

</body>
</html>

Seleccionar menús

También puede utilizar "etiquetas flotantes" en menús seleccionados. Sin embargo, no flotarán ni se animarán. La etiqueta siempre aparecerá en la esquina superior izquierda, dentro 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">Select list (select one):</label>
</div>

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Floating Labels - Select</h2>
  <p>You can also use "floating-labels" on select menus. However, they will not float/get animated. The label will always appear in the top left corner, inside the select menu:</p>
  <form action="/action_page.php">
    <div class="form-floating mb-3 mt-3">
      <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">Select list (select one):</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

</body>
</html>