Formulários (Português)

Exemplos e diretrizes de uso para estilos de controle de formulário, opções de layout e componentes personalizados para a criação de uma ampla variedade de formulários.

Visão geral

Os controles de formulário do Bootstrap se expandem em nossos estilos de formulário reinicializados com classes. Use essas classes para ativar suas exibições personalizadas para uma renderização mais consistente em navegadores e dispositivos.

Certifique-se de usar um atributo type apropriado em todas as entradas (por exemplo , email para endereço de e-mail ou number para informações numéricas) para aproveitar os controles de entrada mais recentes, como verificação de e-mail, seleção de número e muito mais.

Aqui está um exemplo rápido para demonstrar os estilos de formulário do Bootstrap. Continue lendo para obter a documentação sobre as classes necessárias, layout de formulário e muito mais.

Controles de formulário

Certifique-se de explorar nossos formulários personalizados para criar um estilo adicional <select> s.

Para entradas de arquivo, troque o .form-control por .form-control-file.

Dimensionamento

Defina as alturas usando classes como .form-control-lg e .form-control-sm.

Somente leitura

Adicione o readonly Atributo booleano em uma entrada para evitar a modificação do valor da entrada. As entradas somente leitura parecem mais claras (assim como as entradas desativadas), mas mantêm o cursor padrão.

Texto simples somente leitura

Se você deseja que <input readonly> elementos em seu formulário sejam estilizados como texto simples, use o .form-control-plaintext classe para remover o estilo de campo padrão do formulário e preservar a margem e preenchimento corretos.

Caixas de seleção e rádios

Padrão caixas de seleção e rádios são aprimorados com a ajuda de .form-check, uma classe única para ambos os tipos de entrada que melhora o layout e o comportamento de seus elementos HTML. As caixas de seleção são para selecionar uma ou várias opções em uma lista, enquanto os rádios são para selecionar uma opção entre muitas.

Caixas de seleção e rádios desativados são suportados, mas para fornecer um not-allowed cursor sobre o cursor do pai <label>, você precisará adicionar o atributo disabled ao .form-check-input. O atributo disabled aplicará uma cor mais clara para ajudar a indicar o estado da entrada.

O uso de caixas de seleção e rádios foi criado para oferecer suporte à validação de formulário baseado em HTML e fornecer rótulos concisos e acessíveis. Como tal, nossos <input> se <label> s são elementos irmãos em oposição a um <input> dentro de um <label>. Isso é um pouco mais detalhado, pois você deve especificar os atributos id e for para relacionar os <input> e <label>.

Padrão (empilhado)

Por padrão, qualquer número de caixas de seleção e rádios que são irmãos imediatos serão empilhados verticalmente e apropriadamente espaçado com .form-check.

Inline

Agrupe caixas de seleção ou rádios na mesma linha horizontal adicionando .form-check-inline a qualquer .form-check.

Sem rótulos

Adicione .position-static às entradas em .form-check que não têm nenhum texto de rótulo. Lembre-se de ainda fornecer alguma forma de rótulo para tecnologias assistivas (por exemplo, usando aria-label).

Layout

Como o Bootstrap se aplica display: block e width: 100% a quase todos os nossos controles de formulário , os formulários serão empilhados verticalmente por padrão. Classes adicionais podem ser usadas para variar esse layout por formulário.

Grupos de formulários

A classe .form-group é a maneira mais fácil para adicionar alguma estrutura aos formulários. Ele fornece uma classe flexível que incentiva o agrupamento adequado de rótulos, controles, texto de ajuda opcional e mensagens de validação de formulário. Por padrão, ele se aplica apenas margin-bottom, mas seleciona estilos adicionais em .form-inline conforme necessário. Use-o com <fieldset> s, <div> s ou quase qualquer outro elemento.

Grade de formulário

Formulários mais complexos podem ser construídos usando nossas classes de grade. Use-os para layouts de formulário que requerem várias colunas, larguras variadas e opções de alinhamento adicionais.

Linha do formulário

Você também pode trocar .row por .form-row, uma variação de nossa linha de grade padrão que substitui as calhas de coluna padrão para layouts mais estreitos e compactos.

Layouts mais complexos também podem ser criados com o sistema de grade.

Forma horizontal

Crie formas horizontais com a grade adicionando a classe .row para formar grupos e usando o .col-*-* classes para especificar a largura de seus rótulos e controles. Certifique-se de adicionar .col-form-label aos seus <label> s também para que eles sejam centralizados verticalmente com os controles de formulário associados.

Às vezes, talvez você precise usar utilitários de margem ou preenchimento para criar o alinhamento perfeito de que precisa. Por exemplo, removemos o padding-top em nosso rótulo de entradas de rádio empilhadas para alinhar melhor a linha de base do texto.

