Bootstrap
Tutorial Bootstrap: Formularios y validación
Bootstrap CSS 5.3 formularios y validación: aprende a diseñar, estilizar y validar formularios responsivos utilizando las clases de Bootstrap. Mejora la experiencia del usuario.
Clases de formulario para inputs en Bootstrap
Bootstrap ofrece una variedad de clases para estilizar inputs en formularios, facilitando la creación de interfaces de usuario consistentes y adaptativas. A continuación se describen las principales clases y sus usos.
Clase .form-control
La clase .form-control
es esencial para dar estilo a los elementos de entrada de texto (<input>
), áreas de texto (<textarea>
) y selectores (<select>
). Esta clase aplica estilos consistentes y proporciona una apariencia uniforme a los campos de formulario.
<input type="text" class="form-control" placeholder="Nombre">
Tamaños de input
Bootstrap permite ajustar el tamaño de los inputs mediante las clases .form-control-sm
y .form-control-lg
para inputs pequeños y grandes, respectivamente.
<input type="text" class="form-control form-control-sm m-2" placeholder="Nombre pequeño">
<input type="text" class="form-control form-control-lg m-2" placeholder="Nombre grande">
Campo deshabilitado
Para deshabilitar un campo de entrada, se puede utilizar el atributo disabled
. Bootstrap estiliza automáticamente estos campos para indicar que no están disponibles para la interacción del usuario.
<input type="text" class="form-control" placeholder="Nombre" disabled>
Campo de solo lectura
Los campos de solo lectura se pueden crear añadiendo el atributo readonly
. Estos campos pueden ser seleccionados y copiados, pero no modificados.
<input type="text" class="form-control" placeholder="Nombre" readonly>
Input con validación
Bootstrap proporciona clases para mostrar la validación de los inputs. Las clases .is-valid
y .is-invalid
se utilizan para indicar el estado de validación de un campo.
<input type="text" class="form-control is-valid m-2" placeholder="Nombre válido">
<input type="text" class="form-control is-invalid m-2" placeholder="Nombre inválido">
Input con iconos
Para añadir iconos a los inputs, se pueden utilizar las clases de utilidades de Bootstrap junto con librerías de iconos como FontAwesome. Los iconos se suelen colocar dentro de un contenedor input-group
.
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Nombre de usuario">
</div>
Input de tipo file
Para los inputs de tipo archivo, Bootstrap ofrece la clase .form-control
junto con .form-control-file
para estilizar correctamente el elemento.
<input type="file" class="form-control">
Input de tipo color
Los inputs de tipo color también pueden ser estilizados con .form-control
, proporcionando una apariencia consistente con otros tipos de inputs.
<input type="color" class="form-control">
Input de tipo range
Para los inputs de tipo rango, la clase .form-range
se utiliza para estilizar los deslizadores.
<input type="range" class="form-range">
Estas clases y ejemplos proporcionan una base sólida para trabajar con inputs en formularios utilizando Bootstrap, asegurando que los formularios sean tanto funcionales como estéticamente agradables.
Clases de formulario para textarea en Bootstrap
Bootstrap proporciona diversas clases para estilizar áreas de texto (<textarea>
) en formularios, permitiendo que estas se integren de manera consistente y adaptativa en las interfaces de usuario. A continuación se detallan las principales clases y sus usos específicos.
Clase .form-control
La clase .form-control
es fundamental para dar estilo a las áreas de texto, aplicando estilos consistentes y una apariencia uniforme.
<textarea class="form-control" placeholder="Escribe aquí"></textarea>
Tamaños de textarea
Bootstrap permite ajustar el tamaño de las áreas de texto mediante las clases .form-control-sm
y .form-control-lg
para áreas de texto pequeñas y grandes, respectivamente.
<textarea class="form-control form-control-sm m-2" placeholder="Texto pequeño"></textarea>
<textarea class="form-control form-control-lg m-2" placeholder="Texto grande"></textarea>
Textarea deshabilitada
Para deshabilitar un área de texto, se utiliza el atributo disabled
. Bootstrap estiliza automáticamente estos campos para indicar que no están disponibles para la interacción del usuario.
<textarea class="form-control" placeholder="Texto deshabilitado" disabled></textarea>
Textarea de solo lectura
Las áreas de texto de solo lectura se crean añadiendo el atributo readonly
. Estas áreas pueden ser seleccionadas y copiadas, pero no modificadas.
<textarea class="form-control" placeholder="Texto de solo lectura" readonly></textarea>
Textarea con validación
Bootstrap ofrece clases para mostrar la validación de las áreas de texto. Las clases .is-valid
y .is-invalid
se utilizan para indicar el estado de validación del campo.
<textarea class="form-control is-valid m-2" placeholder="Texto válido"></textarea>
<textarea class="form-control is-invalid m-2" placeholder="Texto inválido"></textarea>
Textarea con filas y columnas personalizadas
Puedes ajustar el tamaño del área de texto especificando el número de filas y columnas utilizando los atributos rows
y cols
.
<textarea class="form-control" rows="3" cols="50" placeholder="Texto con tamaño personalizado"></textarea>
Textarea con redimensionamiento
De forma predeterminada, las áreas de texto en Bootstrap pueden redimensionarse. Sin embargo, puedes controlar esto utilizando las clases de utilidades CSS. Por ejemplo, para desactivar el redimensionamiento, puedes usar resize: none;
en CSS personalizado o una clase de utilidad.
<textarea class="form-control" style="resize: none;" placeholder="Texto sin redimensionar"></textarea>
Textarea con iconos
Aunque no es común, puedes añadir iconos a las áreas de texto utilizando contenedores input-group
, similar a los inputs de texto.
<div class="input-group">
<span class="input-group-text"><i class="bi bi-pencil"></i></span>
<textarea class="form-control" placeholder="Texto con icono"></textarea>
</div>
Estas clases y ejemplos proporcionan una base sólida para trabajar con áreas de texto en formularios utilizando Bootstrap, asegurando que los formularios sean tanto funcionales como estéticamente consistentes.
Clases de formulario para checks y radios en Bootstrap
Bootstrap proporciona diversas clases para estilizar los elementos de tipo checkbox y radio, facilitando la creación de formularios con un aspecto profesional y consistente.
Clase .form-check
La clase .form-check
se utiliza para envolver los elementos de tipo checkbox y radio, proporcionando un contenedor estilizado que incluye el input y la etiqueta correspondiente.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Checkbox por defecto
</label>
</div>
Clase .form-check-input
La clase .form-check-input
se aplica directamente al elemento input de tipo checkbox o radio, estilizando el propio input.
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
Clase .form-check-label
La clase .form-check-label
se aplica a la etiqueta (<label>
) asociada con el input de tipo checkbox o radio, asegurando que la etiqueta se alinee correctamente con el input.
<label class="form-check-label" for="flexCheckChecked">
Checkbox marcado
</label>
Checks y radios en línea
Para mostrar los elementos de tipo checkbox y radio en línea, se puede utilizar la clase .form-check-inline
. Esta clase se aplica al contenedor .form-check
.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
Checks y radios deshabilitados
Para deshabilitar un checkbox o radio, se utiliza el atributo disabled
en el input. Bootstrap estiliza automáticamente estos elementos para indicar su estado deshabilitado.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
Checkbox deshabilitado
</label>
</div>
Checks y radios con validación
Bootstrap proporciona clases para indicar el estado de validación de los checkboxes y radios. Las clases .is-valid
y .is-invalid
se utilizan para mostrar los estados de validación.
<div class="form-check">
<input class="form-check-input is-valid" type="checkbox" value="" id="validCheck">
<label class="form-check-label" for="validCheck">
Checkbox válido
</label>
</div>
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck">
<label class="form-check-label" for="invalidCheck">
Checkbox inválido
</label>
</div>
Checks y radios personalizados
Bootstrap también permite la creación de checkboxes y radios personalizados utilizando las clases .custom-control
, .custom-control-input
, y .custom-control-label
. Sin embargo, en la versión, se recomienda utilizar las clases estándar de .form-check
para mantener la consistencia y la simplicidad.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="customCheck1">
<label class="form-check-label" for="customCheck1">
Checkbox personalizado
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="customRadio" id="customRadio1" value="option1">
<label class="form-check-label" for="customRadio1">
Radio personalizado
</label>
</div>
Estas clases y ejemplos proporcionan una guía completa para trabajar con checkboxes y radios en formularios utilizando Bootstrap, asegurando una apariencia profesional y una funcionalidad consistente en tus proyectos.
Clases de formulario para selectores en Bootstrap
Bootstrap proporciona varias clases para estilizar los selectores (<select>
), asegurando que se integren de manera consistente y adaptativa en las interfaces de usuario. A continuación se detallan las principales clases y sus usos específicos.
Clase .form-select
La clase .form-select
es fundamental para dar estilo a los elementos selectores. Esta clase aplica estilos consistentes y una apariencia uniforme a los campos de selección.
<select class="form-select" aria-label="Default select example">
<option selected>Abre este menú</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
Tamaños de selectores
Bootstrap permite ajustar el tamaño de los selectores mediante las clases .form-select-sm
y .form-select-lg
para selectores pequeños y grandes, respectivamente.
<select class="form-select form-select-sm m-2" aria-label="Small select example">
<option selected>Abre este menú</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
<select class="form-select form-select-lg m-2" aria-label="Large select example">
<option selected>Abre este menú</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
Selectores deshabilitados
Para deshabilitar un selector, se utiliza el atributo disabled
. Bootstrap estiliza automáticamente estos campos para indicar que no están disponibles para la interacción del usuario.
<select class="form-select" aria-label="Disabled select example" disabled>
<option selected>Abre este menú</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
Selectores con validación
Bootstrap proporciona clases para mostrar la validación de los selectores. Las clases .is-valid
y .is-invalid
se utilizan para indicar el estado de validación de un campo.
<select class="form-select is-valid m-2" aria-label="Valid select example">
<option selected>Abre este menú</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
<select class="form-select is-invalid m-2" aria-label="Invalid select example">
<option selected>Abre este menú</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
Selectores con múltiples opciones
Para permitir la selección de múltiples opciones, se utiliza el atributo multiple
. Bootstrap estiliza estos selectores para que se diferencien visualmente de los selectores de una sola opción.
<select class="form-select" multiple aria-label="Multiple select example">
<option selected>Abre este menú</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
Selectores con iconos
Aunque no es común, puedes añadir iconos a los selectores utilizando contenedores input-group
, similar a los inputs de texto. Esto se logra colocando el selector dentro de un contenedor con un input-group-text
.
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01"><i class="bi bi-pencil"></i></label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Elige...</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
</div>
Estas clases y ejemplos proporcionan una base sólida para trabajar con selectores en formularios utilizando Bootstrap, asegurando que los formularios sean tanto funcionales como estéticamente agradables.
Etiquetas flotantes en formularios en Bootstrap
Las etiquetas flotantes en Bootstrap proporcionan una manera moderna y elegante de presentar etiquetas de campo de formulario que flotan sobre el input cuando el usuario interactúa con él. Este enfoque mejora la usabilidad y la estética de los formularios.
Para implementar etiquetas flotantes, se utiliza la clase .form-floating
en un contenedor que envuelve el campo de entrada y su etiqueta correspondiente. La etiqueta debe estar situada después del campo de entrada dentro del contenedor. A continuación, se presentan varios ejemplos y configuraciones.
Ejemplo básico de etiqueta flotante
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="nombre@ejemplo.com">
<label for="floatingInput">Dirección de correo electrónico</label>
</div>
En este ejemplo, el input de tipo email está envuelto en un div con la clase .form-floating
. La etiqueta asociada sigue al input y utiliza el atributo for
para referirse al id
del input.
Etiqueta flotante con textarea
Las etiquetas flotantes también se pueden utilizar con áreas de texto (<textarea>
). Es importante agregar la clase .form-control
al textarea para que funcione correctamente con la etiqueta flotante.
<div class="form-floating">
<textarea class="form-control" placeholder="Escribe tu mensaje aquí" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Mensaje</label>
</div>
Etiquetas flotantes con selectores
Para los elementos <select>
, también se pueden usar etiquetas flotantes. Es crucial que el selector tenga la clase .form-select
y que la etiqueta esté correctamente asociada.
<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Selecciona un país">
<option selected>Selecciona un país</option>
<option value="1">España</option>
<option value="2">Francia</option>
<option value="3">Alemania</option>
</select>
<label for="floatingSelect">País</label>
</div>
Campos de solo lectura y deshabilitados
Las etiquetas flotantes también pueden aplicarse a campos deshabilitados o de solo lectura. Bootstrap estiliza estos campos automáticamente para indicar su estado.
<div class="form-floating mb-3">
<input type="text" class="form-control" id="floatingInputDisabled" placeholder="Campo deshabilitado" disabled>
<label for="floatingInputDisabled">Campo deshabilitado</label>
</div>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInputReadonly" placeholder="Campo de solo lectura" readonly>
<label for="floatingInputReadonly">Campo de solo lectura</label>
</div>
Validación de formularios con etiquetas flotantes
Bootstrap proporciona clases para mostrar la validación de los campos con etiquetas flotantes. Las clases .is-valid
y .is-invalid
se utilizan para indicar el estado de validación.
<div class="form-floating mb-3">
<input type="text" class="form-control is-valid" id="floatingValidInput" placeholder="Campo válido">
<label for="floatingValidInput">Campo válido</label>
</div>
<div class="form-floating">
<input type="text" class="form-control is-invalid" id="floatingInvalidInput" placeholder="Campo inválido">
<label for="floatingInvalidInput">Campo inválido</label>
</div>
Estos ejemplos y configuraciones proporcionan una guía completa para implementar etiquetas flotantes en formularios utilizando Bootstrap, asegurando que los formularios sean tanto funcionales como estéticamente agradables y usables.
Clases de validación de formularios en Bootstrap
Bootstrap proporciona varias clases de validación que facilitan la presentación visual del estado de validación de los campos de formulario. Estas clases se aplican a los elementos del formulario para indicar si su valor es válido o inválido, mejorando la experiencia del usuario y proporcionando retroalimentación visual inmediata.
Clases de validación básicas
Las clases de validación más comunes son .is-valid
y .is-invalid
. Estas clases se aplican directamente a los elementos del formulario y cambian su apariencia para reflejar su estado de validación.
<input type="text" class="form-control is-valid m-2" placeholder="Campo válido">
<input type="text" class="form-control is-invalid m-2" placeholder="Campo inválido">
Feedback de validación
Para proporcionar mensajes de retroalimentación adicionales, se utilizan las clases .valid-feedback
y .invalid-feedback
. Estas clases se asocian con los elementos del formulario y se muestran cuando el campo es válido o inválido, respectivamente.
<div class="mb-3">
<input type="text" class="form-control is-valid" id="validInput" placeholder="Nombre">
<div class="valid-feedback">
¡Perfecto! El nombre es válido.
</div>
</div>
<div class="mb-3">
<input type="text" class="form-control is-invalid" id="invalidInput" placeholder="Nombre">
<div class="invalid-feedback">
Por favor, proporciona un nombre válido.
</div>
</div>
Validación de formularios personalizados
Bootstrap permite la validación personalizada mediante el uso de JavaScript y las clases de validación. Al utilizar el evento submit
, se puede prevenir el envío del formulario si no está validado y aplicar las clases correspondientes.
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="customInput" class="form-label">Nombre</label>
<input type="text" class="form-control" id="customInput" required>
<div class="invalid-feedback">
Por favor, proporciona un nombre válido.
</div>
</div>
<button class="btn btn-primary" type="submit">Enviar</button>
</form>
<script>
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>
Validación de selectores
Los elementos <select>
también pueden ser validados utilizando las mismas clases .is-valid
y .is-invalid
, junto con las clases de retroalimentación.
<div class="mb-3">
<label for="validationSelect" class="form-label">Selecciona una opción</label>
<select class="form-select is-invalid" id="validationSelect" required>
<option selected disabled value="">Selecciona...</option>
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
</select>
<div class="invalid-feedback">
Por favor, selecciona una opción válida.
</div>
</div>
Validación de textareas
Las áreas de texto (<textarea>
) también pueden ser validadas de manera similar a los inputs de texto, utilizando las clases .is-valid
y .is-invalid
.
<div class="mb-3">
<label for="validationTextarea" class="form-label">Mensaje</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Escribe tu mensaje aquí" required></textarea>
<div class="invalid-feedback">
Por favor, proporciona un mensaje válido.
</div>
</div>
Estas clases y técnicas de validación proporcionan una base robusta para asegurar que los formularios en Bootstrap sean tanto funcionales como visualmente intuitivos, mejorando significativamente la experiencia del usuario.
Ejercicios de esta lección Formularios y validación
Evalúa tus conocimientos de esta lección Formularios y validación con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Listado y formulario de productos en Bootstrap CSS
Utilidades de colores y fondo
Instalación de Bootstrap
Tipografía y fuentes en Bootstrap
Clases de utilidad
Flexbox en Bootstrap
Utilidades de espaciado y alineación
Conocimiento general de Bootstrap
Conocimiento general de Bootstrap
Fundamentos del sistema de grid de Bootstrap
Imágenes responsive en Bootstrap
Introducción a Bootstrap
Formularios y validación
Modales y ventanas emergentes
Navbars y menús de navegación en Bootstrap
Componentes de Bootstrap
Todas las lecciones de Bootstrap
Accede a todas las lecciones de Bootstrap y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Bootstrap Css
Introducción Y Entorno
Instalación De Bootstrap Css
Introducción Y Entorno
Tipografía Y Fuentes En Bootstrap
Fundamentos Y Layout
Imágenes Responsive En Bootstrap
Fundamentos Y Layout
Fundamentos Del Sistema De Grid De Bootstrap
Fundamentos Y Layout
Flexbox En Bootstrap
Fundamentos Y Layout
Componentes De Bootstrap
Componentes
Navbars Y Menús De Navegación En Bootstrap
Componentes
Formularios Y Validación
Componentes
Modales Y Ventanas Emergentes
Componentes
Clases De Utilidad
Utilidades Y Helpers
Utilidades De Espaciado Y Alineación
Utilidades Y Helpers
Utilidades De Colores Y Fondo
Utilidades Y Helpers
Conocimiento General De Bootstrap
Evaluación
Conocimiento General De Bootstrap
Evaluación
Certificados de superación de Bootstrap
Supera todos los ejercicios de programación del curso de Bootstrap y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Utilizar las clases de Bootstrap para diseñar e integrar formularios.
- Ajustar el tamaño de los inputs y textareas en formularios.
- Añadir validación visual a los campos de formulario utilizando clases de Bootstrap.
- Aplicar estilos a checkbox, radios y selectores.
- Implementar controles de formulario personalizados.