tutoriais mais recente desenvolvimento web
 

Bootstrap Forms

❮ Anterior Próxima Capítulo ❯

Bootstrap's Default Settings

Controles de formulário automaticamente receber algum estilo global com Bootstrap :

Todos textuais <input> , <textarea> e <select> elementos com class .form-control têm uma largura de 100%.

Bootstrap Layouts Form

Bootstrap oferece três tipos de layouts de formulário:

  • forma vertical (este é o padrão)
  • forma horizontal
  • formulário em linha

regras padrão para todos os três layouts de formulário:

  • Sempre use <form role="form"> (ajuda a melhorar a acessibilidade para as pessoas que utilizam leitores de tela)
  • Enrole rótulos e controles de formulários em <div class="form-group"> (necessário para o espaçamento ideal)
  • Adicionar classe .form-control a todos textuais <input> , <textarea> e <select> elementos

Bootstrap Formulário Vertical (default)

O exemplo a seguir cria uma forma vertical com dois campos de entrada, uma caixa de seleção, e um botão de envio:

Exemplo

<form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Tente você mesmo "

Bootstrap inline Form

Em uma forma inline, todos os elementos são inline, alinhado à esquerda, e os rótulos estão ao lado.

Nota: Isso só se aplica a formas dentro de viewports que são pelo menos 768px de largura!

regra adicional para um formulário em linha:

  • Adicionar classe .form-inline ao <form> elemento

O exemplo a seguir cria um formulário em linha com dois campos de entrada, uma caixa de seleção, e um botão de envio:

Exemplo

<form class="form-inline" role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Tente você mesmo "

Dica: Se você não incluir um rótulo para cada entrada, os leitores de tela terá problemas com seus formulários. Você pode ocultar os rótulos de todos os dispositivos, exceto os leitores de tela, usando a .sr-only classe:

Exemplo

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Tente você mesmo "

Bootstrap Form Horizontal

Uma forma horizontal se distingue de outras formas, tanto na quantidade de marcação, e na apresentação da forma.

Regras adicionais para uma forma horizontal:

  • Adicionar classe .form-horizontal para o <form> elemento
  • Adicionar classe .control-label para todos <label> elementos

Dica: Use Bootstrap's aulas da grade pré-definidos para alinhar os rótulos e grupos de controlos de formulário em um layout horizontal.

O exemplo a seguir cria um formulário horizontal com dois campos de entrada, uma caixa de seleção, e um botão de envio:

Exemplo

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
Tente você mesmo "

❮ Anterior Próxima Capítulo ❯