En este artículo vamos a ver cómo podemos agrupar inputs de formularios utilizando Bootstrap 5. Aprenderemos a combinar diferentes tipos de inputs, textos y botones en un solo grupo para crear formularios más compactos y estilizados.
Introducción
Bootstrap 5 facilita la agrupación de elementos de formulario mediante clases específicas. Vamos a explorar estas clases y cómo utilizarlas para mejorar nuestros formularios.
Estructura Básica
Para empezar, creamos la estructura básica en HTML utilizando Visual Studio Code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agrupando Inputs con Bootstrap 5</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.0-beta3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
</body>
</html>Implementación en Visual Studio Code
Crear un Archivo HTML: Crea un archivo HTML en Visual Studio Code y pega el ejemplo anterior.
Ver en el Navegador: Usa la extensión "Live Server" en Visual Studio Code para abrir el archivo HTML en el navegador y ver los cambios en tiempo real.
Agrupando Inputs con Textos
Para agrupar un input con un texto, usamos la clase input-group en un div que envuelve al input y al texto.
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>Cambiar Tamaños de Inputs
Podemos cambiar el tamaño de los inputs utilizando las clases input-group-lg y input-group-sm.
<div class="input-group input-group-lg mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Large input">
</div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Small input">
</div>Agregar Botones a los Inputs
Podemos agregar botones a los inputs para crear formularios más interactivos.
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>Usar Dropdowns con Inputs
También podemos combinar inputs con botones de dropdown para opciones adicionales.
<div class="input-group mb-3">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
<input type="text" class="form-control" placeholder="Text input with dropdown">
</div>Combinando Inputs y Botones
Podemos combinar múltiples inputs y botones dentro de un solo grupo.
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">Button</button>
<input type="text" class="form-control" placeholder="Text input with button">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>Ejemplo Completo
Aquí tienes un ejemplo completo que incluye varios tipos de inputs agrupados con textos, botones y dropdowns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agrupando Inputs con Bootstrap 5</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.0-beta3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group input-group-lg mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Large input">
</div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Small input">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
<input type="text" class="form-control" placeholder="Text input with dropdown">
</div>
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">Button</button>
<input type="text" class="form-control" placeholder="Text input with button">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.0-beta3/js/bootstrap.min.js"></script>
</body>
</html>Conclusión
Bootstrap 5 facilita la agrupación de elementos de formulario para crear interfaces de usuario más limpias y funcionales. Siguiendo estos pasos, puedes mejorar significativamente la apariencia y la usabilidad de tus formularios.
