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 em “Bootstrap 3: Trabalhando com Forms e Inputs

Adicione o seu

  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.

  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!

  5. 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 ..

Deixe um comentário

Orgulhosamente feito com WordPress | Tema: Baskerville 2 por Anders Noren

Acima ↑