Forms (Português)

Examples and usage guidelines for for form control styles, layout options, and custom components for creating a wide variety of forms.

Overview

Bootstrap ‘ s form controls expand on our Reboted form styles with classes. Use estas classes para optar por seus displays personalizados para uma renderização mais consistente entre navegadores e dispositivos.

certifique-se de que utiliza um atributo

em todas as entradas (por exemplo:,,emailpara endereço de E-mail ounumberpara informação numérica) para tirar vantagem de novos controles de entrada como verificação de E-mail, seleção de Números, e muito mais.

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

controles de Formulário

certifique-se de explorar nossos formulários personalizados para mais de estilo <select>s.

Para o arquivo de entradas, trocar o .form-control para .form-control-file.,

Dimensionamento

Definir alturas, utilizando classes, como .form-control-lg e .form-control-sm.

Readonly

Add the readonly Boolean attribute on an input to prevent modification of the input’s value. As entradas apenas para leitura aparecem mais leves (tal como as entradas desactivadas), mas mantêm o cursor padrão.,

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

só de Leitura de texto simples

Se você deseja ter <input readonly> elementos em sua forma elaborada como texto sem formatação, use o .form-control-plaintext classe para remover o padrão de campo de formulário de estilo e preservar o correto margin e padding.

as entradas da Gama

definem horizontalmente as entradas da Gama de posicionamento usando .form-control-range.,

Checkboxes e rádios

checkboxes e rádios padrão são melhorados com a ajuda de.form-check, uma única classe para ambos os tipos de entrada que melhora a disposição e o comportamento de seus elementos HTML. Checkboxes são para selecionar uma ou várias opções em uma lista, enquanto Rádios são para selecionar uma opção de muitas.

checkboxes e rádios desativados são suportados. O atributo disabled irá aplicar uma cor mais clara para ajudar a indicar o estado da entrada.,

Checkboxes e rádios são construídos para suportar a validação do formulário baseado em HTML e fornecer etiquetas concisas e acessíveis. Como tal, o nosso <input>s e <label>s são colateral elementos em oposição a uma <input> dentro de <label>. Isso é um pouco mais detalhado de como você deve especificar id e for atributos para se relacionar com o <input> e <label>.,

Default (empilhado)

por padrão, qualquer número de checkboxes e rádios que são irmãos imediatos serão empilhados verticalmente e adequadamente espaçados com .form-check.

Linha

o Grupo de caixas de verificação ou rádios na mesma linha horizontal adicionando .form-check-inline para qualquer .form-check.,

Sem etiquetas

Adicionar .position-static entradas, dentro de .form-check que não tem qualquer texto do rótulo. Lembre – se de ainda fornecer alguma forma de etiqueta para tecnologias de assistência (por exemplo, usando aria-label).,

Layout

Desde Bootstrap aplica-se display: block e width: 100% para quase todos os nossos controles de formulário, formulários por padrão pilha vertical. Classes adicionais podem ser usadas para variar este layout em uma base por formulário.

forma grupos

o .form-group classe é a maneira mais fácil de adicionar alguma estrutura às formas. Ele fornece uma classe flexível que incentiva o agrupamento adequado de etiquetas, controles, texto de Ajuda opcional, e mensagem de validação do formulário., Por padrão, ele só se aplica margin-bottom, mas ele pega estilos adicionais no .form-inline conforme necessário. Use it with <fieldset>s, <div>s, or nearly any other element.

grelha de forma

formas mais complexas podem ser construídas usando as nossas classes de grelha. Use estes para formatos que requerem múltiplas colunas, larguras variadas e opções adicionais de alinhamento.,

Formulário de linha

Você pode igualmente trocar .row para .form-row, uma variação do nosso padrão de grade de linha, que substitui o padrão da coluna, calhas para mais apertado e mais layouts compactos.

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

Horizontal formulário

Criar horizontal formas com a grade adicionando o .row classe a formar grupos e usando o .col-*-* classes para especificar a largura de seus rótulos e controles., Certifique-se de adicionar .col-form-label ao seu <label>s assim como eles estão centrados verticalmente com seus controles de forma associados.

