Bootstrap 4 Formulários
Configurações padrão do Bootstrap 4
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 do Bootstrap 4
Bootstrap fornece dois tipos de layouts de formulário:
- Formulário empilhado (largura total)
- Formulário embutido
Formulário empilhado Bootstrap 4
O exemplo a seguir cria um formulário empilhado com dois campos de entrada, uma caixa de seleção e um botão de envio.
Adicione um elemento wrapper com .form-group, em torno de cada controle de formulário, para garantir margens adequadas:
Exemplo
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Formulário em linha de bootstrap
Em um formulário embutido, todos os elementos são embutidos e alinhados à esquerda.
Observação: isso se aplica apenas a formulários em viewports com pelo menos 576 pixels de largura. Em telas menores que 576px, ele será empilhado horizontalmente.
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">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
<div class="form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Formulário Inline com Utilitários
O formulário embutido acima parece "comprimido" e ficará muito melhor com os utilitários de espaçamento do Bootstrap. O exemplo a seguir adiciona uma margem direita ( .mr-sm-2) a cada entrada em todos os dispositivos (pequenos e superiores). E uma classe inferior de margem ( .mb-2) é usada para estilizar o campo de entrada quando ele quebra (vai de horizontal para vertical devido ao espaço/largura insuficiente):
Exemplo
<form class="form-inline" action="/action_page.php">
<label for="email"
class="mr-sm-2">Email address:</label>
<input type="email" class="form-control
mb-2 mr-sm-2" placeholder="Enter email" id="email">
<label for="pwd"
class="mr-sm-2">Password:</label>
<input type="password" class="form-control
mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary
mb-2">Submit</button>
</form>
Você aprenderá mais sobre espaçamento e outras classes "auxiliares" em nosso Capítulo Utilitários do Bootstrap 4 .
Linha/grade do formulário
Você também pode usar colunas ( .col) para controlar a largura e o alinhamento das entradas de formulário sem usar utilitários de espaçamento. Apenas lembre-se de colocá-los dentro de um .rowrecipiente.
No exemplo abaixo, usamos duas colunas que aparecerão lado a lado. Você aprenderá muito mais sobre colunas e linhas no capítulo Bootstrap Grids .
Exemplo
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Se você quiser menos margens de grade (substituir medianizes de coluna padrão), use .form-rowem vez de .row:
Exemplo
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Validação de formulário
Você pode usar diferentes classes de validação para fornecer feedback valioso aos usuários. Adicione .was-validatedou .needs-validationao <form>elemento, dependendo se você deseja fornecer feedback de validação antes ou depois de enviar o formulário. Os campos de entrada terão uma borda verde (válida) ou vermelha (inválida) para indicar o que está faltando no formulário. Você também pode adicionar uma
mensagem .valid-feedbackou .invalid-feedbackpara informar explicitamente ao usuário o que está faltando ou o que precisa ser feito antes de enviar o formulário.
Exemplo
Neste exemplo, usamos .was-validatedpara indicar o que está faltando antes de enviar o formulário:
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
Exemplo
Neste exemplo, usamos .needs-validation, que adicionará o efeito de validação APÓS o envio do formulário (se houver algo faltando). Observe que você também terá que adicionar algum código jQuery para que este exemplo funcione corretamente:
<form action="/action_page.php" class="needs-validation"
novalidate>
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
<script>
//
Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the
forms we want to add validation styles to
var forms =
document.getElementsByClassName('needs-validation');
//
Loop over them and prevent submission
var validation =
Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
},
false);
});
}, false);
})();
</script>