Rótulo de forma horizontal sizing

Dimensionamento da coluna

Conforme mostrado nos exemplos anteriores, nosso sistema de grade permite que você coloque qualquer número de .col s dentro de um .row ou .form-row. Eles dividirão a largura disponível igualmente entre eles. Você também pode escolher um subconjunto de colunas para ocupar mais ou menos espaço, enquanto os .col s restantes dividem igualmente o resto, com classes de coluna específicas como .col-7.

Dimensionamento automático

O exemplo abaixo usa um utilitário flexbox para centralizar verticalmente o conteúdo e altera .col para .col-auto para que suas colunas ocupem apenas o espaço necessário. Colocando de outra forma, a coluna se dimensiona com base no conteúdo.

Você pode então remixar isso mais uma vez com classes de coluna de tamanho específico.

E, claro, os controles de formulário personalizados são suportados.

Formulários embutidos

Use o .form-inline classe para exibir uma série de rótulos, controles de formulário e botões em uma única linha horizontal. Os controles de formulário em formulários embutidos variam um pouco de seus estados padrão.

• Os controles são display: flex, reduzindo qualquer espaço em branco HTML e permitindo que você forneça controle de alinhamento com utilitários de espaçamento e flexbox.
• Os controles e grupos de entrada recebem width: auto para substituir o padrão do Bootstrap width: 100%.
• Os controles só aparecem embutidos em janelas de visualização com pelo menos 576 px de largura para compensar janelas de visualização estreitas em dispositivos móveis.

Você pode precisar lidar manualmente com a largura e o alinhamento de controles de formulário individuais com utilitários de espaçamento (conforme mostrado abaixo). Por último, certifique-se de sempre incluir um <label> com cada controle de formulário, mesmo se você precisar ocultá-lo de visitantes que não leem tela com .sr-only .

Controles e seleções de formulários personalizados também são suportados.

Texto de ajuda

O texto de ajuda em nível de bloco em formulários pode ser criado usando .form-text (anteriormente conhecido como .help-block na v3). O texto de ajuda embutido pode ser implementado de maneira flexível usando qualquer elemento HTML embutido e classes de utilitário como .text-muted.

O texto de ajuda abaixo das entradas pode ser estilizado com .form-text. Esta classe inclui display: block e adiciona uma margem superior para facilitar o espaçamento das entradas acima.

O texto embutido pode usar qualquer elemento HTML embutido típico (seja um <small>, <span> ou qualquer outro) com nada mais do que uma classe de utilitário.

Formulários desativados

Adicione o disabled atributo booleano em uma entrada para evitar interações do usuário e fazê-lo aparecer mais leve.

Adicione o disabled atributo para um <fieldset> para desativar todos os controles dentro.

Validação

Forneça feedback valioso e acionável para seus usuários com validação de formulário HTML5 – disponível em todos os nossos navegadores suportados. Escolha a partir do feedback de validação padrão do navegador ou implemente mensagens personalizadas com nossas classes integradas e JavaScript inicial.

Como funciona

Veja como a validação de formulário funciona com Bootstrap:

• A validação de formulário HTML é aplicada por meio de duas pseudo classes do CSS, :invalid e :valid. Aplica-se aos elementos <input>, <select> e <textarea>.
• O bootstrap define os estilos :invalid e :valid para a classe .was-validated, geralmente aplicada à classe <form>. Caso contrário, qualquer campo obrigatório sem um valor aparecerá como inválido no carregamento da página. Dessa forma, você pode escolher quando ativá-los (normalmente após a tentativa de envio do formulário).
• Como alternativa, .is-invalid e .is-valid classes podem ser usadas em vez das pseudo-classes para validação do lado do servidor. Eles não exigem uma .was-validated classe pai.
• Devido às restrições de funcionamento do CSS, não podemos (no momento) aplicar estilos a <label> que vem antes de um controle de formulário no DOM sem a ajuda de JavaScript personalizado.
• Todos os navegadores modernos suportam a API de validação de restrição, uma série de métodos JavaScript para validar controles de formulário.
• As mensagens de feedback podem utilizar os padrões do navegador (diferentes para cada navegador e não estilizados via CSS) ou nossos estilos de feedback personalizados com HTML e CSS adicionais.
• Você pode fornecer mensagens de validade personalizadas com setCustomValidity em JavaScript.

Com isso em mente, considere as seguintes demos para nossos estilos de validação de formulário personalizado, classes opcionais do lado do servidor e padrões do navegador.

Estilos personalizados

Para mensagens de validação do formulário Bootstrap personalizado, você precisará adicionar o novalidate atributo booleano ao seu <form>. Isso desativa as dicas de ferramentas de feedback padrão do navegador, mas ainda fornece acesso às APIs de validação de formulário em JavaScript. Tente enviar o formulário abaixo; nosso JavaScript interceptará o botão de envio e retransmitirá feedback para você.

