Forms (Español)

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.

vista general

Los controles de formulario de Bootstrap amplían nuestros estilos de formulario reiniciados con clases. Utilice estas clases para optar por sus pantallas personalizadas para una representación más consistente en navegadores y dispositivos.

asegúrese de utilizar un atributo type en todas las entradas (p. ej.,, email para dirección de correo electrónico o number para información numérica) para aprovechar los controles de entrada más recientes como verificación de correo electrónico, 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 requeridas, el diseño del formulario y más.

controles de Formulario

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

Para el archivo de entradas, cambiar el .form-control para .form-control-file.,

Tamaño

Establecer las alturas a través de clases como .form-control-lg y .form-control-sm.

Readonly

Añadir la etiqueta readonly atributo booleano en una entrada para evitar la modificación del valor de entrada. Las entradas de solo lectura aparecen más ligeras (al igual que las entradas deshabilitadas), pero conservan el cursor estándar.,

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Readonly plain text

Si desea tener <input readonly> los elementos en su formulario con estilo de texto sin formato, use la clase .form-control-plaintext para eliminar el estilo predeterminado del campo del formulario y preservar el margen y el relleno correctos.

Rango de Entradas

Conjunto desplazable horizontalmente rango de entradas con .form-control-range.,

casillas de verificación y radios

las casillas de verificación y radios predeterminadas 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 de muchas.

se admiten casillas de verificación y radios deshabilitadas. El atributo disabled 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ñados para admitir la validación de formularios basados en HTML y proporcionar etiquetas concisas y accesibles. Como tal, nuestro <input>y <label>s son hermanos elementos como opuesto a un <input> dentro de un <label>. Esto es un poco más detallado como debe especificar id y for atributos de relacionar el <input> y <label>.,

Default (stacked)

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

en línea

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

Sin etiquetas

Añadir .position-static a los insumos dentro de .form-check que no tiene ningún texto de la etiqueta. Recuerde proporcionar algún tipo de etiqueta para las tecnologías de asistencia (por ejemplo, usando aria-label).,

Diseño

Desde el Bootstrap se aplica display: block y width: 100% para casi todos nuestros controles de formulario, formularios por defecto de la pila vertical. Se pueden usar clases adicionales para variar este diseño por forma.

grupos de formularios

la clase .form-group es la forma más fácil de agregar alguna estructura a los formularios. Proporciona una clase flexible que fomenta la agrupación adecuada de etiquetas, controles, texto de ayuda opcional y mensajería de validación de formularios., De forma predeterminada, solo aplica margin-bottom, pero recoge estilos adicionales en .form-inline según sea necesario. Utilícelo con <fieldset> s, <div> s, o casi cualquier otro elemento.

form grid

se pueden crear formas más complejas utilizando nuestras clases grid. Utilícelos para diseños de formularios que requieran varias columnas, anchos variados y opciones de alineación adicionales.,

Form row

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

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

formulario Horizontal

cree formularios horizontales con la cuadrícula agregando la clase .row para formar grupos y usando las clases .col-*-* 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.

a veces, tal vez necesite usar utilidades de margen o relleno para crear la alineación perfecta que necesita. Por ejemplo, hemos eliminado el padding-top en nuestra etiqueta de entradas de radio apiladas para alinear mejor la línea de base del texto.,

dimensionamiento horizontal de la etiqueta del formulario

dimensionamiento de la columna

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

auto-sizing

el ejemplo a continuación utiliza una utilidad flexbox para centrar verticalmente el contenido y cambia .col a .col-auto para que sus columnas solo ocupen tanto espacio como sea necesario. Dicho de otra manera, el tamaño de la columna se basa en el contenido.

luego puede remezclar eso una vez más con clases de columna específicas de tamaño.

y, por supuesto, se admiten controles de formularios personalizados.,

inline forms

