Formulários de inicialização
Configurações padrão do Bootstrap
Os controles de formulário recebem automaticamente alguns estilos globais com o Bootstrap:
Todos os elementos textuais <input>, <textarea>e
<select>com classe .form-controltêm uma largura de 100%.
Layouts de formulário de inicialização
Bootstrap fornece três tipos de layouts de formulário:
- Forma vertical (este é o padrão)
- Forma horizontal
- Formulário embutido
Regras padrão para todos os três layouts de formulário:
- Enrole etiquetas e controles de formulário
<div class="form-group">(necessário para espaçamento ideal) - Adicionar classe a todos os elementos
.form-controltextuais<input>,<textarea>e<select>
Bootstrap Vertical Form (padrão)
O exemplo a seguir cria um formulário vertical com dois campos de entrada, uma caixa de seleção e um botão de envio:
Exemplo
<form action="/action_page.php">
<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>
Formulário em linha de bootstrap
Em um formulário embutido, todos os elementos são embutidos, alinhados à esquerda e os rótulos estão ao lado.
Nota: Isso se aplica apenas a formulários em viewports com pelo menos 768px de largura!
Regra adicional para um formulário embutido:
- Adicionar classe
.form-inlineao<form>elemento
O exemplo a seguir cria um formulário embutido com dois campos de entrada, uma caixa de seleção e um botão de envio:
Exemplo
<form class="form-inline" action="/action_page.php">
<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>
Dica: Se você não incluir um rótulo para cada entrada, os leitores de tela terão problemas com seus formulários. Você pode ocultar os rótulos de todos os dispositivos, exceto leitores de tela, usando a
.sr-onlyclasse:
Exemplo
<form class="form-inline" action="/action_page.php">
<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>
Forma Horizontal Bootstrap
Um formulário horizontal significa que os rótulos são alinhados ao lado do campo de entrada (horizontal) em telas grandes e médias. Em telas pequenas (767px e abaixo), ele se transformará em um formato vertical (rótulos são colocados no topo de cada entrada).
Regras adicionais para um formulário horizontal:
- Adicionar classe
.form-horizontalao<form>elemento - Adicionar classe
.control-labela todos os<label>elementos
Dica: Use as classes de grade predefinidas do Bootstrap para alinhar rótulos e grupos de controles 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" action="/action_page.php">
<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>