CSS: Estilização e Validação de Formulários com Bootstrap 5

Conteudo

1 Passo 1: Como o Bootstrap Entra no Projeto (via CDN)
2 Passo 2: Documentando a Estrutura Base do Formulário
3 Passo 3: Documentando os Campos de Formulário – Detalhe por Detalhe
4 Passo 4: JavaScript de Validação do Bootstrap
5 Resultado Final: O Formulário Completo – Uma Visão Geral
6 Conclusão
7 Referencia

Neste tutorial, guiaremos você passo a passo na criação e estilizaçaõ de um formulário HTML completo, estilizado e validado utilizando as classes do Bootstrap 5. Exploraremos não apenas a estrutura HTML, mas também como as classes e componentes do framework transformam o design e a funcionalidade do formulário, tornando-o responsivo, atraente e funcional.

Nosso objetivo é ajudá-lo a entender cada detalhe, desde a inclusão do Bootstrap no projeto até a personalização de cada elemento do formulário. Ao final, você estará apto a criar formulários modernos e eficientes, além de compreender como o Bootstrap facilita o desenvolvimento de interfaces profissionais.

Se precisar de uma introdução sobre a estilização com CSS puro de formulários HTML e seus principais elementos, confira este artigo complementar: Veja também o tutorial anterior sobre como estilizar formulários e seus atributos em CSS puro

Se preciar de um intrudoção sobre a estrutura dos formulários HTML e seus principais elementos e atributos, confira este artigo complementar: Como estruturar elementos e atributos de um formulário HTML

Passo 1: Como o Bootstrap Entra no Projeto (via CDN)

Os arquivo Bootstrap podem ser usando de duas forma basicamente, baixando os arquivos para o seu projeto ou através de um CDN (Content Delivery Network).

O que é um CDN? Pense em um CDN como uma rede global de super-servidores. Quando alguém acessa sua página, o CDN entrega os arquivos do Bootstrap do servidor mais próximo ao usuário, o que faz sua página carregar mais rápido.

Como incluímos o Bootstrap no seu HTML:

