Publicado em

Bootstrap 3: Trabalhando com Forms e Inputs

form bootstrapEm todo site, e em aplicações web, os formulários são itens essenciais, e precisam ser elaborados com bastante atenção.

Porém, definir o visual de cada controle do formulário, manualmente, usando CSS, é um trabalho chato e tedioso.

O Bootstrap simplifica muito esse processo, de definir os estilos e o posicionamento dos controles do formulário, fornecendo um conjunto predefinido de classes para os formulários.

E, com isso, podemos facilmente implementar os três tipos mais comuns de forms: o Formulário Ve
rtical (que é o padrão), o Formulário Horizontal e o Formulário Inline.

Para este tutorial, você já deve ter feito o download do Bootstrap 3, e criado a estrutura inicial de arquivos. Caso você não tenha feito, é só seguir os passos do tutorial Bootstrap 3: Como Começar.


Bootstrap Form e Inputs

Com o Bootstrap, assim que você cria um formulário, os controles mais comuns recebem estilos iniciais automaticamente.

Ou seja, você já terá um visual pré-definido para cada um dos controles tradicionais: input (text, password, submit, radio, checkbox), textarea, label, fieldset, legend, select, optgroup, option, button.

E tem, também, estilos para os componentes novos do HTML5.

Ao usar o Bootstrap em formulários, você irá trabalhar mais com o posicionamento, e com a função de cada componente, do que com o visual e com o CSS, em si.

bootstrap form complex

E, claro, você pode alterar o visual a qualquer momento (usando CSS).


As Classes Usadas em Formulários

Como você já sabe, todos os componentes do Bootstrap são criados a partir de classes CSS.

Algumas classes de formulários serão sempre usadas. Já outras são mais específicas para cada componente. Por isso, é importante manter a documentação sempre por perto.

Nos formulários, você vai usar bastante as seguintes classes:

  • .form-group – usada na <div>, ela agrupa o <labels> e <input>;
  • .form-control – usada em controles (inputs), define estilos iniciais;

Essas classes de formulário do Bootstrap adicionam espaçamento entre os componentes, formatação visual e largura de 100%.

Mas, lembre-se: você deve sempre definir a propriedade type nos controles de input, para esses estilos ficarem corretos.

Veja no código abaixo, um exemplo bem básico de como utilizar essas duas classes:

No decorrer deste capítulo, você vai ver outros campos com elas.


Como Criar um Formulário Simples

Vamos ver um exemplo de formulário implementado com Bootstrap, para você entender melhor a utilização das classes. Veja o código a seguir:

Por padrão, a tag <form> não precisa de classes, a não ser que você queira um formulário horizontal ou um inline, que veremos depois.

Para cada campo de entrada de texto, você deve ter uma <div> com a classe .form-group que faz com que a legenda e o campo fiquem juntos.

Esses componentes de entrada (input e textarea) também precisam ter a classe .form-control para receberem os espaçamentos corretos.

Perceba que no caso do checkbox, a marcação é diferente e ele não recebe classes. O visual é automático.

Por fim, temos um botão para enviar os dados. É um botão de submit comum, mas as classes .btn e .btn-default é que dão o visual para ele.

Alguns componentes possuem formatos específicos e combinações.

Este formulário apareceria assim na tela do navegador:

Exemplo de Bootstrap Form

Você não precisa decorar todas as classes de formulários do Bootstrap. Apenas entender como escrevê-las, e quando. E, também, consultar a documentação sempre que necessário.


Próximos Passos…

Na segunda parte desta série, você vai ver como utilizar os principais componentes de forms com o Bootstrap.

Se você tiver alguma dúvida, é só colocar logo abaixo, nos comentários, que eu tentarei responder o quanto antes.

Até a próxima!

12 comentários sobre “Bootstrap 3: Trabalhando com Forms e Inputs

  1. Bom tutorial.. Mas estou apanhando para colocar um textarea ao lado de 3 input text… para deixar os 3 campos ao lado de uma text area do tamanho dos 3 campos.

    Se souber poderia me auxiliar?

    1. Você pode fazer isso criando um grid para os campos.

      Crie duas colunas, de tamanho 6 (.col-sm-6):
      Na primeira, coloque os 3 input text;
      Na segunda, coloque o text area;

      Depois é só ir ajustando os labels.

      Abs.
      Ruan

  2. Ruan,

    Sou completamente iniciante, e através do seu ebook consegui fazer muita coisa 😀

    Mas … estou apanhando de um formulário simples de contato. O layout ficou ótimo, mas não sei como validar a ação após o visitante clicar no botão “enviar”. Sei que tenho que ter um arquivo php como “action”, mas não tenho idéia de como fazê-lo.
    Assim, depois de preenchido os dados iriam ser enviados para um email.

    Poderia me ajudar?

    Muito obrigado pela atenção!

    Abraços,

    Gustavo

  3. Tentei pegar o ebook mas a lista esta desativada, por favor envie para mim, sou aluno de um curso de desenvolvimento web e seu site esta nos auxiliando muito.

    1. Vou enviar, Gabriel.

      Abs.

  4. Valeu!!! aprendi muitas coisas com eles. Fácil de entender.

    A única que não consigo é baixar a apostila sua de bootstrap.

    Poderia mandar pelo meu email.

    Obrigado!

    1. Muito obrigado, Lucas!

      Vou enviar.
      Abs.

  5. Muito bom as dicas.

    Pelo formulário deu ruim, tem como mandar para meu email?

    1. Bom dia. Muito boa as dicas.
      Vc tem como enviar o ebook para meu email?

  6. Saudações

    Estou sofrendo para pegar os valores dos campos do formulário e trata-los em uma classe java, poderia dar um exemplo e possivel por e-mail
    desde ja agradeço ..

  7. Otimo post! Mas cadê o restante?

  8. Meu caro, muito obrigado pela dedicação com que fez este tutorial. Tem como enviar o ebook/apostila por email? Obrigado.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *