Formularios

Ejemplos y pautas de uso para estilos de control de formularios, opciones de diseño y componentes personalizados para crear una amplia variedad de formularios.

Descripción general

Los controles de formulario de Bootstrap se expanden en nuestros estilos de formulario reiniciados con clases. Utilice estas clases para optar por sus pantallas personalizadas para una representación más coherente en todos los navegadores y dispositivos.

Asegúrese de utilizar un atributo type apropiado en todas las entradas (p. Ej. , email para la dirección de correo electrónico o number para la información numérica) para aprovechar los controles de entrada más nuevos, como la verificación de correo electrónico, la selección de números y más.

Aquí hay un ejemplo rápido para demostrar los estilos de formulario de Bootstrap. Siga leyendo para obtener documentación sobre las clases obligatorias, el diseño de formularios y más.

Controles de formulario

Asegúrese de explorar nuestros formularios personalizados para darle más estilo a <select> s.

Para entradas de archivo, intercambie .form-control por .form-control-file.

Dimensionamiento

Establezca alturas usando clases como .form-control-lg y .form-control-sm.

Solo lectura

Agregue el readonly atributo booleano en una entrada para evitar la modificación del valor de la entrada. Las entradas de solo lectura aparecen más claras (como las entradas deshabilitadas), pero retienen el cursor estándar.

Texto sin formato de solo lectura

Si desea que los elementos <input readonly> en su formulario tengan el estilo de texto sin formato, use el .form-control-plaintext para eliminar el estilo de campo de formulario predeterminado y conservar el margen y el relleno correctos.

Casillas de verificación y radios

Predeterminado Las casillas de verificación y las radios se mejoran con la ayuda de .form-check, una clase única para ambos tipos de entrada que mejora el diseño y el comportamiento de sus elementos HTML. Las casillas de verificación son para seleccionar una o varias opciones en una lista, mientras que las radios son para seleccionar una opción entre muchas.

Se admiten las casillas de verificación y radios deshabilitadas, pero para proporcionar un not-allowed al colocar el cursor sobre el <label> principal, deberá agregar el atributo disabled al .form-check-input. El atributo deshabilitado aplicará un color más claro para ayudar a indicar el estado de la entrada.

Las casillas de verificación y el uso de radios están diseñadas para admitir la validación de formularios basada en HTML y proporcionar etiquetas concisas y accesibles. Como tal, nuestros <input> sy <label> son elementos hermanos en lugar de un <input> dentro de un <label>. Esto es un poco más detallado, ya que debe especificar los atributos id y for para relacionar los atributos <input> y <label>.

Predeterminado (apilado)

De forma predeterminada, cualquier número de casillas de verificación y radios que sean hermanos inmediatos se apilarán verticalmente y espaciado adecuadamente con .form-check.

Inline

Agrupar casillas de verificación o radios en la misma fila horizontal agregando .form-check-inline a cualquier .form-check.

Sin etiquetas

Agregue .position-static a las entradas dentro de .form-check que no tienen ningún texto de etiqueta. Recuerde seguir proporcionando algún tipo de etiqueta para las tecnologías de asistencia (por ejemplo, utilizando aria-label).

Diseño

Dado que Bootstrap aplica display: block y width: 100% a casi todos nuestros controles de formulario , los formularios se apilarán verticalmente de forma predeterminada. Se pueden usar clases adicionales para variar este diseño según el formulario.

Grupos de formularios

La clase .form-group es la forma más fácil para agregar algo de estructura a las formas. Proporciona una clase flexible que fomenta la agrupación adecuada de etiquetas, controles, texto de ayuda opcional y mensajes de validación de formularios. De forma predeterminada, solo aplica margin-bottom, pero selecciona estilos adicionales en .form-inline según sea necesario. Úselo con <fieldset> s, <div> s, o casi cualquier otro elemento.

Cuadrícula de formulario

Se pueden construir formularios más complejos usando nuestras clases de cuadrícula. Úselos para diseños de formularios que requieren varias columnas, anchos variados y opciones de alineación adicionales.

Fila de formulario

También puede cambiar .row por .form-row, una variación de nuestra fila de cuadrícula estándar que anula las canaletas de columna predeterminadas para diseños más ajustados y compactos.

También se pueden crear diseños más complejos con el sistema de cuadrícula.

Forma horizontal

Cree formas horizontales con la cuadrícula agregando la clase .row para formar grupos y usando la .col-*-* clases para especificar el ancho de sus etiquetas y controles. Asegúrese de agregar .col-form-label a sus <label> s también para que estén centrados verticalmente con sus controles de formulario asociados.

En ocasiones, es posible que necesite utilizar utilidades de margen o relleno para crear la alineación perfecta que necesita. Por ejemplo, hemos eliminado padding-top en nuestra etiqueta de entradas de radio apiladas para alinear mejor la línea de base del texto.

Etiqueta de forma horizontal tamaño

Tamaño de columna

Como se muestra en los ejemplos anteriores, nuestro sistema de cuadrícula le permite colocar cualquier número de .col s dentro de un .row o .form-row. Dividirán el ancho disponible equitativamente entre ellos. También puede elegir un subconjunto de sus columnas para ocupar más o menos espacio, mientras que las .col restantes se dividen por igual con el resto, con clases de columnas específicas como .col-7.

Auto-dimensionamiento

El siguiente ejemplo usa una utilidad flexbox para centrar verticalmente el contenido y los cambios .col a .col-auto para que las columnas solo ocupen el espacio necesario. Dicho de otra manera, el tamaño de la columna se basa en el contenido.

Luego, puede volver a mezclarlo con clases de columna de tamaño específico.

Y, por supuesto, se admiten controles de formulario personalizados.

Formularios en línea

Utilice .form-inline class para mostrar una serie de etiquetas, controles de formulario y botones en una sola fila horizontal. Los controles de formulario dentro de los formularios en línea varían ligeramente de sus estados predeterminados.

• Los controles son display: flex, contrayendo cualquier espacio en blanco HTML y permitiéndole proporcionar control de alineación con espaciado y utilidades flexbox.
• Los controles y grupos de entrada reciben width: auto para anular el valor predeterminado de Bootstrap width: 100%.
• Los controles solo aparecen en línea en las ventanas gráficas que tienen al menos 576 px de ancho para tener en cuenta las ventanas estrechas en los dispositivos móviles.

Es posible que deba abordar manualmente el ancho y la alineación de los controles de formulario individuales con utilidades de espaciado (como se muestra a continuación). Por último, asegúrese de incluir siempre un <label> con cada control de formulario, incluso si necesita ocultarlo a los visitantes que no son lectores de pantalla con .sr-only .

También se admiten selecciones y controles de formulario personalizados.

Texto de ayuda

El texto de ayuda a nivel de bloque en formularios se puede crear usando .form-text (anteriormente conocido como .help-block en v3). El texto de ayuda en línea se puede implementar de manera flexible utilizando cualquier elemento HTML en línea y clases de utilidad como .text-muted.

El texto de ayuda debajo de las entradas se puede diseñar con .form-text. Esta clase incluye display: block y agrega un margen superior para facilitar el espaciado de las entradas anteriores.

El texto en línea puede usar cualquier elemento HTML en línea típico (ya sea <small>, <span> o algo más) con nada más que una clase de utilidad.

Formularios deshabilitados

Agregue el atributo booleano disabled en una entrada para evitar interacciones del usuario y hacer que aparezca más ligero.

Agregue el disabled atributo a un <fieldset> para deshabilitar todos los controles dentro.

Validación

Proporcione comentarios valiosos y procesables a sus usuarios con la validación de formularios HTML5, disponible en todos nuestros navegadores compatibles. Elija entre los comentarios de validación predeterminados del navegador o implemente mensajes personalizados con nuestras clases integradas y JavaScript de inicio.

Cómo funciona

Así es como funciona la validación de formularios con Bootstrap:

• La validación de formularios HTML se aplica a través de las dos pseudoclases de CSS, :invalid y :valid. Se aplica a los elementos <input>, <select> y <textarea>.
• Bootstrap aplica los estilos :invalid y :valid a la clase principal .was-validated, generalmente aplicada a la <form>. De lo contrario, cualquier campo obligatorio sin un valor aparece como no válido al cargar la página. De esta manera, puede elegir cuándo activarlos (normalmente después de intentar enviar el formulario).
• Como alternativa, .is-invalid y .is-valid Se pueden usar clases en lugar de las pseudoclases para la validación del lado del servidor. No requieren una .was-validated clase principal.
• Debido a las limitaciones en el funcionamiento de CSS, no podemos (en la actualidad) aplicar estilos a una <label> que viene antes de un control de formulario en el DOM sin la ayuda de JavaScript personalizado.
• Todos los navegadores modernos admiten la API de validación de restricciones, una serie de métodos JavaScript para validar controles de formulario.
• Los mensajes de comentarios pueden utilizar los valores predeterminados del navegador (diferentes para cada navegador, y no se pueden aplicar estilos a través de CSS) o nuestros estilos de comentarios personalizados con HTML y CSS adicionales.
• Puede proporcionar mensajes de validez personalizados con setCustomValidity en JavaScript.

Con eso en mente, considere las siguientes demostraciones para nuestros estilos de validación de formularios personalizados, clases opcionales del lado del servidor y valores predeterminados del navegador.

Estilos personalizados

Para los mensajes de validación de formularios Bootstrap personalizados, deberá agregar el atributo booleano novalidate a su <form>. Esto deshabilita la información sobre herramientas de comentarios predeterminada del navegador, pero aún proporciona acceso a las API de validación de formularios en JavaScript. Intente enviar el formulario a continuación; nuestro JavaScript interceptará el botón de envío y te transmitirá los comentarios.

