Objetivos da Aula

• Mostrar como funcionam os formulários no bootstrap
• Mostras as variações e como montar um formulário
• Dar dicas de formulários e explicar como manipular

Snippets

1. Os formulários da documentação fica aqui: https://bootstrapdoconebitcode.netlify.app/pages/6forms.html os formulários estão presentes e boa parte dos sites, então você precisa saber uma forma fácil e rápida de pegar os elementos.

2. Aqui no topo da página temos um overview de elementos, tendo 1 campo de email, um de senha, um checkbox e um botão, que seria uma área de login comum.

   <form>
       <div class="mb-3">
           <label for="exampleInputEmail1" class="form-label">Email address</label>
           <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
           <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
       </div>
       <div class="mb-3">
           <label for="exampleInputPassword1" class="form-label">Password</label>
           <input type="password" class="form-control" id="exampleInputPassword1">
       </div>
       <div class="mb-3 form-check">
           <input type="checkbox" class="form-check-input" id="exampleCheck1">
           <label class="form-check-label" for="exampleCheck1">Check me out</label>
       </div>
       <button type="submit" class="btn btn-primary">Submit</button>
   </form>
   

3. Logo abaixo você consegue ver como manipular os tamanhos dos inputs para se adequar ao que você precisa.

   <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
   <input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
   <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
   

4. Temos também logo abaixo um modo de fazer upload de arquivos, que basta você clicar e selecionar o arquivo que quer upar, que depois disso envolve o back-end para receber o arquivo e usar ele de alguma forma, coisa que você verá depois.

   <div class="mb-3">
       <label for="formFile" class="form-label">Default file input example</label>
       <input class="form-control" type="file" id="formFile">
   </div>
   

5. Temos também um seletor de cor, que ele já está 100% perfeito na minha visão, você seleciona a cor, tem aqui embaixo a cor em RGB, que clicando nas setinhas tem opção de mudar a cor para HSL e HEX também, que são outros modos de trabalhar com elas.

   <label for="exampleColorInput" class="form-label">Color picker</label>
   <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#FF0043" title="Choose your color">
   

6. Por último temos os elementos de fato de vários formulários que você vê por aí, aqui você pode pegar o que precisar e colocar na sua aplicação tranquilamente, manipulando os textos que estiverem ao redor e coisas desse tipo.