En este artículo, vamos a hacer una introducción a los formularios en Bootstrap 5. Exploraremos las características básicas y las funcionalidades que Bootstrap ofrece para crear formularios estilizados y responsivos.
Introducción
Bootstrap 5 proporciona una serie de clases y componentes para crear formularios de manera fácil y efectiva. Vamos a explorar las opciones más importantes y cómo implementarlas en tus proyectos.
Estructura Básica de un Formulario
Primero, creamos un formulario básico en HTML.
<form>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>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.
Formularios Responsivos
Bootstrap permite hacer formularios responsivos con facilidad. Aquí tienes un ejemplo de un formulario con inputs que se ajustan al tamaño del contenedor:
<form>
<div class="row mb-3">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>Tamaño de los Inputs
Puedes ajustar el tamaño de los inputs utilizando las clases form-control-lg y form-control-sm.
<input type="text" class="form-control form-control-lg" placeholder="Large input">
<input type="text" class="form-control form-control-sm" placeholder="Small input">Inputs y Textareas
Bootstrap estiliza automáticamente inputs y textareas. Aquí tienes un ejemplo:
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleTextarea" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>Inputs Deshabilitados y Solo Lectura
Puedes deshabilitar inputs o hacerlos solo de lectura con las clases disabled y readonly.
<input type="text" class="form-control" placeholder="Disabled input" disabled>
<input type="text" class="form-control" placeholder="Readonly input" readonly>Selects y Multi-selects
Bootstrap también estiliza selects y multi-selects.
<select class="form-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select multiple class="form-select">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>Checkboxes y Radios
Bootstrap estiliza los checkboxes y radios para que se vean consistentes.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>Switches
Bootstrap 5 introduce switches, que son estilizados como interruptores.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>Inputs de Rango
Para los inputs de tipo rango, Bootstrap proporciona un estilo consistente.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">Grupos de Inputs
Bootstrap permite agrupar inputs y otros elementos con la clase input-group.
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>Formularios con Validación
Bootstrap proporciona clases para manejar la validación de formularios. Aquí tienes un ejemplo:
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="mb-3">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>Conclusión
Bootstrap 5 ofrece una amplia gama de herramientas para manejar y estilizar formularios de manera efectiva. Desde inputs básicos hasta validaciones avanzadas, Bootstrap simplifica muchas tareas comunes en el diseño de formularios.
