Introdução ao Layout do Formulário de Bootstrap
HTML e CSS são os idiomas básicos para o design do formulário do site. Todos os modelos básicos criados por HTML, mas temos que projetar e criar um arquivo CSS exclusivo e necessário separadamente. Este método é complicado devido às referências de classe e identificação. Para superar todos os problemas nos arquivos HTML e CSS, é fornecido o bootstrap. Bootstrap é uma técnica avançada para web design. Para validação e formato exigido do formulário, o bootstrap possui classe própria para Textarea, entrada e outros controles, como controle de formulário, grupo de entrada, etc. Usando o layout do bootstrap, podemos decidir o formato do formulário. Podemos facilmente criar formatos de formulário verticais, horizontais e em linha usando o bootstrap.
Tipos de layout de formulário de inicialização
O layout do formulário de inicialização cria um tipo diferente de formulário. faz design e validação sem arquivos CSS e JavaScript. Devido ao layout do formulário, reduza mais códigos e complicações. O Bootstrap possui uma classe própria para superar todos os códigos CSS e JavaScript complexos.
O Bootstrap possui três tipos de layout de formulário.
- Forma vertical
- Forma horizontal
- Formulário em linha
Vamos ver esses três tipos em detalhes:
1. Forma Vertical
No layout de formulário vertical, os elementos de rótulo e texto são verticais e todos os grupos de formulários são verticais. O formulário vertical é o padrão no bootstrap. Não há regra adicional para o formato de formulário vertical.
2. Forma Horizontal
No layout de formulário horizontal, o rótulo e os elementos textuais são horizontais, mas todos os grupos de formulários são verticais . Adicione duas classes principais para o formulário horizontal.
Adicione a classe no elemento do formulário.
Adicione a classe nos elementos do rótulo.
3. Formulário em linha
No formato embutido, o rótulo e os elementos estão alinhados e alinhados à esquerda. A viewport tem pelo menos 768px de largura. Adicione uma classe para o formulário embutido.
Adicione a classe aos elementos do formulário.
O layout do formulário de inicialização possui alguma classe padrão para a convenção de formulário mencionada abaixo:
- .form-group: esta classe usada para espaçamento de formulários e vincula o rótulo. É flexível para vincular as mensagens de validação de formulário e muito mais para o formulário.
- . controle de formulário: Essa classe é usada para todos os elementos de texto e espaço para formulários, etc. É usada para todos os estilos, como tamanho, foco.
- .form-control-lg e .form-control-sm são usados para o tamanho do elemento de entrada grande e pequeno, respectivamente.
Elemento e classe suportados
Alguns elementos e classes suportados para validação de formulário do Bootstrap sem JavaScript. Facilita e supera a codificação de validação no servidor.
1) .form-control-file: Esta classe é usada para adicionar um arquivo como pdf, Docx, etc. em vez de usar a classe form-control, nos dados do arquivo em que esta classe está usando.
Exemplo:
2) Somente leitura: este é um atributo booleano usado para elementos de entrada. Nesse atributo, o usuário não pode modificar o valor e desativar o cursor para escrever.
Exemplo:
3) .form-control-plaintext: essa classe funciona como somente leitura, mas vem com margem e preenchimento corretos.
Exemplo:
Exemplo de layout de formulário de inicialização
Os exemplos fornecidos são dados abaixo:
1. Exemplo de formulário vertical (formulário padrão)
Name:
Email:
- O formulário vertical é simples e o padrão no bootstrap.
- O exemplo acima tem dois campos de entrada e um botão de login verticalmente com o rótulo.
- Usando apenas o grupo de formulários de classe e o controle de formulário de classe, o formulário vertical é criado.
- Você pode modificar o tamanho dos elementos de entrada sem ajustar o tamanho do arquivo CSS. O usuário precisa apenas de uma classe que seja .form-control-lg e .form-control-sm para tamanhos grandes e pequenos, respectivamente.
2. Exemplo de forma horizontal
class=”form-horizontal”>
Name:
Email:
- Usando a classe formulário horizontal, o usuário cria um formulário horizontal. O rótulo e o elemento de entrada estão embutidos, mas o grupo de formulários da classe é vertical. Classe "etiqueta de controle col-sm-2" e = "col-sm-10" usada para coluna dividida. Atribuição de duas colunas Para rótulo e Dez colunas atribuídas para elementos de entrada.
- Classe "col-sm-offset-2 col-sm-10" usada para o botão Login. O deslocamento usado para o espaço, col-sm-offset-2 usou espaços de duas colunas da esquerda em um formulário.
- Veja o exemplo de formulário horizontal e sua saída para entender o layout. O nome visto e o texto de entrada estão em uma linha e o email e os elementos em outra linha.
- Na tela grande e média, o formato da tela parece o layout horizontal, mas na tela pequena (767px e abaixo), a forma parece vertical.
- A forma horizontal é complicada usando o método tradicional, mas o layout da inicialização ajuda a facilitar o uso do controle de classe e rótulo.
3. Exemplo de formulário embutido
class=”form-inline”>
Name:
Email:
placeholder=”Enter email”>class=”form-inline”>
Name:
Email:
placeholder=”Enter email”>
- No formato embutido, todos os rótulos e elementos estão em uma linha. Todos os grupos de formulários estão em uma única linha. A classe formulário em linha é o padrão para esse layout. O usuário colocou esta classe dentro O formulário embutido usado mais para botões de opção, botões de verificação e assim por diante.
- Esse formulário funciona principalmente na janela de visualização de pelo menos 576px, depois mostra como o formulário padrão. No rótulo, classe sr-only usada. Esta classe é um leitor de tela, usado para ocultar o rótulo e mostra o único elemento.
- Se o elemento de entrada no formulário embutido, o usuário deverá vir com um espaço reservado em um elemento de entrada para reconhecer o elemento.
Conclusão - Bootstrap do layout
Para entender a tecnologia Bootstrap, o usuário precisa saber sobre HTML, CSS e JavaScript. O formulário de autoinicialização é a maneira mais fácil de trabalhar no formato padrão. Possui classes próprias para remover a codificação e não é necessário arquivo diferente de CSS e JavaScript. Usando o formulário Bootstrap, o usuário ganha velocidade na codificação e evitando o design e o estilo da codificação em bloco. O Bootstrap é uma estrutura para web design front-end que é leve e auto-implementada.
Artigos recomendados
Este é um guia para o Layout do formulário de inicialização. Aqui discutimos a introdução ao Layout do formulário do Bootstrap, juntamente com os tipos e exemplos. Você também pode consultar nossos outros artigos sugeridos para saber mais:
- Tipografia de Bootstrap
- Layout do Bootstrap
- Sistema de grade de inicialização
- Componentes do Bootstrap