Entradas de formulário de inicialização
Controles de formulário compatíveis
Bootstrap suporta os seguintes controles de formulário:
- entrada
- área de texto
- caixa de seleção
- rádio
- selecionar
Entrada de inicialização
O Bootstrap suporta todos os tipos de entrada HTML5: texto, senha, datetime, datetime-local, date, month, time, week, number, email, url, search, tel e color.
Nota: As entradas NÃO serão totalmente estilizadas se seu tipo não for declarado corretamente!
O exemplo a seguir contém dois elementos de entrada; um do tipo texto e outro do tipo senha:
Exemplo
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Área de Texto Bootstrap
O exemplo a seguir contém uma área de texto:
Exemplo
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Caixas de seleção de inicialização
As caixas de seleção são usadas se você quiser que o usuário selecione qualquer número de opções de uma lista de opções predefinidas.
O exemplo a seguir contém três caixas de seleção. A última opção está desabilitada:
Exemplo
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
Use a .checkbox-inlineclasse se quiser que as caixas de seleção apareçam na mesma linha:
Exemplo
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
Botões de Rádio Bootstrap
Os botões de opção são usados se você deseja limitar o usuário a apenas uma seleção de uma lista de opções predefinidas.
O exemplo a seguir contém três botões de opção. A primeira opção está marcada por padrão e a última opção está desabilitada:
Exemplo
<div class="radio">
<label><input type="radio" name="optradio"
checked>Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
Use a .radio-inlineclasse se quiser que os botões de opção apareçam na mesma linha:
Exemplo
<label class="radio-inline"><input type="radio" name="optradio"
checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
Lista de Seleção de Bootstrap
As listas de seleção são usadas se você deseja permitir que o usuário escolha entre várias opções.
O exemplo a seguir contém uma lista suspensa (lista de seleção):
Exemplo
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>