Tabla de contenido
- Estructura básica de un formulario Bootstrap
- Tipos de inputs
- Formulario de login completo
- Formulario de registro
- Validación visual de formularios
- Formularios en línea
Los formularios son parte esencial de cualquier aplicación web: login, registro, contacto, búsqueda… Bootstrap 5 incluye un sistema de estilos para formularios muy completo que hace que todo se vea profesional con muy poco esfuerzo.
Estructura básica de un formulario Bootstrap
En Bootstrap, la estructura recomendada para un campo de formulario es:
<div class="mb-3">
<label for="nombreCampo" class="form-label">Etiqueta</label>
<input type="text" class="form-control" id="nombreCampo" placeholder="Escribe aquí">
</div>Las clases clave son:
mb-3: agrega margen inferior para separar los camposform-label: estiliza la etiqueta del campoform-control: estiliza el input con bordes, padding y foco suave
Tipos de inputs
Bootstrap da estilo a todos los tipos de input con form-control:
<!-- Texto -->
<input type="text" class="form-control" placeholder="Tu nombre">
<!-- Email -->
<input type="email" class="form-control" placeholder="correo@ejemplo.com">
<!-- Contraseña -->
<input type="password" class="form-control" placeholder="Contraseña">
<!-- Número -->
<input type="number" class="form-control" min="1" max="100">
<!-- Textarea -->
<textarea class="form-control" rows="4" placeholder="Tu mensaje..."></textarea>
<!-- Select -->
<select class="form-select">
<option selected>Selecciona una opción</option>
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
</select>
<!-- Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="acepto">
<label class="form-check-label" for="acepto">
Acepto los términos y condiciones
</label>
</div>
<!-- Radio buttons -->
<div class="form-check">
<input class="form-check-input" type="radio" name="genero" id="masculino">
<label class="form-check-label" for="masculino">Masculino</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genero" id="femenino">
<label class="form-check-label" for="femenino">Femenino</label>
</div>Formulario de login completo
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-12 col-sm-8 col-md-6 col-lg-4">
<div class="card shadow">
<div class="card-body p-4">
<h2 class="text-center mb-4">Iniciar sesión</h2>
<form action="/login" method="POST">
<div class="mb-3">
<label for="email" class="form-label">Correo electrónico</label>
<input
type="email"
class="form-control"
id="email"
name="email"
placeholder="tu@correo.com"
required
>
</div>
<div class="mb-3">
<label for="password" class="form-label">Contraseña</label>
<input
type="password"
class="form-control"
id="password"
name="password"
required
>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="remember">
<label class="form-check-label" for="remember">
Recordarme
</label>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">Entrar</button>
</div>
</form>
<hr>
<p class="text-center mb-0">
¿No tienes cuenta?
<a href="/registro">Regístrate</a>
</p>
</div>
</div>
</div>
</div>
</div>Formulario de registro
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6">
<div class="card shadow">
<div class="card-body p-4">
<h2 class="text-center mb-4">Crear cuenta</h2>
<form action="/registro" method="POST">
<!-- Nombre en dos columnas -->
<div class="row mb-3">
<div class="col">
<label for="nombre" class="form-label">Nombre</label>
<input type="text" class="form-control" id="nombre" name="nombre" required>
</div>
<div class="col">
<label for="apellido" class="form-label">Apellido</label>
<input type="text" class="form-control" id="apellido" name="apellido" required>
</div>
</div>
<div class="mb-3">
<label for="regEmail" class="form-label">Correo electrónico</label>
<input type="email" class="form-control" id="regEmail" name="email" required>
</div>
<div class="mb-3">
<label for="regPassword" class="form-label">Contraseña</label>
<input type="password" class="form-control" id="regPassword" name="password" required>
<div class="form-text">Mínimo 8 caracteres.</div>
</div>
<div class="mb-3">
<label for="confirmar" class="form-label">Confirmar contraseña</label>
<input type="password" class="form-control" id="confirmar" name="confirmar" required>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="terminos" required>
<label class="form-check-label" for="terminos">
Acepto los <a href="/terminos">términos y condiciones</a>
</label>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-success btn-lg">Crear cuenta</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>Validación visual de formularios
Bootstrap incluye clases para mostrar estados de validación. Para activarlas, añade was-validated al formulario:
<form class="was-validated">
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" required>
<div class="valid-feedback">¡Se ve bien!</div>
<div class="invalid-feedback">Por favor ingresa un email válido.</div>
</div>
</form>También puedes aplicar las clases is-valid e is-invalid directamente con JavaScript:
const input = document.querySelector('#email');
if (input.value.includes('@')) {
input.classList.add('is-valid');
input.classList.remove('is-invalid');
} else {
input.classList.add('is-invalid');
input.classList.remove('is-valid');
}Formularios en línea
Para formularios pequeños (como una barra de búsqueda) puedes usar el layout en línea:
<form class="d-flex gap-2">
<input type="search" class="form-control" placeholder="Buscar...">
<button type="submit" class="btn btn-primary">Buscar</button>
</form>Los formularios son una de las partes del diseño web donde Bootstrap brilla más, porque transforma inputs aburridos del navegador en elementos consistentes y modernos con muy pocas líneas de código.
