O Bootstrap facilita a criação de formulários atraentes e adaptáveis ao oferecer uma coleção de classes e componentes de controle de formulário. Essas classes de controle de formulário podem ser utilizadas para estilizar campos de entrada, caixas de seleção, botões de opção, seletores, menus suspensos e áreas de texto de forma consistente em todo o site.

Classes Comuns de Controle de Formulário

classe form-control

Esta classe é utilizada para estilizar diversos elementos de formulário, incluindo campos de entrada, áreas de texto e menus suspensos de seleção. Quando aplicada, garante que os elementos do formulário sejam responsivos e visualmente consistentes em diferentes dispositivos e tamanhos de tela.

Principais características da classe form-control

• Design Responsivo: Elementos de formulário estilizados com form-control ajustam automaticamente sua largura para preencher o espaço disponível em seu contêiner;
• Estilização Uniforme: Ao aplicar form-control, os elementos do formulário recebem uma estilização consistente, incluindo bordas, preenchimento e propriedades de fonte;
• Estados de Foco e Hover: form-control fornece feedback visual aos usuários ao alterar a aparência dos elementos do formulário quando estão em foco ou quando o cursor passa sobre eles.

classes form-check

• form-check: Esta classe estiliza os campos de seleção (checkbox) e botões de opção (radio) para exibi-los em linha e aplicar uma estilização consistente;
• form-check-input: Aplicada aos elementos de entrada de checkbox e radio dentro de um contêiner form-check. Esta classe garante a estilização consistente dos elementos de entrada;
• form-check-label: Utilizada para estilizar o rótulo associado aos campos de seleção e botões de opção. Garante a estilização consistente dos rótulos e ajuda a manter o alinhamento com os respectivos elementos de entrada.

Sistema de Grid para Layout de Formulários

O sistema de grid do Bootstrap oferece uma ferramenta poderosa para organizar elementos de formulários em layouts de múltiplas colunas. Ao utilizar classes de grid como col-md-6, col-lg-4 e outras, é possível dispor os elementos do formulário em layouts responsivos e flexíveis, que se adaptam perfeitamente a diferentes tamanhos de tela e dispositivos.

Principais características:

• Colunas Responsivas: As classes de grid permitem definir a largura dos elementos do formulário em diferentes pontos de interrupção. Por exemplo, col-md-6 especifica que a coluna deve ocupar metade da largura do contêiner em telas médias e maiores. Da mesma forma, col-lg-4 define uma largura de um terço em telas grandes;
• Flexibilidade: É possível combinar diferentes classes de grid para criar layouts de formulário complexos;
• Otimizado para Dispositivos Móveis: O sistema de grid do Bootstrap é desenvolvido com foco em dispositivos móveis, garantindo que os layouts de formulários tenham boa aparência em telas menores por padrão.

Resultado do comportamento do grid responsivo do formulário

Estilos de Validação de Formulário

Os estilos de validação de formulário fornecem feedback visual aos usuários sobre a validade de suas entradas. Esses estilos incluem indicadores para estados de sucesso, erro e aviso, facilitando o entendimento dos usuários sobre o cumprimento dos critérios exigidos.

No exemplo fornecido:

• A classe needs-validation é adicionada para habilitar os estilos de validação do Bootstrap;
• O atributo novalidate é utilizado para desabilitar a validação nativa do navegador;
• O campo de entrada para o endereço de e-mail possui o atributo required, tornando-o obrigatório;
• As classes valid-feedback e invalid-feedback são usadas para fornecer mensagens de retorno para entradas válidas e inválidas, respectivamente;
• Além disso, JavaScript é utilizado para impedir o envio do formulário caso existam campos inválidos e para aplicar a classe was-validated ao formulário.