às vezes, você talvez precise usar utilitários de margem ou preenchimento para criar o alinhamento perfeito que você precisa. Por exemplo, removemos o padding-top na nossa etiqueta de entrada de rádio empilhada para melhor alinhar a linha de base de texto.,

Horizontal rótulo do formulário de dimensionamento

dimensionamento de Colunas

Como mostrado nos exemplos anteriores, o nosso sistema de grelha permite que você coloque qualquer número de .cols dentro de uma .row ou .form-row. Vão dividir a largura disponível igualmente entre eles. Você também pode escolher um subconjunto de colunas ocupam mais ou menos espaço, enquanto o restante .cols dividido igualmente o resto, com coluna específica classes, como .col-7.,

Auto-dimensionamento

O exemplo a seguir utiliza um flexbox utilitário verticalmente centro o conteúdo e as alterações .col .col-auto, de modo que as suas colunas apenas como espaço necessário. Dito de outra forma, a coluna se dimensiona com base no conteúdo.

você pode então remisturar isso mais uma vez com classes de coluna específicas de tamanho.

e, claro, são suportados os controlos de formulários personalizados.,

inline forms

Use the.form-inline class to display a series of labels, form controls, and buttons on a single horizontal row. Os controles de formulários dentro de formulários inline variam ligeiramente de seus Estados padrão.

• Os controlos são display: flex, colapsando qualquer espaço em branco HTML e permitindo-lhe fornecer o controlo de alinhamento com utilitários de espaçamento e flexbox.
• controles e grupos de entrada recebem width: autopara substituir o Bootstrap default width: 100%.,os controles de
• só aparecem em linha em verports que têm pelo menos 576px de largura para dar conta de vistas estreitas em dispositivos móveis.

poderá ter de abordar manualmente a largura e o alinhamento dos controlos de formulários individuais com os utilitários de espaçamento (como mostrado abaixo). Por último, certifique-se de incluir sempre um <label> com cada controle de formulário, mesmo que você precise escondê-lo de visitantes não-screenreader com .sr-only.

controlos e selecções personalizados também são suportados.,

Help text

Block-level help text in forms can be created using .form-text (previously known as .help-block in v3). O texto de Ajuda Inline pode ser implementado de forma flexível usando qualquer elemento HTML inline e classes de utilitários como .text-muted.,

o texto de Ajuda abaixo das entradas pode ser estilizado com .form-text. Esta classe inclui display: block e acrescenta alguma margem superior para um espaçamento fácil a partir das entradas acima.,

inline text can use any typical inline HTML element (be it a <small>, <span>, or something else) with nothing more than a utility class.

formas desactivadas

adicione o atributodisabled booleano numa entrada para prevenir interacções com o utilizador e fazê-lo parecer mais leve.,

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

Adicionar disabled atributo para uma <fieldset> para desabilitar todos os controles dentro.

validação

fornecer feedback valioso e accionável aos seus utilizadores com validação do 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 as nossas classes incorporadas e iniciador JavaScript.,

How it works

Aqui está como a validação do formulário funciona com Bootstrap:

• A validação do formulário HTML é aplicada através das duas pseudo-classes do CSS, e:valid. Aplica-se <input> <select> e <textarea> elementos.,
• Bootstrap escopos :invalid e :valid estilos de pai .was-validated classe, geralmente aplicado para o <form>. Caso contrário, qualquer campo necessário sem um valor aparece como inválido na carga de página. Desta forma, você pode escolher quando ativá-los (normalmente após a submissão do formulário é tentado).
• para reiniciar a aparência do formulário (por exemplo, no caso de envios de formulário dinâmico usando AJAX), remova o .was-validated classe do <form> novamente após a submissão.,
• Como alternativa,.is-invalid e.is-valid podem ser utilizadas classes em vez das pseudo-classes para validação do lado do servidor. Eles não necessitam de uma classe .was-validated pai.
• devido a restrições em como CSS funciona, nós não podemos (atualmente) aplicar estilos a um <label> que vem antes de um controle de forma no DOM sem a ajuda de Javascript personalizado.
• todos os navegadores modernos suportam a API de validação de Restrições, uma série de métodos JavaScript para validar controles de formulários.,
• mensagens de Feedback podem utilizar as predefinições do navegador (diferentes para cada navegador, e imparáveis via CSS) ou os nossos estilos de feedback personalizado com HTML e CSS adicionais.
• Pode fornecer mensagens de validade personalizadas com setCustomValidity em JavaScript.

