Formulários são elementos do HTML para receber dados do usuário. Formulários são formados por outros elementos chamados de inputs que são os campos que o usuário pode digitar e enviar dados, ou escolher valores.

No HTML, os formulários são criados a partir da tag <form> … </form> e os inputs são codificados dentro desta tag.

Tipos de inputs

<input type="text">

Este input recebe textos.

<input type="number">

Este input recebe apenas números inteiros. Você pode limitar os valores usando os atributos min e max, exemplo: <input type=”number” min=”0″ max=”100″>

<input type="range">

Este input também recebe números inteiros escolhidos em uma barra deslizante. Você pode limitar os valores usando os atributos min e max, exemplo: <input type=”range” min=”0″ max=”100″>

<input type="email">

Este input recebe somente texto no formato [email protected] que caracteriza o formato universal de um endereço de e-mail.

<input type="color">

Este input permite que usuário escolha um cor da paleta de cores do sistema.

<input type="radio" value="masculino"> Masculino
<input type="radio" value="feminino"> Feminino

O radio permite o usuário escolher entre uma opção ou outra.

<input type="checkbox" value="vermelho">
<input type="checkbox" value="amarelo">

Já os inputs do tipo checkbox são o oposto do radio, eles permitem ao usuário selecionar mais de uma opção.

<input type="date">

Permite escolher uma data em um calendário suspenso. OBS: A data é exibida no formato brasileiro mas é retornada em formato americano.

O atributo Name e ID

Quanto trabalhamos com PHP, todo o input deve receber um nome. Este nome é definido pelo atributo name, exemplo:

<input type="number" name="idade">

Quando trabalhamos com JS (JavaScript), usamos o atributo id (identificador)

<input type="number" id="idade">

Nós podemos trabalhar com PHP e JS ao mesmo tempo, portanto, podemos ter o name e o id em um mesmo input;

<input type="number" name="idade" id="idade">

Label

Label é o texto que antecede o input; por exemplo;

<label for="idade"> Informe a sua idade </label> 
<input type="number" name="idade">

Required e validação

Required é um atributo de todos os inputs que definem se o preenchimento do input é obrigatório ou não. Exemplo:

<label for="idade"> Informe a sua idade </label> 
<input type="number" name="idade" required>

Ao enviar estes dados para o servidor, seja via GET ou POST, o navegador fará a validação automaticamente e irá exibir uma mensagem ao usuário informando quais campos não foram devidamente preenchidos, ou, que forma preenchidos de forma errada.

Placeholder

O atributo placeholder é aquele texto de ajuda que aparece dentro dos inputs de texto.

<input type="text" placeholder="Informe seu nome completo" required>

Estilização com BootStrap

O BS oferece algumas classes para estilizar seus formulários conforme exibido em http://getbootstrap.com.br/css/#forms. Conforme orienta a documentação, os elementos dos formulários devem ser agrupados pela <div class=”form-group”> … </div> que criam um espaço elegante entres os inputs. Os inputs por sua vez recebem o estilo da classe form-control que cria um elegante campo de digitação com um tamanho de largura de 100%

Exemplo de formulário com BS

Este código mostra um exemplo usando alguns tipos de inputs estilizados pelo BootStrap:

O resultado será:

Formulários no sistema de grid do BootStrap

No exemplo do código anterior notamos que alguns campos como idade ocupam todo o espaço da tela do dispositivo sendo que o campo idade receberá no máximo 3 dígitos, logo, percebe-se o desperdício de espaço e percebe-se que este formulário poderia oferecer uma experiência mais agradável ao usuário se estivesse melhor organizado.

Para obter esta organização mais eficientes de campos e inputs usamos o sistema de grid do BS.

O sistema de grid do BS, conforme visto na aula Introdução ao BootStrap são formados por um container principal que pode ser divido em linhas (row) e colunas (col), lembrando sempre que o limite de colunas é sempre 12.

A classe fluid-container

Quanto precisamos subdividir uma coluna em outras usamos a classe  fluid-container, veja um exemplo:

<div class="container">
     <div class="row">
         <div class="col-md-6">
             COLUNA 1
         <div>
         <div class="col-md-6">
             <div class="container-fluid">
                <div class="col-md-6">
                   COLUNA 2, dividida parte 1  
                </div>
                <div class="col-md-6">
                   COLUNA 2, dividida parte 2 
                </div>
             </div>
        </div>
     </div>
</div> 

Agora veja o mesmo exemplo melhor organizado, usando a classe fluid-container

O resultado será: