Bootstrap 4- vorms
Bootstrap 4 se verstek instellings
Vormkontroles ontvang outomaties 'n bietjie globale stilering met Bootstrap:
Alle tekstuele <input>, <textarea>, en
<select>elemente met klas .form-controlhet 'n breedte van 100%.
Bootstrap 4-vormuitlegte
Bootstrap bied twee tipes vormuitlegte:
- Gestapelde (volwydte) vorm
- Inlyn vorm
Bootstrap 4 gestapelde vorm
Die volgende voorbeeld skep 'n gestapelde vorm met twee invoervelde, een merkblokkie en 'n indien-knoppie.
Voeg 'n omhulelement by met .form-group, rondom elke vormkontrole, om behoorlike kantlyne te verseker:
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-inlynvorm
In 'n inlynvorm is al die elemente inlyn en linksbelyn.
Let wel: Dit is slegs van toepassing op vorms binne viewports wat ten minste 576px breed is. Op skerms kleiner as 576px, sal dit horisontaal stapel.
Bykomende reël vir 'n inlynvorm:
- Voeg klas
.form-inlineby die<form>element
Die volgende voorbeeld skep 'n inlynvorm met twee invoervelde, een merkblokkie en een indien-knoppie:
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>
Inlynvorm met hulpprogramme
Die inlynvorm hierbo voel "saamgepers" en sal baie beter lyk met Bootstrap se spasiëringshulpmiddels. Die volgende voorbeeld voeg 'n regterkantlyn ( .mr-sm-2) by elke invoer op alle toestelle (klein en hoër). En 'n marge onderste klas ( .mb-2) word gebruik om die invoerveld te stileer wanneer dit breek (gaan van horisontaal na vertikaal as gevolg van nie genoeg spasie/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>
Jy sal meer leer oor spasiëring en ander "helper" klasse in ons Bootstrap 4 Utilities Hoofstuk .
Vorm ry/rooster
Jy kan ook kolomme ( .col) gebruik om die breedte en belyning van vorminsette te beheer sonder om spasiëringsnutsmiddels te gebruik. Onthou net om hulle in 'n .rowhouer te sit.
In die voorbeeld hieronder gebruik ons twee kolomme wat langs mekaar sal verskyn. Jy sal baie meer oor kolomme en rye in die Bootstrap Grids-hoofstuk leer .
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>
As jy minder roostermarges wil hê (verag verstekkolomgeute), gebruik .form-rowin plaas 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>
Vorm validering
Jy kan verskillende valideringsklasse gebruik om waardevolle terugvoer aan gebruikers te gee. Voeg een .was-validatedof .needs-validationby die <form>element, afhangende van of jy bekragtigingsterugvoer wil gee voor of na die indiening van die vorm. Die invoervelde sal 'n groen (geldige) of rooi (ongeldige) rand hê om aan te dui wat in die vorm ontbreek. Jy kan ook 'n
.valid-feedbackof .invalid-feedbackboodskap byvoeg om die gebruiker uitdruklik te vertel wat ontbreek, of gedoen moet word voordat die vorm ingedien word.
Voorbeeld
In hierdie voorbeeld gebruik ons om .was-validatedaan te dui wat ontbreek voordat die vorm ingedien word:
<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 hierdie voorbeeld gebruik ons .needs-validation, wat die valideringseffek sal byvoeg NADAT die vorm ingedien is (as daar iets ontbreek). Let daarop dat jy ook 'n bietjie jQuery-kode sal moet byvoeg vir hierdie voorbeeld om behoorlik te werk:
<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>