Los formularios son elementos esenciales en cualquier sitio web interactivo. Bootstrap 5 proporciona un conjunto robusto de herramientas para crear formularios modernos, responsivos y accesibles con estilos predeterminados y validaciones. A continuación, exploramos los aspectos clave de los formularios en Bootstrap, desde su estructura básica hasta los controles avanzados y la validación.
Ver índice del contenido
1. Estructura Básica de Formularios
Un formulario en Bootstrap se organiza utilizando la clase .form-control para los campos y .form-group para agrupar etiquetas e inputs. La estructura básica es la siguiente:
Formulario Simple
<form>
<div class="mb-3">
<label for="email" class="form-label">Correo electrónico</label>
<input type="email" class="form-control" id="email" placeholder="nombre@ejemplo.com">
</div>
<div class="mb-3">
<label for="password" class="form-label">Contraseña</label>
<input type="password" class="form-control" id="password" placeholder="Contraseña">
</div>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>Formulario Horizontal
Para formularios más compactos, utiliza filas con .row y columnas con .col-* para alinear campos y etiquetas.
<form>
<div class="row mb-3">
<label for="name" class="col-sm-2 col-form-label">Nombre</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="Juan Pérez">
</div>
</div>
<div class="row mb-3">
<label for="email" class="col-sm-2 col-form-label">Correo</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="nombre@ejemplo.com">
</div>
</div>
<button type="submit" class="btn btn-success">Guardar</button>
</form>Formulario Inline
Ideal para formularios cortos, se utilizan las clases .form-inline y .form-control.
<form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Buscar" aria-label="Buscar"> <button class="btn btn-outline-success" type="submit">Buscar</button> </form>
2. Campos de Entrada y Controles Avanzados
Campos de Entrada Comunes
Bootstrap soporta una amplia gama de tipos de entradas: texto, correo, contraseña, fecha, entre otros. Cada uno se estiliza automáticamente con .form-control.
<form>
<div class="mb-3">
<label for="number" class="form-label">Número</label>
<input type="number" class="form-control" id="number" placeholder="12345">
</div>
<div class="mb-3">
<label for="date" class="form-label">Fecha</label>
<input type="date" class="form-control" id="date">
</div>
</form>Checkboxes y Radios
Los checkboxes y radios tienen su propio estilo mediante las clases .form-check y .form-check-input.
Checkboxes
<div class="form-check"> <input class="form-check-input" type="checkbox" id="exampleCheck"> <label class="form-check-label" for="exampleCheck">Acepto los términos y condiciones</label> </div>
Radios
<div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="radio1" value="opcion1"> <label class="form-check-label" for="radio1">Opción 1</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="radio2" value="opcion2"> <label class="form-check-label" for="radio2">Opción 2</label> </div>
Selects (Listas Desplegables)
Los campos select también se estilizan con .form-select.
<div class="mb-3">
<label for="exampleSelect" class="form-label">Seleccione una opción</label>
<select class="form-select" id="exampleSelect">
<option selected>Opción 1</option>
<option>Opción 2</option>
<option>Opción 3</option>
</select>
</div>Grupos de Entradas
Puedes agrupar entradas con .input-group para añadir elementos como iconos o botones.
<div class="input-group mb-3"> <span class="input-group-text">@</span> <input type="text" class="form-control" placeholder="Usuario"> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="Buscar"> <button class="btn btn-outline-secondary" type="button">Ir</button> </div>
3. Validación de Formularios
Bootstrap proporciona herramientas de validación integradas para mostrar errores o estados de validación visuales.
Validación con Clases
Usa las clases .is-valid y .is-invalid para marcar campos correctos o incorrectos.
<form>
<div class="mb-3">
<label for="validInput" class="form-label">Nombre</label>
<input type="text" class="form-control is-valid" id="validInput" value="Juan">
<div class="valid-feedback">¡Todo se ve bien!</div>
</div>
<div class="mb-3">
<label for="invalidInput" class="form-label">Correo</label>
<input type="email" class="form-control is-invalid" id="invalidInput">
<div class="invalid-feedback">Por favor, ingrese un correo válido.</div>
</div>
</form>Validación Nativa de HTML5
Bootstrap utiliza las capacidades de validación de HTML5 y las mejora visualmente.
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="username" class="form-label">Usuario</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-feedback">Este campo es obligatorio.</div>
</div>
<button class="btn btn-primary" type="submit">Enviar</button>
</form>Desactivando el Comportamiento por Defecto
Para prevenir el envío del formulario cuando hay errores:
(() => {
'use strict';
const forms = document.querySelectorAll('.needs-validation');
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
})();Conclusión
Los formularios en Bootstrap 5 permiten crear experiencias de usuario funcionales y atractivas con poco esfuerzo. Al combinar las herramientas básicas con controles avanzados y validación, puedes diseñar formularios que se adapten a cualquier contexto y proyecto. Practicar y personalizar estas herramientas es esencial para dominar su uso.