Cuando intentes enviar, verás :invalid y :valid estilos aplicados a los controles de su formulario.

Valores predeterminados del navegador

¿No le interesan los mensajes de retroalimentación de validación personalizados o escribir JavaScript para cambiar los comportamientos del formulario? Todo bien, puede usar los valores predeterminados del navegador. Intente enviar el formulario a continuación. Dependiendo de su navegador y sistema operativo, verá un estilo de comentarios ligeramente diferente.

Si bien estos estilos de comentarios no se pueden diseñar con CSS, aún puede personalizar el texto de comentarios a través de JavaScript.

Lado del servidor

Recomendamos utilizar la validación del lado del cliente, pero en caso de que necesite el lado del servidor, puede indicar campos de formulario no válidos y no válidos con .is-invalid y .is-valid. Tenga en cuenta que .invalid-feedback también es compatible con estas clases.

Elementos admitidos

Nuestros formularios de ejemplo muestran <input> textuales nativos arriba, pero los estilos de validación de formularios están disponibles también para nuestros controles de formulario personalizados.

Tooltips

Si el diseño de su formulario lo permite, puede cambiar el .{valid|invalid}-feedback clases para .{valid|invalid}-tooltip clases para mostrar comentarios de validación en una descripción emergente con estilo. Asegúrese de tener un padre con position: relative para el posicionamiento de la información sobre herramientas. En el siguiente ejemplo, nuestras clases de columna ya tienen esto, pero su proyecto puede requerir una configuración alternativa.

Formularios personalizados

Para aún más personalización y cruce consistencia del navegador, utilice nuestros elementos de formulario completamente personalizados para reemplazar los valores predeterminados del navegador. Están construidos sobre el marcado semántico y accesible, por lo que son reemplazos sólidos para cualquier control de formulario predeterminado.

Casillas de verificación y radios

Cada casilla de verificación y radio está envuelta en un <div> con un hermano <span> para crear nuestro control personalizado y un <label> para el texto que lo acompaña. Estructuralmente, este es el mismo enfoque que nuestro .form-check predeterminado.

Usamos el selector de hermanos (~) para todos nuestros <input> estados, como :checked, para diseñar correctamente nuestro indicador de formulario personalizado. Cuando se combina con la clase .custom-control-label, también podemos aplicar estilo al texto de cada elemento según el estado de <input>.

Ocultamos el <input> predeterminado con opacity y usamos .custom-control-label para construir un nuevo indicador de formulario personalizado en su lugar con ::before y ::after. Lamentablemente, no podemos crear uno personalizado solo a partir de <input> porque el content de CSS no funciona en ese elemento.

En los estados marcados, usamos iconos SVG incrustados en base64 de Open Iconic. Esto nos brinda el mejor control para diseñar y posicionar en navegadores y dispositivos.

Casillas de verificación

Casillas de verificación personalizadas también puede utilizar la pseudoclase :indeterminate cuando se configura manualmente mediante JavaScript (no hay ningún atributo HTML disponible para especificarlo).

Si está usando jQuery, algo como esto debería ser suficiente:

Radios

Inline

Deshabilitada

Las casillas de verificación personalizadas y las radios también se pueden desactivar. Agregue el atributo booleano disabled al <input> y el indicador personalizado y la descripción de la etiqueta tendrán estilo automáticamente.

Seleccionar menú

Personalizado <select> los menús solo necesitan una clase personalizada, .custom-select para activar los estilos personalizados.

También puede elegir entre selecciones personalizadas pequeñas y grandes para coincidir con nuestras entradas de texto de tamaño similar.

El atributo multiple también es compatible:

Como es el atributo size:

Explorador de archivos

La entrada del archivo es la más complicada del grupo y requiere JavaScript adicional si desea conectarlos con el texto funcional Choose file … y el nombre del archivo seleccionado.

Ocultamos el archivo predeterminado <input> a través de y, en su lugar, diseñe el <label>. El botón se genera y se posiciona con ::after. Por último, declaramos un width y height en el <input> para un espacio adecuado para el contenido circundante .

Traducir o personalizar las cadenas

La pseudoclase :lang() se utiliza para permitir la traducción del texto «Examinar» a otros idiomas. Anule o agregue entradas a la $custom-file-text variable Sass con la etiqueta de idioma relevante y cadenas localizadas. Las cadenas en inglés se pueden personalizar de la misma manera.Por ejemplo, así es como se puede agregar una traducción al español (el código de idioma español es es):

Aquí está lang(es) en acción en la entrada del archivo personalizado para una traducción al español:

Necesitará configurar el idioma de su documento (o subárbol del mismo) correctamente para que se muestre el texto correcto. Esto se puede hacer usando el atributo lang en el elemento <html> o el Content-Language encabezado HTTP , entre otros métodos.