Exemplos e pautas de uso para estilos de control de formularios, opcións de deseño e compoñentes personalizados para crear unha gran variedade de formularios.
Visión xeral
Os controis de formulario de Bootstrap amplíanse nos nosos estilos de formulario reiniciados con clases. Use estas clases para optar polas súas pantallas personalizadas para obter unha representación máis consistente en navegadores e dispositivos.
Asegúrate de usar un typeatributo apropiado en todas as entradas (por exemplo, emailpara o enderezo de correo electrónico ou numberpara a información numérica) para aproveitar os controis de entrada máis novos como a verificación de correo electrónico, a selección de números e moito máis.
Aquí tes un exemplo rápido para demostrar os estilos de formulario de Bootstrap. Continúa lendo para obter documentación sobre as clases requiridas, o deseño do formulario e moito máis.
Controis de formularios
Os controis de formularios textuales, como <input>s, <select>s e <textarea>s, están estilos coa .form-controlclase. Inclúense estilos para o aspecto xeral, o estado do foco, o tamaño e moito máis.
Para entradas de ficheiros, troca .form-controlpor .form-control-file.
Talla
Establece alturas usando clases como .form-control-lge .form-control-sm.
Só lectura
Engade o readonlyatributo booleano nunha entrada para evitar a modificación do valor da entrada. As entradas de só lectura parecen máis claras (igual que as entradas desactivadas), pero conservan o cursor estándar.
Texto simple só de lectura
Se queres que os <input readonly>elementos do teu formulario teñan un estilo de texto simple, utiliza a .form-control-plaintextclase para eliminar o estilo predeterminado do campo do formulario e conserva a marxe e o recheo correctos.
Entradas de rango
Establece entradas de intervalo de desprazamento horizontal usando .form-control-range.
Caixas de verificación e radios
As caixas de verificación e radios predeterminadas mellóranse coa axuda de .form-check, unha única clase para ambos os tipos de entrada que mellora o deseño e o comportamento dos seus elementos HTML . As caixas de verificación son para seleccionar unha ou varias opcións nunha lista, mentres que as radios son para seleccionar unha opción de entre moitas.
Admítense as caixas de verificación e as radios desactivadas. O disabledatributo aplicará unha cor máis clara para axudar a indicar o estado da entrada.
As caixas de verificación e os botóns de opción admiten a validación de formularios baseadas en HTML e proporcionan etiquetas concisas e accesibles. Polo tanto, os nosos <input>s e <label>s son elementos irmáns en oposición a un <input>dentro dun <label>. Isto é un pouco máis detallado xa que debes especificar ide foratributos para relacionar os <input>e <label>.
Predeterminado (apilado)
De forma predeterminada, calquera número de caixas de verificación e radios que sexan irmáns inmediatos apilaranse verticalmente e espaciaranse adecuadamente con .form-check.
En liña
Agrupe caixas de verificación ou radios na mesma fila horizontal engadindo .form-check-inlinea calquera .form-check.
Sen etiquetas
Engadir .position-staticás entradas .form-checkque non teñan ningún texto de etiqueta. Lembra aínda fornecer algún tipo de etiqueta para as tecnoloxías de asistencia (por exemplo, usar aria-label).
Maquetación
Dado que se aplica Bootstrap display: blocke width: 100%a case todos os nosos controis de formularios, os formularios apilaranse verticalmente por defecto. Pódense usar clases adicionais para variar este deseño por cada formulario.
Formar grupos
A .form-groupclase é a forma máis sinxela de engadir algunha estrutura aos formularios. Ofrece unha clase flexible que fomenta a agrupación adecuada de etiquetas, controis, texto de axuda opcional e mensaxes de validación de formularios. Por defecto só se aplica margin-bottom, pero recolle estilos adicionais .form-inlinesegundo sexa necesario. Utilízao con <fieldset>s, <div>s ou case calquera outro elemento.
Forma cuadrícula
Pódense construír formularios máis complexos usando as nosas clases de cuadrícula. Utilízaos para deseños de formularios que requiren varias columnas, anchos variados e opcións de aliñamento adicionais.
Forma fila
Tamén podes trocar .rowpor .form-row, unha variación da nosa fila de grade estándar que anula os canales de columna predeterminados para deseños máis axustados e compactos.
Tamén se poden crear esquemas máis complexos co sistema de cuadrícula.
Forma horizontal
Crea formularios horizontais coa grella engadindo a .rowclase para formar grupos e usando as .col-*-*clases para especificar o ancho das túas etiquetas e controis. Asegúrate de engadir tamén .col-form-labelás túas <label>s para que estean centradas verticalmente cos seus controis de formulario asociados.
Ás veces, quizais necesites usar utilidades de marxe ou recheo para crear o aliñamento perfecto que necesitas. Por exemplo, eliminamos a padding-topetiqueta das nosas entradas de radio apiladas para aliñar mellor a liña de base do texto.
Tamaño da etiqueta de formulario horizontal
Asegúrate de usar .col-form-label-smou .col-form-label-lga túa <label>s ou <legend>s para seguir correctamente o tamaño de .form-control-lge .form-control-sm.
Tamaño da columna
Como se mostra nos exemplos anteriores, o noso sistema de cuadrícula permítelle colocar calquera número de .cols dentro dun .rowou .form-row. Dividirán o ancho dispoñible equitativamente entre eles. Tamén podes escoller un subconxunto das túas columnas para que ocupe máis ou menos espazo, mentres que os .cols restantes dividen por igual o resto, con clases de columnas específicas como .col-7.
Auto-dimensionado
O exemplo que aparece a continuación usa unha utilidade flexbox para centrar verticalmente o contido e os cambios .colpara .col-autoque as súas columnas só ocupen o espazo necesario. Dito doutro xeito, o tamaño da columna depende dos contidos.
Despois podes remesturar isto unha vez máis con clases de columnas específicas de tamaño.
Use a .form-inlineclase para mostrar unha serie de etiquetas, controis de formulario e botóns nunha única fila horizontal. Os controis de formularios dentro dos formularios en liña varían lixeiramente dos seus estados predeterminados.
Os controis son display: flex, que contraen calquera espazo en branco HTML e permítenche proporcionar control de aliñamento con utilidades de espazamento e caixa flexible .
Os controis e os grupos de entrada reciben width: autopara anular o valor predeterminado de Bootstrap width: 100%.
Os controis só aparecen en liña nas vistas de polo menos 576 píxeles de ancho para ter en conta as ventás estreitas dos dispositivos móbiles.
Quizais necesites abordar manualmente o ancho e o aliñamento dos controis de formulario individuais con utilidades de espazamento (como se mostra a continuación). Por último, asegúrese de incluír sempre un <label>con cada control de formulario, aínda que necesite ocultalo aos visitantes que non son lectores de pantalla con .sr-only.
Tamén se admiten controis e seleccións de formularios personalizados.
Alternativas ás etiquetas ocultas
As tecnoloxías de axuda, como os lectores de pantalla, terán problemas cos teus formularios se non inclúes unha etiqueta para cada entrada. Para estes formularios en liña, pode ocultar as etiquetas usando a .sr-onlyclase. Existen outros métodos alternativos para proporcionar unha etiqueta para tecnoloxías de asistencia, como o atributo aria-label, aria-labelledbyou . titleSe ningunha destas está presente, as tecnoloxías de asistencia poden recorrer ao uso do placeholderatributo, se está presente, pero teña en conta que placeholdernon se recomenda o uso de como substituto doutros métodos de etiquetaxe.
Texto de axuda
Pódese crear texto de axuda a nivel de bloque en formularios usando .form-text(anteriormente coñecido como .help-blocken v3). O texto de axuda en liña pódese implementar de forma flexible usando calquera elemento HTML en liña e clases de utilidade como .text-muted.
Asociar texto de axuda con controis de formulario
O texto de axuda debe estar asociado explícitamente co control de formulario co que se relaciona usando o aria-describedbyatributo. Isto garantirá que as tecnoloxías de asistencia, como os lectores de pantalla, anunciarán este texto de axuda cando o usuario se concentre ou entre no control.
O texto de axuda debaixo das entradas pódese decorar con .form-text. Esta clase inclúe display: blocke engade algunha marxe superior para facilitar o espazo das entradas anteriores.
O teu contrasinal debe ter entre 8 e 20 caracteres, conter letras e números e non debe conter espazos, caracteres especiais nin emoji.
O texto en liña pode usar calquera elemento HTML en liña típico (xa sexa un <small>, <span>ou outra cousa) sen máis que unha clase de utilidade.
Formularios desactivados
Engade o disabledatributo booleano nunha entrada para evitar as interaccións do usuario e facelo parecer máis claro.
Engade o disabledatributo a <fieldset>para desactivar todos os controis dentro.
Advertencia con áncoras
De xeito predeterminado, os navegadores tratarán todos os controis de formularios nativos ( e <input>elementos ) dentro dunha como desactivados, evitando as interaccións do teclado e do rato neles. Non obstante, se o teu formulario tamén inclúe elementos, só se lles dará un estilo . Como se indica na sección sobre o estado desactivado dos botóns (e concretamente na subsección dos elementos de ancoraxe), esta propiedade CSS aínda non está estandarizada e non está totalmente compatible con Internet Explorer 10 e non impedirá que os usuarios do teclado capaz de enfocar ou activar estas ligazóns. Polo tanto, para estar seguro, usa JavaScript personalizado para desactivar tales ligazóns.<select><button><fieldset disabled><a ... class="btn btn-*">pointer-events: none
Compatibilidade entre navegadores
Aínda que Bootstrap aplicará estes estilos en todos os navegadores, Internet Explorer 11 e anteriores non admiten totalmente o disabledatributo nun ficheiro <fieldset>. Use JavaScript personalizado para desactivar o conxunto de campos nestes navegadores.
Validación
Proporciona comentarios valiosos e prácticos aos teus usuarios coa validación de formularios HTML5, dispoñible en todos os nosos navegadores compatibles . Escolla entre os comentarios de validación predeterminados do navegador ou implemente mensaxes personalizadas coas nosas clases integradas e JavaScript inicial.
Actualmente recomendamos utilizar estilos de validación personalizados, xa que as mensaxes de validación predeterminadas do navegador nativo non están expostas de forma consistente a tecnoloxías de asistencia en todos os navegadores (sobre todo, Chrome en ordenadores e móbiles).
Cómo funciona
Así é como funciona a validación de formularios con Bootstrap:
A validación do formulario HTML aplícase a través das dúas pseudoclases de CSS :invalide :valid. Aplícase a <input>, <select>, e <textarea>elementos.
Bootstrap abarca os estilos :invalide :validá clase pai .was-validated, normalmente aplicada ao <form>. En caso contrario, calquera campo obrigatorio sen valor aparece como non válido na carga da páxina. Deste xeito, pode escoller cando activalos (normalmente despois de tentar enviar o formulario).
Para restablecer a aparencia do formulario (por exemplo, no caso de envíos de formularios dinámicos mediante AJAX), elimine a .was-validatedclase de <form>novo despois do envío.
Como alternativa, pódense usar clases .is-invalide en lugar das pseudoclases para a validación do lado do servidor . Non requiren unha clase de pais..is-valid.was-validated
Debido ás limitacións no funcionamento do CSS, non podemos (actualmente) aplicar estilos a un <label>control de formulario no DOM sen a axuda de JavaScript personalizado.
Todos os navegadores modernos admiten a API de validación de restricións , unha serie de métodos JavaScript para validar os controis de formularios.
As mensaxes de comentarios poden utilizar os valores predeterminados do navegador (diferentes para cada navegador e sen estilo mediante CSS) ou os nosos estilos de comentarios personalizados con HTML e CSS adicionais.
Podes proporcionar mensaxes de validez personalizadas setCustomValidityen JavaScript.
Tendo isto en conta, considere as seguintes demostracións para os nosos estilos de validación de formularios personalizados, as clases opcionais do lado do servidor e os valores predeterminados do navegador.
Estilos personalizados
Para as mensaxes de validación de formularios Bootstrap personalizadas, terás que engadir o novalidateatributo booleano ao teu <form>. Isto desactiva as ferramentas de comentarios predeterminadas do navegador, pero aínda así proporciona acceso ás API de validación de formularios en JavaScript. Tenta enviar o formulario a continuación; o noso JavaScript interceptará o botón de enviar e transmitiráche comentarios. Cando intentes enviar, verás os estilos :invalide :validaplicados aos teus controis de formulario.
Os estilos de comentarios personalizados aplican cores, bordos, estilos de enfoque e iconas de fondo personalizados para comunicar mellor os comentarios. As iconas de fondo para <select>s só están dispoñibles con .custom-select, e non .form-control.
Valores predeterminados do navegador
Non che interesan mensaxes de comentarios de validación personalizadas ou escribir JavaScript para cambiar os comportamentos dos formularios? Todo ben, podes usar os valores predeterminados do navegador. Proba a enviar o seguinte formulario. Dependendo do teu navegador e do teu sistema operativo, verás un estilo de comentarios lixeiramente diferente.
Aínda que estes estilos de comentarios non se poden crear con CSS, aínda podes personalizar o texto de comentarios a través de JavaScript.
Lado do servidor
Recomendamos utilizar a validación do lado do cliente, pero no caso de que necesite unha validación do servidor, pode indicar os campos de formulario non válidos e válidos con .is-invalide .is-valid. Teña en conta que .invalid-feedbacktamén é compatible con estas clases.
Elementos soportados
Os estilos de validación están dispoñibles para os seguintes controis e compoñentes de formulario:
<input>s e <textarea>s con .form-control(incluíndo ata un .form-controlnos grupos de entrada)
<select>s con .form-controlou.custom-select
.form-checks
.custom-checkboxs e .custom-radios
.custom-file
Suxestións sobre ferramentas
Se o deseño do teu formulario o permite, podes intercambiar as .{valid|invalid}-feedbackclases por .{valid|invalid}-tooltipclases para mostrar comentarios de validación nunha información con estilo. Asegúrate de ter un pai con position: relativeel para colocar a información sobre ferramentas. No seguinte exemplo, as nosas clases de columnas xa teñen isto, pero o teu proxecto pode requirir unha configuración alternativa.
Personalización
Os estados de validación pódense personalizar a través de Sass co $form-validation-statesmapa. Situado no noso _variables.scssficheiro, este mapa de Sass está en bucle para xerar os estados predeterminados valid/ invalidvalidación. Inclúese un mapa aniñado para personalizar a cor e a icona de cada estado. Aínda que os navegadores non admiten outros estados, aqueles que usan estilos personalizados poden engadir facilmente comentarios de formularios máis complexos.
Teña en conta que non recomendamos personalizar estes valores sen modificar tamén o form-validation-statemixin.
Formularios personalizados
Para obter aínda máis personalización e coherencia entre o navegador, utiliza os nosos elementos de formulario completamente personalizados para substituír os valores predeterminados do navegador. Están construídos sobre o marcado semántico e accesible, polo que son substitutos sólidos para calquera control de formulario predeterminado.
Caixas de verificación e radios
Cada caixa de verificación e radio <input>e <label>emparejamento envólvese nun <div>para crear o noso control personalizado. Estruturalmente, este é o mesmo enfoque que o noso predeterminado .form-check.
Usamos o selector de irmáns ( ~) para todos os nosos <input>estados, por exemplo, :checkedpara diseñar correctamente o noso indicador de formulario personalizado. Cando se combina coa .custom-control-labelclase, tamén podemos estilizar o texto de cada elemento en función do <input>estado de '.
Ocultamos o valor predeterminado <input>con opacitye usamos .custom-control-labelpara crear un novo indicador de formulario personalizado no seu lugar con ::beforee ::after. Desafortunadamente, non podemos crear un personalizado só <input>porque os CSS contentnon funcionan nese elemento.
Nos estados marcados, usamos iconas SVG incrustadas base64 de Open Iconic . Isto ofrécenos o mellor control para o estilo e o posicionamento en navegadores e dispositivos.
Casillas de verificación
As caixas de verificación personalizadas tamén poden utilizar a :indeterminatepseudo-clase cando se definen manualmente mediante JavaScript (non hai ningún atributo HTML dispoñible para especificalo).
Se estás usando jQuery, algo como isto debería ser suficiente:
Radios
En liña
Desactivado
Tamén se poden desactivar as caixas de verificación e as radios personalizadas. Engade o disabledatributo booleano ao <input>e o indicador personalizado e a descrición da etiqueta terán un estilo automaticamente.
Interruptores
Un interruptor ten o marcado dunha caixa de verificación personalizada pero usa a .custom-switchclase para renderizar un interruptor de alternancia. Os interruptores tamén admiten o disabledatributo.
Seleccione menú
Os menús personalizados <select>só necesitan unha clase personalizada .custom-selectpara activar os estilos personalizados. Os estilos personalizados limítanse á <select>aparencia inicial do 's' e non se poden modificar <option>debido ás limitacións do navegador.
Tamén podes escoller entre pequenas e grandes seleccións personalizadas para que coincidan coas nosas entradas de texto de tamaño similar.
multipleTamén se admite o atributo:
Como é o sizeatributo:
Rango
Crea <input type="range">controis personalizados con .custom-range. A pista (o fondo) e o polgar (o valor) teñen o mesmo estilo en todos os navegadores. Como só IE e Firefox admiten "encher" a súa pista dende a esquerda ou a dereita do polgar como un medio para indicar visualmente o progreso, actualmente non o admitimos.
As entradas do intervalo teñen valores implícitos para mine max— 0e 100, respectivamente. Podes especificar novos valores para aqueles que utilicen os atributos mine .max
De xeito predeterminado, as entradas de intervalo "axustan" a valores enteiros. Para cambialo, pode especificar un stepvalor. No seguinte exemplo, duplicamos o número de pasos usando step="0.5".
Explorador de ficheiros
O complemento recomendado para animar a entrada de ficheiros personalizados: bs-custom-file-input , iso é o que estamos a usar actualmente aquí nos nosos documentos.
A entrada de ficheiros é a máis retorcida do grupo e require JavaScript adicional se queres conectalos coa función Escolla ficheiro... e o texto do nome do ficheiro seleccionado.
Ocultamos o ficheiro predeterminado <input>mediante opacitye no seu lugar estilizamos o <label>. O botón xérase e colócase con ::after. Por último, declaramos a widthe heightsobre o <input>para o espazo adecuado para o contido circundante.
Traducir ou personalizar as cadeas con SCSS
A :lang()pseudo-clase úsase para permitir a tradución do texto "Examinar" a outros idiomas. Anular ou engadir entradas á $custom-file-textvariable Sass coa etiqueta de idioma relevante e cadeas localizadas. As cadeas inglesas pódense personalizar do mesmo xeito. Por exemplo, é como se pode engadir unha tradución ao español (o código do español é es):
Aquí está lang(es)en acción sobre a entrada de ficheiro personalizado para unha tradución ao español:
Necesitarás establecer o idioma do teu documento (ou a súa subárbore) correctamente para que se mostre o texto correcto. Isto pódese facer usando o langatributo do <html>elemento ou a Content-Languagecabeceira HTTP , entre outros métodos.
Traducir ou personalizar as cadeas con HTML
Bootstrap tamén ofrece unha forma de traducir o texto "Examinar" en HTML co data-browseatributo que se pode engadir á etiqueta de entrada personalizada (exemplo en holandés):