Tema 17 · Controles de Formulario

Controles de Entrada (Form Controls)

Aprende a estilizar campos de entrada con .form-control, asociar etiquetas accesibles con .form-label, añadir textos de ayuda con .form-text, modificar tamaños y gestionar campos deshabilitados.

Barras de Navegación Profesionales (Navbar) Menús Select, Casillas, Radios y Switches

La Clase Esencial .form-control

La clase .form-control normaliza campos de texto, contraseñas, correos electrónicos, áreas de texto (<textarea>) y selectores de fecha en Bootstrap 5, aplicando bordes suaves, desenfoque de foco azul accesible y 100% de anchura. 

<div class="mb-3">
  <label for="emailInput" class="form-label">Correo Electrónico</label>
  <input type="email" class="form-control" id="emailInput" placeholder="[email protected]">
  <div class="form-text">Nunca compartiremos tu correo con terceros.</div>
</div>

Variantes de Tamaño y Estados de Campo

  • Grande: .form-control-lg (mayor altura de campo y fuente destacada).
  • Pequeño: .form-control-sm (ideal para barras de filtro o tablas).
  • Deshabilitado (disabled): Atenúa el fondo y bloquea clics o focus.
  • Solo Lectura (readonly): Permite seleccionar y copiar el valor pero impide la edición directa.
  • Selector de Color: Agrega .form-control-color en inputs de tipo color.

⚡ Formulario de Registro de Usuario con Bootstrap 5

Observa cómo form-label, form-control, form-text y los diferentes tamaños estructuran un formulario limpio y moderno:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Formularios en Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 580px;">
    <div class="card shadow-sm border-0 rounded-4 p-4 bg-white">
      <h4 class="fw-bold text-dark mb-3">Registro de Nuevo Estudiante</h4>

      <form onsubmit="event.preventDefault(); alert('¡Datos recibidos correctamente!');">
        <!-- Campo de Nombre -->
        <div class="mb-3">
          <label for="nombreCompleto" class="form-label fw-semibold">Nombre Completo</label>
          <input type="text" class="form-control" id="nombreCompleto" name="nombreCompleto" placeholder="Ej. Juan Martínez" required>
        </div>

        <!-- Campo de Email con texto de ayuda -->
        <div class="mb-3">
          <label for="correoUsuario" class="form-label fw-semibold">Correo Institucional</label>
          <input type="email" class="form-control" id="correoUsuario" name="correoUsuario" placeholder="[email protected]" required>
          <div class="form-text text-muted">Recibirás las credenciales de acceso en esta dirección.</div>
        </div>

        <!-- Campo Deshabilitado de Rol -->
        <div class="mb-3">
          <label for="rolFijo" class="form-label fw-semibold">Rol Asignado</label>
          <input type="text" class="form-control" id="rolFijo" name="rolFijo" value="Estudiante Fullstack" disabled>
        </div>

        <!-- Área de texto para comentarios -->
        <div class="mb-4">
          <label for="biografia" class="form-label fw-semibold">Objetivos de Aprendizaje</label>
          <textarea class="form-control" id="biografia" name="biografia" rows="3" placeholder="Describe brevemente tus expectativas en el campus..."></textarea>
        </div>

        <button type="submit" class="btn btn-primary w-100 py-2 rounded-pill fw-semibold shadow-sm">
          Completar Registro &raquo;
        </button>
      </form>
    </div>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de Bootstrap 5.3 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.