Bootstrap 4- formulieren
De standaardinstellingen van Bootstrap 4
Formulierbesturingselementen krijgen automatisch een algemene stijl met Bootstrap:
Alle tekstuele <input>, <textarea>, en
<select>elementen met class .form-controlhebben een breedte van 100%.
Bootstrap 4-formulierlay-outs
Bootstrap biedt twee soorten formulierlay-outs:
- Gestapelde (volledige) vorm
- Inline formulier
Bootstrap 4 gestapelde vorm
In het volgende voorbeeld wordt een gestapeld formulier gemaakt met twee invoervelden, één selectievakje en een verzendknop.
Voeg een wrapper-element toe met .form-group, rond elk formulierbesturingselement, om de juiste marges te garanderen:
Voorbeeld
<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>
Bootstrap Inline-formulier
In een inline-vorm zijn alle elementen inline en links uitgelijnd.
Opmerking: dit is alleen van toepassing op formulieren binnen viewports die ten minste 576px breed zijn. Op schermen kleiner dan 576px wordt het horizontaal gestapeld.
Aanvullende regel voor een inline formulier:
- Klasse toevoegen
.form-inlineaan het<form>element
In het volgende voorbeeld wordt een inline-formulier gemaakt met twee invoervelden, één selectievakje en één verzendknop:
Voorbeeld
<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>
Inline formulier met hulpprogramma's
Het bovenstaande inline-formulier voelt "gecomprimeerd" aan en ziet er veel beter uit met de spatiëringshulpprogramma's van Bootstrap. Het volgende voorbeeld voegt een rechtermarge ( .mr-sm-2) toe aan elke invoer op alle apparaten (klein en hoger). En een onderste klasse van de marge ( .mb-2) wordt gebruikt om het invoerveld op te maken wanneer het breekt (gaat van horizontaal naar verticaal vanwege onvoldoende ruimte/breedte):
Voorbeeld
<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>
U leert meer over spatiëring en andere "helper"-klassen in ons hoofdstuk Bootstrap 4 Utilities .
Vorm rij/raster
U kunt ook kolommen ( .col) gebruiken om de breedte en uitlijning van formulierinvoer te regelen zonder spatiëringshulpprogramma's te gebruiken. Vergeet niet om ze in een .rowcontainer te doen.
In het onderstaande voorbeeld gebruiken we twee kolommen die naast elkaar verschijnen. U zult veel meer leren over kolommen en rijen in het hoofdstuk Bootstrap-rasters .
Voorbeeld
<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>
Als u minder rastermarges wilt (overschrijf standaard kolomgoten), gebruik dan .form-rowin plaats van .row:
Voorbeeld
<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>
Formuliervalidatie
U kunt verschillende validatieklassen gebruiken om waardevolle feedback aan gebruikers te geven. Voeg .was-validatedof .needs-validationaan het <form>element toe, afhankelijk van of u validatiefeedback wilt geven voor of na het indienen van het formulier. De invoervelden hebben een groene (geldige) of rode (ongeldige) rand om aan te geven wat er in het formulier ontbreekt. U kunt ook een
bericht .valid-feedbackof toevoegen .invalid-feedbackom de gebruiker expliciet te laten weten wat er ontbreekt of moet worden gedaan voordat het formulier wordt verzonden.
Voorbeeld
In dit voorbeeld gebruiken we om .was-validatedaan te geven wat er ontbreekt voordat het formulier wordt verzonden:
<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>
Voorbeeld
In dit voorbeeld gebruiken we .needs-validation, waarmee het validatie-effect wordt toegevoegd NADAT het formulier is verzonden (als er iets ontbreekt). Merk op dat je ook wat jQuery-code moet toevoegen om dit voorbeeld correct te laten werken:
<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>