Basicamente, você adiciona algumas linhas no seu arquivo HTML, conforme abaixo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulário de Exemplo - Documentado</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script>
        // O script de validação que veremos no Passo 5!
        (() => {
            'use strict'
            const forms = document.querySelectorAll('.needs-validation')
            Array.from(forms).forEach(form => {
                form.addEventListener('submit', event => {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
        })()
    </script>
</body>
</html>

Detalhe dessa parte:

link href Aqui temos o endereço onde fica armazenodo arquvio css do bootrstra, nesse caso ele buscar o arquivo bootstrap.min.css.
script src Aqui temos o endereço do arquivo javascript do boostrap, nesse caso o arquivo bootstrap.bundle.min.js.
Segurança (Integrity e Crossorigin): Os atributos integrity e crossorigin são importantes para a segurança, garantindo que os arquivos do CDN não foram alterados.

Passo 2: Documentando a Estrutura Base do Formulário

Aqui está a estrutura fundamental do nosso formulário. Ela inclui o contêiner principal, responsável por alinhar e centralizar os elementos, e o elemento, configurado com classes e atributos essenciais para estilização e funcionalidade com o Bootstrap 5.

<body>
    <div class="container-fluid my-5">
        <form class="needs-validation" novalidate enctype="multipart/form-data">
            <fieldset class="border p-4 rounded">
                <legend class="w-auto px-2">Exemplo de Legenda de Formulário</legend>

                </fieldset>
        </form>
    </div>
</body>

Explicação Detalhada das Classes e Atributos:

container-fluid: Esta classe criar um layout que se adapta a qualquer tela. Ela faz o elemento ocupar 100% da largura disponível.
my-5: Pense no m como “margem”, y como “vertical” (de cima para baixo), e 5 como um tamanho grande (3rem). Então, my-5 dá um respiro, um espaço legal, na parte de cima e de baixo do seu formulário.
needs-validation: Não é do Bootstrap em si, mas é a chave que o código JavaScript (que veremos no Passo 4) usa para dizer: “Que este formulário precisa da validação visual do Bootstrap!”.
novalidate: Este atributo HTML é super importante! Ele desativa a validação padrão do navegador. Fazemos isso para que o Bootstrap possa controlar a validação e dar um feedback mais bonito e consistente.
enctype="multipart/form-data": Se você for permitir que as pessoas enviem arquivos (como uma foto ou um PDF) pelo seu formulário, você precisa desse atributo. Ele diz ao navegador como empacotar os dados para o envio.
border: Simples e direto: adiciona uma borda padrão ao redor do elemento.
p-4: p para “padding” (preenchimento interno), e 4 é um tamanho médio-grande (1.5rem). Ou seja, ele empurra o conteúdo para dentro, longe das bordas do fieldset.
rounded: Dá um toque moderno ao seu formulário, arredondando as quinas do elemento.
w-auto: w para “width” (largura), auto significa que a largura se ajustará automaticamente ao conteúdo. Isso é legal na legenda, pois a borda do fieldset “abraça” o texto da legenda.
px-2: p para “padding”, x para o eixo horizontal (esquerda e direita), e 2 é um tamanho pequeno (0.5rem). Dá um pequeno espaço lateral ao texto da legenda.

Passo 3: Documentando os Campos de Formulário – Detalhe por Detalhe

Aqui é onde a mágica do Bootstrap acontece para os campos individuais. Vamos analisar cada tipo, suas classes e como documentá-los.

A. Organização em Linhas e Colunas

Quase todos os seus campos estão dentro de uma estrutura de grid do Bootstrap, o que os torna responsivos.

<div class="row mb-3">
    <div class="col-md-6">
        </div>
    <div class="col-md-6">
        </div>
</div>

Como as classes funcionam:

row: É a fundação do layout. Ela diz: “Os elementos aqui dentro vão se comportar como uma linha em uma grade.”
mb-3: Simplesmente adiciona um espaço abaixo da linha, para que ela não grude na próxima.
col-md-6: Essa é a classe que faz seu formulário ser responsivo. Em um computador, dois col-md-6 ficam lado a lado (50% + 50%). Em um celular, eles se alinham um abaixo do outro (100% + 100%), o que é muito melhor para a usabilidade.

Captura de Tela 1: Layout Responsivo (Desktop e Mobile) (Imagine aqui uma imagem do formulário com dois campos lado a lado em um desktop, e outra imagem mostrando os mesmos campos empilhados em um celular.)

B. Campos de Texto, Senha, Email, Número, Data, Telefone e Busca (`<input>`)

Estes são os cavalos de batalha dos formulários, coletando a maioria das informações. O Bootstrap os deixa com um visual limpo e moderno.

<label for="nome" class="form-label">Campo Texto</label>
<input type="text" class="form-control" id="nome" name="nome" maxlength="50" placeholder="Campo texto" required>
<div class="invalid-feedback">
    Por favor, preencha o campo texto.
</div>

<label for="senha" class="form-label">Senha:</label>
<input type="password" class="form-control" id="senha" name="senha" maxlength="20" required>
<div class="invalid-feedback">
    Por favor, informe a senha.
</div>

Classes Bootstrap Comuns:

form-label: Dá um estilo padrão às suas etiquetas (<label>), garantindo que elas fiquem acima do campo e com um espaçamento adequado.
form-control: Esta é a classe mais usada para inputs. Ela faz o campo ocupar 100% da largura do seu container (col-md-6 ou mb-3), dá um padding interno, bordas bonitas e um efeito de foco azul quando você clica nele.
invalid-feedback: Esta div é onde sua mensagem de erro aparece. O Bootstrap, com a ajuda do JavaScript, só a mostra quando o campo não está válido (por exemplo, está vazio e é required). Ela fica com texto vermelho.

Atributos HTML Importantes (e como documentá-los):

type: text, password, email, number, date, tel, url, search, datetime-local. Documente o type para explicar o propósito do campo e como o navegador o renderiza.
id: Deve ser único e precisa ser o mesmo valor do atributo for da label correspondente. Isso é crucial para a acessibilidade.
name: O nome que será usado para identificar o valor deste campo quando o formulário for enviado ao servidor (você documentaria isso se fosse para um back-end).
maxlength: Limita quantos caracteres o usuário pode digitar.
placeholder: O texto que aparece dentro do campo antes do usuário digitar. É uma dica do que deve ser inserido.
required: Este atributo HTML5 faz com que o campo seja obrigatório. O Bootstrap usará isso para mostrar a mensagem de erro se o campo estiver vazio.
min / max (para type="number"): Documente para quais campos numéricos esses atributos são usados para definir os limites.
pattern (para type="tel"): Para campos de telefone, use e documente o pattern com uma expressão regular para validar o formato (ex: (XX) XXXXX-XXXX).

Captura de Tela 2: Validação de Inputs (Aqui seria útil uma captura de tela mostrando um campo de texto e um campo de email, ambos com a borda vermelha e a mensagem de invalid-feedback visível, simulando uma tentativa de envio sem preenchimento ou com formato errado.)

C. Botões de Rádio (`<input type="radio">`)

Para quando o usuário pode escolher apenas uma opção de um grupo.

<label class="form-label d-block">Botões de Rádio:</label>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="masculino" name="genero" value="masculino" required>
    <label class="form-check-label" for="masculino">Masculino</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="feminino" name="genero" value="feminino" required>
    <label class="form-check-label" for="feminino">Feminino</label>
</div>
<div class="invalid-feedback d-block">
    Por favor, selecione um gênero.
</div>

Classes Bootstrap Aplicadas:

form-label d-block: A label principal do grupo. d-block (display block) faz com que ela ocupe toda a largura, garantindo que os rádios fiquem abaixo.
form-check: O container base para cada rádio individual e seu label. Ele aplica o estilo básico.
form-check-inline: Faz com que os rádios e seus labels fiquem na mesma linha, um ao lado do outro. Sem isso, eles se empilhariam verticalmente.
form-check-input: Estiliza o próprio círculo do rádio, garantindo alinhamento perfeito com o texto.
invalid-feedback d-block: A mensagem de erro para o grupo. O d-block aqui é importante porque, em grupos de rádio/checkbox, o Bootstrap precisa desse d-block para exibir a mensagem corretamente.

Atributos HTML Importantes:

type="radio": Define o input como um botão de rádio.
name="genero": ATENÇÃO! Todos os rádios no mesmo grupo (onde só um pode ser escolhido) devem ter o mesmo name.
value: O valor que será enviado ao servidor se essa opção for escolhida.
required: Se você colocar required em todos os rádios do grupo, significa que o usuário precisa selecionar pelo menos um deles.

D. Caixas de Seleção (`<input type="checkbox">`)

Para quando o usuário pode escolher uma ou mais opções de um grupo.

<label class="form-label d-block">Caixas de Seleção:</label>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="esporte" name="interesses" value="esporte" required>
    <label class="form-check-label" for="esporte">Esporte</label>
</div>
<div class="invalid-feedback d-block">
    Selecione pelo menos um interesse.
</div>

Classes Bootstrap Aplicadas:

São as mesmas classes dos rádios: form-label d-block, form-check, form-check-inline, form-check-input, invalid-feedback d-block. O Bootstrap as adapta para o visual de um checkbox.

Atributos HTML Importantes:

type="checkbox": Define o input como uma caixa de seleção.
name="interesses": Diferente dos rádios, checkboxes com o mesmo name podem ter múltiplas opções selecionadas. No backend, esses valores seriam recebidos como um array.
value: O valor enviado se a caixa for marcada.
required: Se aplicado a um grupo de checkboxes, exige que pelo menos um seja selecionado.

Captura de Tela 3: Rádios e Checkboxes (com e sem seleção) (Aqui, uma captura de tela mostrando ambos os grupos, com um rádio selecionado e algumas checkboxes marcadas. Opcionalmente, um cenário de validação onde o checkbox required não foi marcado.)

E. Listas de Seleção (`<select>`)

Para permitir que o usuário escolha uma ou mais opções de uma lista suspensa ou rolante.

<label for="escolaridade" class="form-label">Tipo Seleção - Mostrar valores simples:</label>
<select class="form-select" id="escolaridade" name="escolaridade" required>
    <option value="">Selecione...</option>
    <option value="medio">Ensino Médio</option>
    <option value="superior">Ensino Superior</option>
    <option value="pos">Pós-Graduação</option>
</select>
<div class="invalid-feedback">
    Por favor, selecione uma escolaridade.
</div>

<label for="escolaridade2" class="form-label">Definir número de valores visíveis (atributo Size):</label>
<select class="form-select" id="escolaridade2" name="escolaridade2" size="3" required>
    <option value="">Selecione...</option>
    <option value="medio">Ensino Médio</option>
    <option value="superior">Ensino Superior</option>
    <option value="pos">Pós-Graduação</option>
    <option value="mestrado">Mestrado</option>
</select>

<label for="escolaridade3" class="form-label">Permitir selecionar mais de um valor (atributo multiple):</label>
<select class="form-select" id="escolaridade3" name="escolaridade3" size="3" multiple required>
    <option value="medio">Ensino Médio</option>
    <option value="superior">Ensino Superior</option>
    <option value="pos">Pós-Graduação</option>
    <option value="mestrado">Mestrado</option>
</select>
<div class="invalid-feedback">
    Selecione pelo menos uma opção.
</div>

Classes Bootstrap Aplicadas:

form-select: Esta classe estiliza o elemento <select>, dando-lhe uma aparência moderna e consistente com os outros campos do formulário, incluindo uma seta personalizada.
form-label: Estiliza a etiqueta.
invalid-feedback: Mensagem de erro.

Atributos HTML Importantes e Variações:

<option value="">Selecione...</option> com required: Usar uma opção vazia com value="" e adicionar required ao <select> garante que o usuário realmente faça uma seleção válida.
size="3": O atributo size controla quantas opções são visíveis na lista sem precisar rolar. Se size for maior que 1, o <select> se transforma em uma lista rolante, não mais um dropdown.
multiple: Permite que o usuário selecione várias opções na lista (geralmente segurando Ctrl ou Cmd e clicando nas opções). Quando usado, o name do <select> deve ser algo como name="escolaridade3[]" para que o servidor receba um array de valores.

Captura de Tela 4: Selects (Dropdown, Lista e Múltipla) (Uma captura de tela mostrando os três tipos de select para ilustrar a diferença visual e funcional.)

F. Campo de Arquivo (`<input type="file">`)

Para que o usuário possa fazer upload de documentos, imagens, etc.

<div class="mb-3">
    <label for="arquivo" class="form-label">Campo arquivo:</label>
    <input class="form-control" type="file" id="arquivo" name="arquivo" accept=".pdf,.doc,.docx,image/*" required>
    <div class="invalid-feedback">
        Por favor, envie um arquivo.
    </div>
</div>

Classes Bootstrap Aplicadas:

form-control: Estiliza o campo de upload de arquivo, dando-lhe uma aparência moderna e consistente com os outros inputs, incluindo o botão “Escolher arquivo”.
form-label: Estiliza a etiqueta.
invalid-feedback: Mensagem de erro.

Atributos HTML Importantes:

type="file": Define o input para seleção de arquivos.
accept=".pdf,.doc,.docx,image/*": Este atributo sugere ao navegador os tipos de arquivo que podem ser selecionados. image/* aceita qualquer tipo de imagem.
multiple (Variação): Adicionar multiple ao <input type="file"> permitiria ao usuário selecionar vários arquivos de uma vez.

G. Campo de Cor (`<input type="color">`) e Campo de Intervalo (`<input type="range">`)

Esses campos oferecem funcionalidades de interface do usuário específicas do navegador.

<label for="favcolor" class="form-label">Selecione sua cor favorita:</label>
<input type="color" class="form-control form-control-color" id="favcolor" name="favcolor" required>
<div class="invalid-feedback">
    Por favor, selecione uma cor.
</div>

<label for="range" class="form-label">Selecione um número entre 0 e 100:</label>
<input type="range" class="form-range" id="range" name="range" min="0" max="100" required>
<div class="invalid-feedback">
    Por favor, selecione um valor.
</div>

Classes Bootstrap Aplicadas:

form-control-color: Uma classe específica do Bootstrap para estilizar o seletor de cores, garantindo que ele se alinhe visualmente ao formulário.
form-range: Uma classe específica do Bootstrap para estilizar o slider (<input type="range>), dando-lhe um visual limpo.
form-label: Estiliza a etiqueta.
invalid-feedback: Mensagem de erro.

Atributos HTML Importantes:

type="color": Ativa o seletor de cores nativo do navegador.
type="range": Cria um controle deslizante (slider).
min / max (para type="range"): Definem os valores mínimo e máximo do slider.
step (Variação para type="range"): Adicionar step="10" (por exemplo) faria o slider pular de 10 em 10.

H. Área de Texto (`<textarea>`)

Para entradas de texto mais longas, como comentários ou descrições.

<div class="mb-3">
    <label for="comentarios" class="form-label">Comentários:</label>
    <textarea class="form-control" id="comentarios" name="comentarios" rows="4" placeholder="Escreva seus comentários aqui..." required></textarea>
    <div class="invalid-feedback">
        Por favor, escreva um comentário.
    </div>
</div>

Classes Bootstrap Aplicadas:

form-control: Estiliza o <textarea>, similar aos inputs de texto, dando-lhe largura total e um visual consistente.
form-label: Estiliza a etiqueta.
invalid-feedback: Mensagem de erro.

Atributos HTML Importantes:

rows="4": Define o número de linhas visíveis (altura) da área de texto. O usuário geralmente pode redimensioná-la.
placeholder: Texto de dica dentro da área.
required: Torna o campo obrigatório.

I. Botões de Ação (`<button>`)

Os botões que o usuário usa para interagir com o formulário, como enviar ou limpar.

<div class="d-flex gap-2">
    <button type="submit" class="btn btn-primary">Enviar formulário</button>
    <button type="reset" class="btn btn-secondary">Limpar Formulário</button>
</div>

Classes Bootstrap Aplicadas:

d-flex: Aplica display: flex ao div container. Isso é ótimo para organizar os botões lado a lado e controlar o espaçamento entre eles.
gap-2: Usada com d-flex, adiciona um espaço (gap) de 0.5rem entre os botões.
btn: A classe base para todos os botões do Bootstrap. Ela aplica estilos essenciais como padding, bordas, raio da borda e cursor de ponteiro.
btn-primary: Transforma o botão na cor “primária” do tema Bootstrap (geralmente azul), indicando uma ação principal.
btn-secondary: Transforma o botão na cor “secundária” (geralmente cinza), para ações alternativas ou menos prioritárias.

Variações de Estilo de Botões (documente se usar): O Bootstrap oferece muitas classes btn-* para diferentes cores e estilos:

btn-success (verde), btn-danger (vermelho), btn-warning (amarelo), btn-info (azul claro), btn-light (claro), btn-dark (escuro), btn-link (como um link).
btn-outline-primary, btn-outline-secondary, etc. (botões com borda e texto coloridos, mas fundo transparente).
btn-lg (botão grande), btn-sm (botão pequeno).
btn-block (antigo no Bootstrap 3/4, agora usa d-grid gap-2 para botões de largura total).

Passo 4: JavaScript de Validação do Bootstrap

Por fim, precisamos adicionar o JavaScript necessário para ativar a validação visual do Bootstrap. Esse pequeno script é essencial para garantir que os feedbacks de validação, como mensagens de erro, sejam exibidos de forma interativa e consistente.

Aqui está o código que você pode incluir no final da página, antes do fechamento da tag :

<script>
    // Função auto-executável: encapsula o código para evitar conflitos de variáveis globais.
    (() => {
        'use strict'; // Ativa o "modo estrito" do JavaScript, que ajuda a escrever código mais limpo e seguro.

        // 1. Seleciona todos os elementos <form> que possuem a classe 'needs-validation'.
        //    (Lembre-se que você adicionou essa classe no HTML do seu formulário no Passo 3).
        const forms = document.querySelectorAll('.needs-validation');

        // 2. Converte a lista de 'forms' (NodeList) em um Array e itera sobre cada formulário encontrado.
        Array.from(forms).forEach(form => {
            // 3. Adiciona um 'listener' (ouvinte) para o evento de 'submit' (envio) do formulário.
            form.addEventListener('submit', event => {
                // 4. Verifica se o formulário NÃO é válido de acordo com as regras HTML5 (required, type="email", pattern, etc.).
                //    'form.checkValidity()' é um método nativo do HTML5 que retorna true se o formulário é válido.
                if (!form.checkValidity()) {
                    event.preventDefault();   // Impede o envio padrão do formulário (que recarregaria a página).
                    event.stopPropagation();  // Impede que o evento de 'submit' se propague para outros elementos pai.
                }

                // 5. Adiciona a classe 'was-validated' ao formulário.
                //    Esta é a **classe MÁGICA** do Bootstrap para validação!
                //    Quando esta classe é adicionada ao <form>, o CSS do Bootstrap é ativado para:
                //    - Mostrar bordas verdes para campos válidos e vermelhas para inválidos.
                //    - Exibir as mensagens de erro dentro das divs 'invalid-feedback'.
                form.classList.add('was-validated');
            }, false); // O 'false' indica que o evento será capturado na fase de "borbulhamento" (bubbling).
        });
    })();
</script>

Como este Script de Validação Funciona:

Este código é a maneira padrão do Bootstrap de habilitar o feedback visual de validação que você vê.
Ele procura por formulários com a classe needs-validation.
Quando o usuário tenta enviar o formulário (submit), ele verifica se todos os campos obrigatórios e formatados estão corretos (form.checkValidity()).
Se algo estiver errado, ele impede o envio do formulário.
O mais importante: ele adiciona a classe was-validated ao formulário. É essa classe que faz o CSS do Bootstrap “acender” as cores (verde/vermelho) e mostrar as mensagens de erro nos campos.

Resultado Final: O Formulário Completo – Uma Visão Geral

A seguir, apresentaremos o código completo do formulário estilizado com o Bootstrap 5. Este exemplo foi projetado para ilustrar, de forma prática, como construir diferentes tipos de campos utilizando as classes do framework.

O objetivo é proporcionar um design coeso, moderno e responsivo, garantindo que o formulário se adapte perfeitamente a qualquer dispositivo ou resolução de tela, ao mesmo tempo em que mantém uma experiência de usuário intuitiva e funcional.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulário de Exemplo - Documentado</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid my-5">
        <form class="needs-validation" novalidate enctype="multipart/form-data">
            <fieldset class="border p-4 rounded">
                <legend class="w-auto px-2">Exemplo de legenda de formulário</legend>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="nome" class="form-label">Campo Texto</label>
                        <input type="text" class="form-control" id="nome" name="nome" maxlength="50" placeholder="Campo texto" required>
                        <div class="invalid-feedback">
                            Por favor, preencha o campo texto.
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="senha" class="form-label">Senha:</label>
                        <input type="password" class="form-control" id="senha" name="senha" maxlength="20" required>
                        <div class="invalid-feedback">
                            Por favor, informe a senha.
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="email" class="form-label">Email:</label>
                        <input type="email" class="form-control" id="email" name="email" maxlength="50" placeholder="Digite seu email" required>
                        <div class="invalid-feedback">
                            Por favor, informe um email válido.
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="idade" class="form-label">Campo número:</label>
                        <input type="number" class="form-control" id="idade" name="idade" min="0" max="120" required>
                        <div class="invalid-feedback">
                            Por favor, informe sua idade.
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="data" class="form-label">Campo Data:</label>
                        <input type="date" class="form-control" id="data" name="data" required>
                        <div class="invalid-feedback">
                            Por favor, selecione uma data.
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="datahora" class="form-label">Campo Data e Hora:</label>
                        <input type="datetime-local" class="form-control" id="datahora" name="datahora" required>
                        <div class="invalid-feedback">
                            Por favor, selecione data e hora.
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="telefone" class="form-label">Campo Telefone:</label>
                        <input type="tel" class="form-control" id="telefone" name="telefone" placeholder="(XX) XXXXX-XXXX"
                            pattern="\(\d{2}\)\s?\d{4,5}-\d{4}" maxlength="15" required>
                        <div class="invalid-feedback">
                            Por favor, informe um telefone válido.
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="search" class="form-label">Campo de Busca:</label>
                        <input type="search" class="form-control" id="search" name="search" placeholder="Campo de Busca" required>
                        <div class="invalid-feedback">
                            Por favor, preencha o campo de busca.
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label d-block">Botões de Rádio:</label>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" id="masculino" name="genero" value="masculino" required>
                            <label class="form-check-label" for="masculino">Masculino</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" id="feminino" name="genero" value="feminino" required>
                            <label class="form-check-label" for="feminino">Feminino</label>
                        </div>
                        <div class="invalid-feedback d-block">
                            Por favor, selecione um gênero.
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label d-block">Caixas de Seleção:</label>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="esporte" name="interesses" value="esporte" required>
                            <label class="form-check-label" for="esporte">Esporte</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="musica" name="interesses" value="musica">
                            <label class="form-check-label" for="musica">Música</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="cinema" name="interesses" value="cinema">
                            <label class="form-check-label" for="cinema">Cinema</label>
                        </div>
                        <div class="invalid-feedback d-block">
                            Selecione pelo menos um interesse.
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="url" class="form-label">Tipo URL:</label>
                        <input type="url" class="form-control" id="url" name="url" placeholder="https://exemplo.com" required>
                        <div class="invalid-feedback">
                            Por favor, informe uma URL válida.
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="escolaridade" class="form-label">Tipo Seleção - Mostrar valores simples:</label>
                        <select class="form-select" id="escolaridade" name="escolaridade" required>
                            <option value="">Selecione...</option>
                            <option value="medio">Ensino Médio</option>
                            <option value="superior">Ensino Superior</option>
                            <option value="pos">Pós-Graduação</option>
                        </select>
                        <div class="invalid-feedback">
                            Por favor, selecione uma escolaridade.
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="escolaridade2" class="form-label">Definir número de valores visíveis (atributo Size):</label>
                        <select class="form-select" id="escolaridade2" name="escolaridade2" size="3" required>
                            <option value="">Selecione...</option>
                            <option value="medio">Ensino Médio</option>
                            <option value="superior">Ensino Superior</option>
                            <option value="pos">Pós-Graduação</option>
                            <option value="mestrado">Mestrado</option>
                        </select>
                        <div class="invalid-feedback">
                            Por favor, selecione uma opção.
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="escolaridade3" class="form-label">Permitir selecionar mais de um valor (atributo multiple):</label>
                        <select class="form-select" id="escolaridade3" name="escolaridade3" size="3" multiple required>
                            <option value="medio">Ensino Médio</option>
                            <option value="superior">Ensino Superior</option>
                            <option value="pos">Pós-Graduação</option>
                            <option value="mestrado">Mestrado</option>
                        </select>
                        <div class="invalid-feedback">
                            Selecione pelo menos uma opção.
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="arquivo" class="form-label">Campo arquivo:</label>
                    <input class="form-control" type="file" id="arquivo" name="arquivo" accept=".pdf,.doc,.docx,image/*" required>
                    <div class="invalid-feedback">
                        Por favor, envie um arquivo.
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="favcolor" class="form-label">Selecione sua cor favorita:</label>
                        <input type="color" class="form-control form-control-color" id="favcolor" name="favcolor" required>
                        <div class="invalid-feedback">
                            Por favor, selecione uma cor.
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="range" class="form-label">Selecione um número entre 0 e 100:</label>
                        <input type="range" class="form-range" id="range" name="range" min="0" max="100" required>
                        <div class="invalid-feedback">
                            Por favor, selecione um valor.
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="comentarios" class="form-label">Comentários:</label>
                    <textarea class="form-control" id="comentarios" name="comentarios" rows="4" placeholder="Escreva seus comentários aqui..." required></textarea>
                    <div class="invalid-feedback">
                        Por favor, escreva um comentário.
                    </div>
                </div>

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">Enviar formulário</button>
                    <button type="reset" class="btn btn-secondary">Limpar Formulário</button>
                </div>
            </fieldset>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Bootstrap validation
        (() => {
            'use strict'
            const forms = document.querySelectorAll('.needs-validation')
            Array.from(forms).forEach(form => {
                form.addEventListener('submit', event => {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
        })()
    </script>
</body>
</html>

Conclusão

O framework Bootstrap é uma ferramenta fácil e prática para estilizar formulários HTML. Ele oferece uma ampla variedade de classes e atributos que permitem criar formulários para qualquer necessidade, garantindo uma interface limpa, funcional e visualmente atraente.

Seguindo este guia, você será capaz de criar formulários claros, úteis e completos com o Bootstrap, aumentando significativamente sua produtividade e a eficiência no desenvolvimento!