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!

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

Acima ↑