Ao tentar enviar, você verá :invalid e :valid estilos aplicados aos controles do formulário.

Padrões do navegador

Não está interessado em mensagens de feedback de validação personalizada ou em escrever JavaScript para alterar o comportamento do formulário? Tudo bem, você pode usar os padrões do navegador. Tente enviar o formulário abaixo. Dependendo do seu navegador e sistema operacional, você verá um estilo ligeiramente diferente de feedback.

Embora esses estilos de feedback não possam ser estilizados com CSS, você ainda pode personalizar o texto do feedback por meio de JavaScript.

Lado do servidor

Recomendamos o uso da validação do lado do cliente, mas caso você precise do lado do servidor, pode indicar campos de formulário inválidos e válidos com .is-invalid e .is-valid. Observe que .invalid-feedback também é compatível com essas classes.

Elementos suportados

Nossos formulários de exemplo mostram <input> s acima, mas estilos de validação de formulário estão disponíveis para nossos controles de formulário personalizados também.

Dicas de ferramentas

Se o layout do formulário permitir, você pode trocar as .{valid|invalid}-feedback classes para .{valid|invalid}-tooltip classes para exibir feedback de validação em uma dica de ferramenta estilizada. Certifique-se de ter um pai com position: relative nele para o posicionamento da dica de ferramenta. No exemplo abaixo, nossas classes de coluna já têm isso, mas seu projeto pode exigir uma configuração alternativa.

Formulários personalizados

Para ainda mais personalização e cruzamento consistência do navegador, use nossos elementos de formulário totalmente personalizados para substituir os padrões do navegador. Eles são construídos com base na marcação semântica e acessível, portanto, são substitutos sólidos para qualquer controle de formulário padrão.

Caixas de seleção e rádios

Cada caixa de seleção e rádio é embrulhado em um <div> com um irmão <span> para criar nosso controle personalizado e um <label> para o texto que o acompanha. Estruturalmente, esta é a mesma abordagem que nosso .form-check padrão.

Usamos o seletor irmão (~) para todos os nossos <input> estados – como :checked – para definir o estilo adequado de nosso indicador de formulário personalizado. Quando combinado com a classe .custom-control-label, também podemos estilizar o texto de cada item com base no estado de <input>.

Ocultamos o <input> padrão com opacity e usamos o .custom-control-label para construir um novo indicador de formulário personalizado em seu lugar com ::before e ::after. Infelizmente, não podemos construir um personalizado apenas a partir do <input> porque content do CSS não funciona nesse elemento.

Nos estados marcados, usamos ícones SVG incorporados em base64 do Open Iconic. Isso nos fornece o melhor controle de estilo e posicionamento em navegadores e dispositivos.

Caixas de seleção

Caixas de seleção personalizadas também pode utilizar a :indeterminate pseudo classe quando configurada manualmente via JavaScript (não há atributo HTML disponível para especificá-lo).

Se você estiver usando jQuery, algo assim deve bastar:

Rádios

Inline

Desativado

Caixas de seleção e rádios personalizados também podem ser desabilitados. Adicione o disabled atributo booleano ao <input> e o indicador personalizado e a descrição do rótulo serão estilizados automaticamente.

Selecione o menu

Personalizado <select> menus precisam apenas de uma classe personalizada, .custom-select para acionar os estilos personalizados.

Você também pode escolher entre seleções personalizadas pequenas e grandes para corresponder às nossas entradas de texto de tamanho semelhante.

O atributo multiple também é compatível:

Assim como o size atributo:

Navegador de arquivos

A entrada do arquivo é a mais complicada do grupo e requer JavaScript adicional se desejar conectá-los com Escolher arquivo funcional … e texto do nome do arquivo selecionado.

Ocultamos o arquivo padrão <input> por meio de e, em vez disso, estilize o <label>. O botão é gerado e posicionado com ::after. Por último, declaramos width e height no <input> para espaçamento adequado para o conteúdo circundante .

Traduzindo ou personalizando as strings

A :lang() pseudo-classe é usada para permitir a tradução do texto “Navegar” para outro idiomas. Substitua ou adicione entradas à variável $custom-file-text Sass com a tag de idioma relevante e strings localizadas. As strings em inglês podem ser personalizadas da mesma maneira.Por exemplo, pode-se adicionar uma tradução para o espanhol (o código do idioma do espanhol é es):

Aqui está lang(es) em ação na entrada de arquivo personalizado para uma tradução em espanhol:

Você precisará definir o idioma do seu documento (ou sua subárvore) corretamente para que o texto correto seja mostrado. Isso pode ser feito usando o atributo lang no elemento <html> ou o Content-Language cabeçalho HTTP , entre outros métodos.