Bootstrap facilita la creación de formularios atractivos y adaptables al ofrecer una colección de clases y componentes para el control de formularios. Estas clases de control de formularios pueden utilizarse para estilizar campos de entrada, casillas de verificación, botones de opción, menús desplegables, listas de selección y áreas de texto de manera uniforme en todo el sitio web.

Clases comunes de control de formularios

clase form-control

Esta clase se utiliza para estilizar varios elementos de formulario, incluidos los campos de entrada, áreas de texto y menús desplegables de selección. Al aplicarla, se garantiza que los elementos del formulario sean responsivos y visualmente consistentes en diferentes dispositivos y tamaños de pantalla.

Características principales de la clase form-control

• Diseño responsivo: Los elementos de formulario estilizados con form-control ajustan automáticamente su ancho para ocupar el espacio disponible dentro de su contenedor;
• Estilo uniforme: Al aplicar form-control, los elementos del formulario reciben un estilo consistente, incluyendo bordes, relleno y propiedades de fuente;
• Estados de enfoque y desplazamiento: form-control proporciona retroalimentación visual a los usuarios al cambiar la apariencia de los elementos del formulario cuando se pasa el cursor sobre ellos o se enfocan.

clases form-check

• form-check: Esta clase estiliza los campos de casilla de verificación y botones de opción para mostrarlos en línea y aplicar un estilo consistente;
• form-check-input: Se aplica a los elementos de entrada de casilla de verificación y botón de opción dentro de un contenedor form-check. Esta clase garantiza un estilo consistente de los elementos de entrada;
• form-check-label: Se utiliza para estilizar la etiqueta asociada a los campos de casilla de verificación y botones de opción. Garantiza un estilo uniforme de las etiquetas y ayuda a mantener la alineación con los elementos de entrada correspondientes.

Sistema de cuadrícula para el diseño de formularios

El sistema de cuadrícula de Bootstrap proporciona una herramienta potente para organizar los elementos de los formularios en diseños de varias columnas. Al utilizar clases de cuadrícula como col-md-6, col-lg-4 y otras, los desarrolladores pueden disponer los elementos del formulario en diseños flexibles y responsivos que se adaptan perfectamente a diferentes tamaños de pantalla y dispositivos.

Características principales:

• Columnas responsivas: Las clases de cuadrícula permiten definir el ancho de los elementos del formulario en distintos puntos de ruptura. Por ejemplo, col-md-6 indica que la columna debe ocupar la mitad del ancho de su contenedor en pantallas medianas y superiores. De manera similar, col-lg-4 especifica un ancho de un tercio en pantallas grandes;
• Flexibilidad: Es posible combinar diferentes clases de cuadrícula para crear diseños de formularios complejos;
• Optimización para dispositivos móviles: El sistema de cuadrícula de Bootstrap está diseñado con un enfoque mobile-first, lo que garantiza que los formularios luzcan correctamente en pantallas pequeñas de forma predeterminada.

Resultado del comportamiento de la cuadrícula de formularios responsiva

Estilos de validación de formularios

Los estilos de validación de formularios proporcionan retroalimentación visual a los usuarios sobre la validez de sus entradas. Estos estilos incluyen indicadores para estados de éxito, error y advertencia, facilitando que los usuarios comprendan si su entrada cumple con los criterios requeridos.

En el ejemplo proporcionado:

• Se añade la clase needs-validation para habilitar los estilos de validación de Bootstrap;
• El atributo novalidate se utiliza para desactivar la validación nativa del navegador;
• El campo de entrada para la dirección de correo electrónico tiene el atributo required, lo que lo hace obligatorio;
• Las clases valid-feedback e invalid-feedback se utilizan para mostrar mensajes de retroalimentación para entradas válidas e inválidas, respectivamente;
• Además, se utiliza JavaScript para evitar el envío del formulario si hay campos inválidos y para aplicar la clase was-validated al formulario.