Use la clase .form-inline 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, que contrae cualquier espacio en blanco HTML y le permite proporcionar control de alineación con utilidades de espaciado y flexbox.
• Los controles y los grupos de entrada reciben width: autopara anular el valor predeterminado de Bootstrap width: 100%.,
• Los controles solo aparecen en línea en viewports que tienen al menos 576px de ancho para tener en cuenta las viewports estrechas en dispositivos móviles.

es posible que deba abordar manualmente el ancho y la alineación de los controles de formulario individuales con las 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 de los visitantes que no son lectores de pantalla con .sr-only.

también se admiten controles y selecciones de formularios personalizados.,

texto de ayuda

El texto de ayuda a nivel de bloque en los 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 añade 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 un <small>, <span>, o algo más) con nada más que una clase de utilidad.

Disabled forms

agregue el atributo booleano disabled en una entrada para evitar las interacciones del usuario y hacerlo parecer más ligero.,

<input class="form-control" type="text" placeholder="Disabled input here..." disabled>

Añadir la etiqueta disabled atributo a un <fieldset> para deshabilitar todos los controles dentro.

Validation

proporcione información valiosa y procesable 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 pseudo-clases de CSS, :invalid y :valid. Se aplica a <input>, <select> y <textarea> elementos.,
• Bootstrap scopes the :invalidand :validstyles to parent .was-validatedclass, usually applied to the <form>. De lo contrario, cualquier campo obligatorio sin un valor se muestra 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).
• para restablecer la apariencia del formulario (por ejemplo, en el caso de envíos de formularios dinámicos utilizando AJAX), elimine la clase .was-validated de la clase <form> de nuevo después del envío.,
• Como alternativa, las clases .is-invalid y .is-valid se pueden usar en lugar de las pseudo-clases para la validación del lado del servidor. No requieren una clase padre .was-validated.
• debido a las restricciones en cómo funciona CSS, no podemos (en la actualidad) aplicar estilos a un <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 formularios.,
• Los mensajes de retroalimentación pueden utilizar los valores predeterminados del navegador (diferentes para cada navegador y no modificables a través de CSS) o nuestros estilos de retroalimentación 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 de Bootstrap personalizados, deberá agregar el atributo booleano novalidate a su <form>. Esto deshabilita las sugerencias de retroalimentación predeterminadas del navegador, pero aún así 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 Enviar y le transmitirá comentarios. Al intentar enviar, verás los estilos :invalid y :valid aplicados a tus controles de formulario.,

estilos de comentarios personalizados aplica colores, bordes, estilos de enfoque e iconos de fondo personalizados para comunicar mejor los comentarios. Los iconos de fondo para <select> s solo están disponibles con .custom-select, y no con .form-control.

valores predeterminados del navegador

¿no está interesado en mensajes de retroalimentación de validación personalizados o escribir JavaScript para cambiar los comportamientos del formulario? Todo bien, puede utilizar los valores predeterminados del navegador. Prueba a enviar el siguiente formulario. Dependiendo de su navegador y sistema operativo, verá un estilo ligeramente diferente de comentarios.,

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

lado del servidor

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

elementos compatibles

Los estilos de validación están disponibles para los siguientes controles y componentes del formulario:

información sobre herramientas

Si el diseño del formulario lo permite, puede intercambiar las clases .{valid|invalid}-feedback por clases .{valid|invalid}-tooltip muestra los comentarios de validación en una descripción 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.,

personalización

los estados de validación se pueden personalizar a través de Sass con el mapa $form-validation-states. Ubicado en nuestro archivo _variables.scss, este mapa Sass está en bucle para generar los estados de validación predeterminados valid/invalid. Se incluye un mapa anidado para personalizar el color y el icono de cada estado. Si bien los navegadores no admiten otros estados, aquellos que usan estilos personalizados pueden agregar fácilmente comentarios de formularios más complejos.,

tenga en cuenta que no recomendamos personalizar estos valores sin modificar también el form-validation-state mixin.

formularios personalizados