com isso em mente, considere as seguintes demos para os nossos estilos de validação de formulários personalizados, classes opcionais do lado do servidor e predefinições do navegador.,

estilos personalizados

para mensagens personalizadas de validação do formulário Bootstrap, terá de adicionar o novalidate atributo booleano ao seu <form>. Isto desactiva as dicas de feedback padrão do navegador, mas ainda fornece acesso à APIs de validação do formulário em JavaScript. Tente enviar o formulário abaixo; nosso JavaScript irá interceptar o botão enviar e transmitir o feedback para você. Ao tentar enviar, você verá os estilos e :valid aplicados aos controlos da sua forma.,

estilos de feedback personalizados aplicam cores personalizadas, contornos, estilos de foco e ícones de fundo para melhor comunicar feedback. Fundo ícones para <select>s só estão disponíveis com o .custom-select, e não .form-control.

os valores por omissão do navegador

não estão interessados em mensagens personalizadas de feedback de validação ou em escrever JavaScript para alterar comportamentos de forma? Tudo bem, você pode usar os padrões do navegador. Tente enviar o formulário abaixo. Dependendo do seu navegador e SO, você verá um estilo ligeiramente diferente de feedback.,

embora estes estilos de feedback não possam ser definidos com CSS, você ainda pode personalizar o texto de feedback através de JavaScript.

do lado do Servidor

Nós recomendamos o uso de validação do lado do cliente, mas no caso de você precisar de validação do lado do servidor, você pode indicar inválido válido e campos de formulário com .is-invalid e .is-valid. Note que .invalid-feedback também é suportado com estas classes.,

Suporte para elementos

Validação de estilos estão disponíveis para os seguintes controles de formulário e componentes:

Dicas

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

personalizar

estados de validação podem ser personalizados via Sass com o $form-validation-states mapa. Localizado em nosso arquivo _variables.scss, este mapa Sass é looped sobre para gerar o padrão valid/invalid estados de validação. Incluído é um mapa aninhado para personalizar a cor e ícone de cada Estado. Enquanto nenhum outro estado é suportado por navegadores, aqueles que usam estilos personalizados podem facilmente adicionar feedback de forma mais complexa.,

Por Favor note que não recomendamos personalizar estes valores sem também modificar o form-validation-state mixin.

formas personalizadas

para ainda mais personalização e consistência cruzada do navegador, use os nossos elementos de forma completamente personalizada para substituir as predefinições do navegador. Eles são construídos em cima de uma marca semântica e acessível, então eles são substitutos sólidos para qualquer controle de forma padrão.,

Caixas de seleção e rádios

Cada caixa de seleção e de rádio <input> e <label> emparelhamento é envolto em uma <div> para criar o nosso controle personalizado. Estruturalmente, esta é a mesma abordagem que nosso padrão .form-check.

usamos o selector de irmãos (~) para todo o nosso<input> estados—como:checked—para ajustar adequadamente o nosso indicador de forma personalizada., Quando combinado com a classe .custom-control-label, também podemos estilo o texto para cada item baseado no estado de <input>‘S.

Nós ocultar o padrão <input> com opacity e usar o .custom-control-label para criar um novo formulário personalizado do indicador em seu lugar com ::before e ::after. Infelizmente não podemos construir um personalizado a partir apenas do <input>porque o CSS’scontent não funciona nesse elemento.,

nos Estados assinalados, usamos ícones SVG embutidos do base64 do Open Iconic. Isso nos fornece o melhor controle para o estilo e posicionamento através de navegadores e dispositivos.

Checkboxes

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

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

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

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

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