Bootstrap Forms (Português)

neste tutorial você aprenderá como criar formas elegantes com Bootstrap.

criar formulários com Bootstrap

formas HTML são parte integrante das páginas web e aplicações, mas criar as formas ou estilo o formulário controla manualmente um a um usando CSS são muitas vezes chato e tedioso., O Bootstrap simplifica grandemente o processo de estilização e alinhamento dos controles de forma, como etiquetas, campos de entrada, seletboxes, áreas de texto, botões, etc. através de um conjunto predefinido de classes.

Bootstrap oferece três tipos diferentes de forma layouts:

• Forma Vertical (padrão de layout do formulário)
• Horizontal Formulário
• Inline Formulário

A secção seguinte irá dar a você a visão detalhada de todos estes formulário de layouts, bem como os diversos formulário relacionadas Bootstrap componentes, um por um. Vamos começar.,

criando a disposição Vertical da forma

esta é a disposição predefinida da forma de Bootstrap na qual os estilos são aplicados aos comandos da forma sem adicionar qualquer classe de base ao elemento <form> ou quaisquer grandes alterações na formatação.

os controlos do formulário nesta disposição estão empilhados com etiquetas alinhadas com a esquerda no topo.,

— A saída do exemplo acima será algo parecido com isso:

criando a Disposição Horizontal Da Forma

Pode também criar formas horizontais onde as legendas e os comandos da forma estão alinhados lado a lado, usando as classes de grelha de arranque. Para criar um formato horizontal, adicione a classe .row nos grupos de formulários e use o .col-*-* classes de grelha para especificar a largura das suas legendas e controlos.

também, não se esqueça de aplicar a classe .col-form-label no<label> elementos, de modo que eles estão centrados verticalmente com seus controles de forma associados., Vamos ver um exemplo:

— A saída do exemplo acima será algo parecido com isso:

Criar Inline Layout de Formulário

às Vezes, você pode querer exibir uma série de rótulos, controlos de formulário, e botões em uma única linha horizontal para compactar o layout. Você pode fazer isso facilmente adicionando a classe .form-inline <form> elemento. No entanto, os controlos de formulários só aparecem em linha em relatórios de visualização que têm pelo menos 576px de largura.,

Vamos dar uma olhada no exemplo seguinte para ver como ele realmente funciona:

— A saída do exemplo acima será algo parecido com isso:

confira a secção de excertos para exemplos de algumas formas de Bootstrap lindamente desenhadas.

a criação do controlo estático da forma

pode haver uma situação em que você só quer mostrar um valor de texto simples ao lado de uma legenda do formulário em vez de um controlo da forma de trabalho. Você pode fazer isso facilmente substituir a classe .form-control com o .form-control-plaintext e aplicar o atributo readonly.,

A classe .form-control-plaintext remove o estilo padrão do campo form, mas preserva a margem e o estofamento corretos. Vamos dar uma olhada em um exemplo:

— A saída do exemplo acima será algo parecido com isso:

a Colocação de Caixas de seleção e Rádios

Caixas de seleção e botões de rádio podem ser colocados empilhados ou inline.

Caixas de controlo empilhadas e rádios

para colocar as caixas de controlo ou os botões de rádio empilhados verticalmente., linha por linha, basta envolver todos os controles em um grupo de formulário e aplicar a classe .d-block em cada <label>. Além disso, a margem classes de utilitário para o espaçamento adequado, como mostrado no exemplo a seguir:

Inline Caixas de seleção e Rádios

no Entanto, para colocá-los inline i.e. lado-a-lado, apenas coloque todos os controlos de formulário em um formulário de grupo e utilização de margem de classes de utilitário para garantir o espaçamento adequado. No need to use the .d-block class on the <label> element in this case., Vamos ver o exemplo a seguir:

a Criação de Deficiência de Controles de Formulário

Para desativar individual controlos de formulário, como <input> <textarea> <select> basta adicionar os atributos de disabled para eles e Bootstrap irá fazer o resto.,ll algo parecido com isso:

