Formularios en Bootstrap 5 y sus nuevas características

Bootstrap 5 introdujo cambios significativos en los formularios, enfocándose en la simplificidad y la eliminación de jQuery.

Clases utiles

Clase	Función
form-control	Estiliza inputs y textareas
form-label	Estilo para etiquetas
mb-3	Espaciado entre elementos
btn	Estilo para botones

<form class="p-2">
  <div class="mb-3">
    <label for="email" class="form-label">Correo electrónico</label>
    <input type="email" class="form-control" id="email">
  </div>

  <div class="mb-3">
    <label for="password" class="form-label">Contraseña</label>
    <input type="password" class="form-control" id="password">
  </div>

  <button type="submit" class="btn btn-primary">
    Iniciar sesión
  </button>
</form>

Input Groups

Los input groups permiten añadir iconos o texto antes o después de un input.

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="usuario">
</div>

También se pueden usar para monedas:

<div class="input-group">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control">
</div>

Validación de formularios

Además, bootstrap incluye estilos para validar campos del formulario:

<input type="text" class="form-control is-valid mb-2">
<input type="text" class="form-control is-invalid">

También se pueden mostrar mensajes:

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="nombre" class="form-label">Nombre</label>
    <input type="text" class="form-control is-invalid" id="nombre" required>

    <div class="invalid-feedback">
      Este campo es obligatorio
    </div>
  </div>
</form>

Formularios en linea (Grid)

Con el sistema de grilla de bootstrap, puedes organizar los campos del formulario en columnas:

<div class="row">
  <div class="col-6">
    <label class="form-label">Nombre</label>
    <input type="text" class="form-control">
  </div>

  <div class="col-6">
    <label class="form-label">Apellido</label>
    <input type="text" class="form-control">
  </div>
</div>