Bootstrap 4 - Formulários
Descrição
O elemento do formulário é usado para coletar a entrada do usuário usando campos como caixas de seleção, botões de opção ou campos de texto, etc.
Forma básica
Você pode envolver rótulos e controles em um elemento <div> com class .form-group e adicionar uma classe de .form-control a todos os elementos textuais <input>, <textarea> e <select>.
Exemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Basic Form</h2>
<form>
<div class = "form-group">
<label for = "exampleInputEmail1">Email</label>
<input type = "email" class = "form-control"
id = "exampleInputEmail1" aria-describedby = "emailHelp"
placeholder = "Enter your email">
</div>
<div class = "form-group">
<label for = "exampleInputPassword1">Password</label>
<input type = "password" class = "form-control"
id = "exampleInputPassword1" placeholder = "Enter your password">
</div>
<div class = "form-group form-check">
<label class = "form-check-label" for = "exampleCheck1">
<input type = "checkbox" class = "form-check-input"
id = "exampleCheck1">Remember me
</label>
</div>
<button type = "submit" class = "btn btn-primary">Sign In</button>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Isso produzirá o seguinte resultado -
Resultado
Controles de formulário
O Bootstrap suporta nativamente os controles de formulário mais comuns, como entrada , área de texto e seleção .
O exemplo a seguir demonstra os controles de formulário suportados acima especificados com a classe .form-control -
Exemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h4>Example Input</h4>
<div class = "form-group">
<input type = "email" class = "form-control"
id = "exampleFormControlInput1" placeholder = "Enter your email">
</div>
<h4>Example Select</h4>
<div class = "form-group">
<select class = "form-control" id = "exampleFormControlSelect1">
<option>Select Option #1</option>
<option>Select Option #2</option>
<option>Select Option #3</option>
<option>Select Option #4</option>
<option>Select Option #5</option>
</select>
</div>
<h4>Example Multiple Select</h4>
<div class = "form-group">
<select multiple class = "form-control" id = "exampleFormControlSelect2">
<option>Multiple Select #1</option>
<option>Multiple Select #2</option>
<option>Multiple Select #3</option>
<option>Multiple Select #4</option>
<option>Multiple Select #5</option>
</select>
</div>
<h4>Example Textarea</h4>
<div class = "form-group">
<textarea class = "form-control" id = "exampleFormControlTextarea1" rows = "3"></textarea>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Isso produzirá o seguinte resultado -
Resultado
Entradas de dimensionamento, somente leitura e intervalo
O campo de entrada pode ser exibido em tamanhos grandes e pequenos usando as classes .form-control-lg e .form-control-sm respectivamente. O atributo readonly é um atributo booleano, que torna o campo de entrada somente leitura e não pode ser modificado. Você pode colocar intervalo para as entradas usando a classe .form-control-range .
O exemplo a seguir demonstra os tipos acima -
Exemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h2>Sizing</h2>
<input class = "form-control form-control-lg" type = "text"
placeholder = "Large Input">
<br>
<input class = "form-control" type = "text"
placeholder = "Default Input">
<br>
<input class = "form-control form-control-sm" type = "text"
placeholder = "Small Input">
<br>
<br>
<h2>Readonly</h2>
<input class = "form-control" type = "text"
placeholder = "This is readonly text" readonly>
<br>
<br>
<h2>Range Inputs</h2>
<div class = "form-group">
<input type = "range" class = "form-control-range"
id = "formControlRange">
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Isso produzirá o seguinte resultado -
Resultado
Grade de formulário usando Form Row
Você pode criar formulários complexos que requerem várias colunas usando a classe .form-row que especifica o layout compacto para a coluna. O exemplo a seguir demonstra isso -
Exemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h2>Form Row</h2>
<div class = "form-row">
<div class = "form-group col-md-6">
<label for = "inputEmail4">First Name</label>
<input type = "text" class =" form-control"
id = "inputEmail4" placeholder = "First Name">
</div>
<div class = "form-group col-md-6">
<label for = "inputPassword4">Last Name</label>
<input type = "text" class = "form-control"
id = "inputPassword4" placeholder = "Last Name">
</div>
</div>
<div class = "form-group">
<label for = "inputAddress">Address</label>
<input type = "text" class = "form-control" id = "inputAddress"
placeholder = "Address">
</div>
<div class = "form-row">
<div class = "form-group col-md-6">
<label for = "inputCity">City</label>
<input type = "text" class = "form-control" placeholder = "City"
id = "inputCity">
</div>
<div class = "form-group col-md-4">
<label for = "inputState">State</label>
<select id = "inputState" class = "form-control">
<option selected disabled>Select State</option>
<option>State 1</option>
<option>State 1</option>
</select>
</div>
<div class = "form-group col-md-2">
<label for = "inputZip">Pin Code</label>
<input type = "text" class = "form-control" id = "inputZip"
placeholder = "Pin Code">
</div>
</div>
<div class = "form-group">
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" id = "gridCheck" >
<label class = "form-check-label" for = "gridCheck">
I Agree To Terms and Conditions
</label>
</div>
</div>
<button type = "submit" class = "btn btn-primary">Submit</button>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Isso produzirá o seguinte resultado -
Resultado
Formas Horizontais
Crie formulários horizontais adicionando a classe .row para formar grupos. A largura dos rótulos e controles pode ser especificada usando .col - * - * classes e adicione a classe .col-form-label ao seu <label>, para que você possa colocar os controles do formulário centralizados verticalmente.
O exemplo a seguir demonstra isso -
Exemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h2>Horizontal Forms</h2>
<div class = "form-group row">
<label for = "inputEmail3" class = "col-sm-2 col-form-label">First Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputEmail3"
placeholder = "First Name">
</div>
</div>
<div class = "form-group row">
<label for = "inputPassword3" class = "col-sm-2 col-form-label">Last Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputPassword3"
placeholder = "Last Name">
</div>
</div>
<fieldset class = "form-group">
<div class = "row">
<legend class = "col-form-label col-sm-2 pt-0">Radios</legend>
<div class = "col-sm-10">
<div class = "form-check">
<input class = "form-check-input" type = "radio"
name = "gridRadios" id = "gridRadios1" value = "option1" checked>
<label class = "form-check-label" for = "gridRadios1">
Option 1
</label>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "radio"
name = "gridRadios" id = "gridRadios2" value = "option2">
<label class = "form-check-label" for = "gridRadios2">
Option 2
</label>
</div>
<div class = "form-check disabled">
<input class = "form-check-input" type = "radio"
name = "gridRadios" id = "gridRadios3" value =" option3" disabled>
<label class = "form-check-label" for = "gridRadios3">
Option 3 (disabled)
</label>
</div>
</div>
</div>
</fieldset>
<div class = "form-group row">
<div class = "col-sm-2">Checkbox</div>
<div class = "col-sm-10">
<div class = "form-check">
<input class = "form-check-input" type = "checkbox"
id = "gridCheck1">
<label class = "form-check-label" for = "gridCheck1">
Option 1
</label>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" id = "gridCheck2">
<label class = "form-check-label" for = "gridCheck1">
Option 2
</label>
</div>
</div>
</div>
<div class = "form-group row">
<div class = "col-sm-10">
<button type = "submit" class = "btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Isso produzirá o seguinte resultado -
Resultado
Formulário Inline
Você pode criar um formulário onde todos os elementos estão embutidos, alinhados à esquerda e os rótulos estão ao lado, adicionando a classe .form-embutido à tag <form>.
O exemplo a seguir demonstra a exibição de controles de formulário em uma única linha horizontal -
Exemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Inline Forms</h2>
<form class = "form-inline" action = "/action_page.php">
<label for = "email">Email :
<input type = "email" class = "form-control" id = "email"
placeholder = "Enter email" name =" email"></label>
<label for = "pwd">Password :
<input type = "password" class = "form-control" id = "pwd"
placeholder = "Enter password" name = "pswd"></label>
<button type = "submit" class = "btn btn-primary">Sign In</button>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Isso produzirá o seguinte resultado -
Resultado
Formulário Desabilitado e Texto de Ajuda
Use o atributo disabled para desabilitar os controles de formulário (bloqueia as interações do usuário em uma entrada). Você pode inserir texto nos campos relacionados usando a classe .form-text . O exemplo a seguir demonstra isso -
Exemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Disabled Form</h2>
<form>
<fieldset disabled>
<div class = "form-group">
<label for = "disabledTextInput">Name</label>
<input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Name">
</div>
<div class = "form-group">
<label for = "disabledSelect">Select your option</label>
<select id = "disabledSelect" class = "form-control">
<option>Select</option>
</select>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "checkbox"
id = "disabledFieldsetCheck" disabled>
<label class = "form-check-label" for="disabledFieldsetCheck">
Remember Me
</label>
</div>
<button type = "submit" class = " btn btn-primary">Submit</button>
<br>
<br>
<h2>Help Text</h2>
<label for = "inputPassword5">Password</label>
<input type = "password" id = "inputPassword5" class = "form-control"
aria-describedby = "passwordHelpBlock">
<small id = "passwordHelpBlock" class = "form-text text-muted">
Your password must be 6-10 characters long (This is help text).
</small>
</fieldset>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Isso produzirá o seguinte resultado -