no Entanto, se você deseja desabilitar todos os controles dentro de uma <form> uma vez colocá-los dentro de uma <fieldset> elemento e aplicar o atributo, como mostrado no exemplo a seguir:

— A saída do exemplo acima será algo parecido com isso:

a Criação de Readonly Entradas

Você também pode adicionar o readonly atributo booleano entrada ou textarea para impedir a modificação do seu valor., As entradas apenas para leitura aparecem em fundo mais leve (tal como as entradas desactivadas), mas mantêm o cursor de texto normal. Confira o exemplo a seguir para ver como funciona:

— A saída do exemplo acima será algo parecido com isso:

Coluna de Dimensionamento de Entradas, Textareas e Caixas de seleção

Você também pode combinar com o tamanho de seus controles de formulário de Inicialização grade de tamanhos de coluna. Apenas embrulhe os controlos do seu formulário (i.e., <input> <textarea> e <select>) em colunas de grade, ou qualquer elemento personalizado e de aplicar a grade de aulas, como mostrado no exemplo a seguir:

dimensionamento em altura das Entradas e seleccionar as caixas

pode alterar facilmente a altura da sua entrada de texto e seleccionar as caixas para corresponder aos tamanhos dos botões. Utilize o formulário de controle de altura de dimensionamento de classes, como .form-control-lg .form-control-sm no <input> e <select> caixas de criar é maior ou menor tamanhos.

colocar o texto da Ajuda em torno dos controlos do formulário

colocar o texto da Ajuda para os controlos do formulário de uma forma eficiente para orientar os utilizadores a introduzir os dados correctos num formulário., Você pode colocar o texto de Ajuda ao nível do bloco para um controlo do formulário usando a classe .form-text. O texto de Ajuda em bloco é normalmente mostrado na parte inferior do controle. Aqui está um exemplo:

— A saída do exemplo acima será algo parecido com isso:

da mesma forma, você também pode colocar inline texto de ajuda usando o <small> elemento. Não é necessário usar .form-text neste caso., O exemplo a seguir mostra como implementar esta:

— A saída do exemplo acima será algo parecido com isso:

Bootstrap de Validação de Formulário

Bootstrap 4 fornece uma maneira fácil e rápida para validar formulários da web do lado do cliente. Ele usa a API de validação do formulário nativo do navegador para validar o formulário. Os estilos de validação da forma são aplicados via CSS :invalid e :valid pseudo-classes. Aplica-se <input> <select> e <textarea> elementos.,

Vamos ver o seguinte exemplo para ver como ele realmente funciona:

Aqui está o código JavaScript personalizado que mostra mensagens de erro e desactiva a submissão do formulário se existirem campos inválidos., Veja o capítulo de encerramento de JavaScript para aprender sobre a função de auto-execução.

— A saída do exemplo acima será algo parecido com isso:

Se necessitar de validação do lado do servidor, poderá indicar campos de formulários inválidos e válidos com o .is-invalid e .is-valid. O .invalid-feedbacke.valid-feedback também são suportados com estas classes., Experimente o seguinte exemplo para ver como funciona:

— A saída do exemplo acima será parecido com este:

como alternativa, Você pode trocar o .{valid|invalid}-feedback classes de .{valid|invalid}-tooltip classes para apresentar a validação de comentários de texto em uma dica de ferramenta de estilo.

Also, be sure to apply the style position: relative or class .position-relative on the parent element for proper feedback tooltip positioning., Aqui está um exemplo:

— A saída do exemplo acima será algo parecido com isso:

controlos de formulários suportados em Bootstrap

Bootstrap inclui suporte para todos os controlos de formulários HTML padrão, bem como novos tipos de entrada HTML5, tais como datetime, número, email, url, pesquisa, gama, cor, url, e assim por diante. O exemplo seguinte irá mostrar-lhe as utilizações dos controlos do formulário padrão com Bootstrap.