Formulários de bootstrap | Explicado

Os formulários de bootstrap são uma parte crucial de qualquer aplicação. Eles permitem a interação do usuário e a entrada no sistema. Várias classes de bootstrap fornecem controles de formulário pré-projetados e opções de estilo para criar formulários responsivos e limpos. Mais especificamente, os formulários de bootstrap consistem em vários elementos de formulário, como campos de texto, áreas de texto, botões de rádio, caixas selecionadas e muito mais.

Este artigo abordará:

• Como criar uma forma embutida no bootstrap?
• Como definir espaçamento em forma de embutimento?
• Como criar uma forma empilhada no bootstrap?
• Como criar um formulário usando linhas de grade?
• Como criar um formulário de layout compacto?
• Como criar uma forma horizontal?
• Como definir o dimensionamento do formulário?

Como criar uma forma embutida no bootstrap?

Os formulários embutidos são criados usando o “.Form-Inline" aula. Esta aula tem um CSS predefinido “mostrar”Propriedade com o valor“flex”Com outras propriedades.

Exemplo

Confira o exemplo que demonstra como criar um formulário embutido no bootstrap:

• Primeiro, adicione um “”Elemento com a classe“Form-Inline”.
• Dentro dele, adicione dois “”Elementos com o“grupo de formulários" aula.
• Cada elemento “” contém o “" e "”Elementos.
• Por fim, adicione um “”Elemento para criar um botão:

E-mail



Senha

Enviar

Saída

Como definir espaçamento em forma de embutimento?

Os utilitários de espaçamento de bootstrap ajustam o espaçamento de uma forma embutida. Esses incluem "ml-*”Para margem-esquerda,“senhor-*”Para a direita da margem e muito mais. O "*”Representa o tamanho.

Para uma demonstração prática, confira o exemplo abaixo.

Exemplo

No exemplo em andamento, adicione a classe “ML-2"Para o" "elemento. Ele gerará espaço à esquerda do rótulo:

E-mail



Senha

Enviar

Saída

Como criar uma forma empilhada no bootstrap?

Os formulários empilhados se referem aos formulários verticais. Este é um formulário padrão.

Confira o exemplo abaixo.

Exemplo

Siga as instruções fornecidas para criar um formulário vertical:

• Adicione um “" elemento.
• Dentro dele, adicione um “”Tag e atribua uma classe“ Form-Group ”.
• Este elemento “” contém o “" e "”Elementos. Você pode adicionar os elementos do formulário de acordo com suas preferências.
• No final, adicione um “”Para o formulário:

E-mail



Senha

Enviar

Saída

Como criar um formulário usando linhas de grade?

Para fazer um formulário usando a grade de bootstrap é muito simples. Primeiro, especifique uma linha e crie colunas para as entradas de formulário dentro dele.

Analise o exemplo abaixo.

Exemplo

Siga as instruções para criar um formulário usando o Bootstrap Grid:

• Adicione um “" elemento.
• Dentro dele, adicione um “”Contêiner com a classe“ linha ”.
• Dentro deste “linha“Container, especifique mais dois“ ”elementos com a classe“ Col ”.
• Adicione o "<rótulo> "E"<entrada> ”Elementos dentro de cada elemento“ ”

Nome



E-mail

Saída

Como criar um formulário de layout compacto?

Para layouts compactos e mais apertados, o “forma de forma”A classe é utilizada em vez da“linha" aula:

Nome



E-mail

Saída

Como criar uma forma horizontal?

As formas horizontais são criadas usando o “linha" e "Col-*-*" Aulas. O "linha”Classe especifica uma linha e as classes“ col-*-*”definem a largura de rótulos e controles, como“COL-SM-2","COL-MD-6" ou mais. O “Col-Formulário” também deve ser adicionado ao elemento “”.

Exemplo

Para criar uma forma horizontal, experimente as instruções dadas:

• Primeiro, adicione um “" elemento.
• Dentro dele, adicione um “”Elemento com as classes“grupo de formulários" e "linha”.
• Especifique os grupos de formulários neste “" elemento. No nosso caso, o “" e a "”Os elementos são especificados.
• O "”O elemento é colocado dentro de outro“"Tendo aula"COL-SM-6”. Ele especificará 6 colunas de grade para o “" elemento:

Nome





Endereço




Enviar

Saída

Como ajustar o dimensionamento da etiqueta do formulário?

O tamanho do “”O elemento pode ser ajustado facilmente usando o“Col-form-label-SM" e "Col-form-Label-LG”. O "Col-form-label-SM" tem um CSS predefinido "tamanho da fonte”Propriedade com o valor“0.875REM”Com outras propriedades. O "Col-form-Label-LG" tem um CSS predefinido "tamanho da fonte”Propriedade com o valor“1.25REM”Com outras propriedades.

Exemplo

No exemplo em andamento, adicione o "Col-form-label-SM" ao primeiro elemento "" e "Col-form-lg-LG" ao segundo para ver a diferença:

Nome





Endereço




Enviar

Saída

Você aprendeu com sucesso sobre como criar formulários usando o bootstrap.

Conclusão

Bootstrap oferece um método simples para produzir formas responsivas e consistentes. Existem principalmente três tipos de formulários de bootstrap: formas embaladas, empilhadas e horizontais. Um formulário em linha é criado usando o “Form-Inline" aula. Para especificar estilos gerais para o grupo de controles de formulário, o “grupo de formulários”A classe é usada. Mais especificamente, existem várias classes que ajudam a ajustar o tamanho dos componentes do formulário, como "Col-SM-4", "Col-form-sm-sm" e muitos mais. Este artigo demonstrou como criar formulários usando o bootstrap.