para una mayor personalización y coherencia entre navegadores, utilice nuestros elementos de formulario completamente personalizados para reemplazar los valores predeterminados del navegador. Están construidos sobre un 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 <input> y <label> el emparejamiento está envuelto en un <div> para crear nuestro control personalizado. Estructuralmente, este es el mismo enfoque que nuestro valor predeterminado .form-check.

utilizamos el selector de hermanos (~) para todos nuestros <input> estados—como :checkedcorrectamente estilo de nuestro formulario personalizado indicador., Cuando se combina con la clase .custom-control-label, también podemos aplicar estilo al texto de cada elemento en función del Estado de <input>.

ocultamos el valor predeterminado <input> opacity y el uso de la etiqueta .custom-control-label para crear un nuevo formulario personalizado indicador en su lugar con la etiqueta ::before y ::after. Desafortunadamente no podemos construir uno personalizado solo desde <input> porque content de CSS no funciona en ese elemento.,

en los Estados marcados, utilizamos iconos SVG incrustados base64 de Open Iconic. Esto nos proporciona el mejor control para el estilo y el posicionamiento en navegadores y dispositivos.

casillas de verificación

las casillas de verificación personalizadas también pueden utilizar la pseudo clase:indeterminate cuando se establece manualmente a través de JavaScript (no hay un atributo HTML disponible para especificarlo).,

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

$('.your-checkbox').prop('indeterminate', true)

Radios

inline

desactivada

las casillas de verificación y radios personalizadas también se pueden desactivar., Agregue el atributo booleano disabled a <input> y el indicador personalizado y la descripción de la etiqueta se diseñarán automáticamente.

Switches

Un interruptor tiene el marcado de una casilla de verificación personalizada, pero utiliza la clase .custom-switch para representar un interruptor de palanca. Los conmutadores también admiten el atributo disabled.,

Select menu

Custom <select> los menús solo necesitan una clase personalizada, .custom-select para activar los estilos personalizados. Los estilos personalizados están limitados a la apariencia inicial de <select> y no pueden modificar <option>debido a limitaciones del navegador.

También puede elegir entre selecciones personalizadas Pequeñas y grandes para que coincidan con nuestras entradas de texto de tamaño similar.,

El multiple atributo también es compatible:

Como el size atributo:

Alcance

Crear <input type="range"> controles .custom-range. La pista (el fondo) y el pulgar (el valor) tienen el mismo estilo en todos los navegadores. Como solo IE y Firefox soportan «llenar» su pista desde la izquierda o derecha del pulgar como un medio para indicar visualmente el progreso, actualmente no lo soportamos.,

<label for="customRange1">Example range</label><input type="range" class="custom-range">

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

<label for="customRange2">Example range</label><input type="range" class="custom-range" min="0" max="5">

By default, range inputs «snap” to integer values., Para cambiar esto, puede especificar un valor step. En el siguiente ejemplo, duplicamos el número de pasos usando step="0.5".

<label for="customRange3">Example range</label><input type="range" class="custom-range" min="0" max="5" step="0.5">

Explorador de archivos

El archivo de entrada es el más retorcido de los racimos y requiere de JavaScript adicional si quieres conectarlos con funcionales Elegir archivo… y seleccionado de texto nombre de archivo.

ocultamos el archivo predeterminado <input> via opacity y en su lugar el estilo <label>. El botón se genera y se coloca con ::after. Por último, declaramos un width y height en el <input> para el espaciamiento adecuado para el contenido que lo rodea.,

traducir o personalizar las cadenas con SCSS

La pseudo-clase:lang() se utiliza para permitir la traducción del texto «examinar» a otros idiomas. Anule o agregue entradas a la variable sass $custom-file-text 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):

$custom-file-text: ( en: "Browse", es: "Elegir");

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

deberá 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 encabezado HTTP Content-Language, entre otros métodos.

traducir o personalizar las cadenas con HTML

Bootstrap también proporciona una forma de traducir el texto «Examinar» en HTML con el atributodata-browse que se puede agregar a la etiqueta de entrada personalizada (ejemplo en holandés):