Formulários FÁCIL CRIAR FORMULÁRIOS COM DIFERENTES ESTILOS E LAYOUTS.

Boas práticas

Pode parecer simples, mas muitos desenvolvedores deixam passar essa importância ao construir formulários.

Todo label precisa ter o atributo for com o mesmo valor do ID do elemento.

Isso é um diferencial tremendo ao acessarmos formulários utilizando leitores de tela. A acessibilidade agradece =)

Campo de senha

<label for="elemento">Campo de senha</label>
<input type="password" class="form-control" id="elemento">

Funcionamento

Nós sabemos que utilizar formulários e principalmente organizá-los visualmente é muito chato. Nós seguimos alguns pequenos padrões herdados do Bootstrap com algumas modificações para se adequar às nossas necessidades. Veja os exemplos abaixo:

Todos os elementos <input>, <textarea>, e <select> com a classe .form-control recebem a largura de 100% por padrão.

Campo simples

Exemplo de texto de ajuda.

Seletor  Escolha uma opção  Isso mesmo :D 

Campo de senha

Campo para envio de arquivo

Marque aqui

Marque aqui

Marque aqui

Ou aqui

Ou aqui

Ou aqui

<form role="form">
 <fieldset>
  <div class="form-group">
   <label for="exampleInputEmail1">Campo simples</label>
   <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Insira seu texto aqui">
   <p class="help-block">Exemplo de texto de ajuda.</p>
  </div>
  <div class="form-group">
   <label for="exampleSelect">Seletor</label>
   <select id="exampleSelect" class="form-control">
    <option value="">Escolha uma opção</option>
    <option value="">Isso mesmo :D</option>
   </select>
  </div>
  <div class="form-group">
   <label for="exampleInputPassword1">Campo de senha</label>
   <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Senha">
  </div>
  <div class="form-group">
   <label for="exampleInputFile">Campo para envio de arquivo</label>
   <input type="file" id="exampleInputFile">
  </div>
  <div class="checkbox">
   <input type="checkbox" id="checkbox-1">
   <label for="checkbox-1">Marque aqui</label>
  </div>
  <div class="checkbox">
   <input type="checkbox" id="checkbox-2">
   <label for="checkbox-2">Marque aqui</label>
  </div>
  <div class="checkbox">
   <input type="checkbox" id="checkbox-3">
   <label for="checkbox-3">Marque aqui</label>
  </div>
  <div class="radio">
   <input name="radios" type="radio" id="radio-button-1">
   <label for="radio-button-1">Ou aqui</label>
  </div>
  <div class="radio">
   <input name="radios" type="radio" id="radio-button-2">
   <label for="radio-button-2">Ou aqui</label>
  </div>
  <div class="radio">
   <input name="radios" type="radio" id="radio-button-3">
   <label for="radio-button-3">Ou aqui</label>
  </div>
  <div class="box-actions">
   <button type="submit" class="btn btn-default">Enviar</button>
  </div>
 </fieldset>
</form>