Bootstrap 4 Entradas de Formulário
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 de type="text"e um de
type="password". Como mencionamos no capítulo Formulários, usamos a .form-controlclasse para estilizar entradas com largura total e preenchimento adequado, etc.:
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="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Exemplo explicado
Use um elemento wrapper com class="form-check"para garantir margens adequadas para rótulos e caixas de seleção.
Adicione a .form-check-labelclasse para rotular elementos e .form-check-inputestilizar corretamente as caixas de seleção dentro do .form-checkcontêiner.
Caixas de seleção em linha
Use a .form-check-inlineclasse se quiser que as caixas de seleção apareçam na mesma linha:
Exemplo
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
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 última opção está desabilitada:
Exemplo
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Assim como nas caixas de seleção, use a .form-check-inlineclasse se quiser que os botões de opção apareçam na mesma linha:
Exemplo
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
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>
Dimensionamento de controle de formulário
Altere o tamanho do controle de formulário com .form-control-smou .form-control-lg:
Exemplo
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
Controle de formulário com texto simples
Use o .form-control-plaintextse quiser estilizar o campo de entrada como texto simples:
Exemplo
<input type="text" class="form-control-plaintext">
Arquivo e intervalo de controle de formulário
Adicione a .form-control-rangeclasse a input type"range"ou .form-control-filepara input type"file"estilizar um controle de intervalo ou um campo de arquivo com largura total:
Exemplo
<input type="range" class="form-control-range">
<input type="file"
class="form-control-file border">