Bootstrap- formulieren
De standaardinstellingen van Bootstrap
Formulierbesturingselementen krijgen automatisch een algemene stijl met Bootstrap:
Alle tekstuele <input>, <textarea>, en
<select>elementen met class .form-controlhebben een breedte van 100%.
Bootstrap-formulierlay-outs
Bootstrap biedt drie soorten formulierlay-outs:
- Verticale vorm (dit is standaard)
- Horizontale vorm
- Inline formulier
Standaardregels voor alle drie de formulierlay-outs:
- Wikkel labels en formulierbesturingen in
<div class="form-group">(nodig voor optimale tussenruimte) - Class toevoegen
.form-controlaan alle tekstuele<input>,<textarea>, en<select>elementen
Bootstrap verticale vorm (standaard)
In het volgende voorbeeld wordt een verticaal formulier gemaakt met twee invoervelden, één selectievakje en een verzendknop:
Voorbeeld
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Bootstrap Inline-formulier
In een inline-vorm zijn alle elementen inline, links uitgelijnd en staan de labels ernaast.
Let op: dit is alleen van toepassing op formulieren binnen viewports die minimaal 768px breed zijn!
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">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Tip: Als u niet voor elke invoer een label opneemt, zullen schermlezers problemen hebben met uw formulieren. U kunt de labels voor alle apparaten verbergen, behalve schermlezers, door de
.sr-onlyklasse te gebruiken:
Voorbeeld
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Bootstrap horizontale vorm
Een horizontale vorm betekent dat de labels op grote en middelgrote schermen naast het invoerveld (horizontaal) zijn uitgelijnd. Op kleine schermen (767 px en lager) verandert het in een verticale vorm (labels worden boven op elke invoer geplaatst).
Aanvullende regels voor een horizontale vorm:
- Klasse toevoegen
.form-horizontalaan het<form>element - Klasse toevoegen
.control-labelaan alle<label>elementen
Tip: Gebruik de vooraf gedefinieerde rasterklassen van Bootstrap om labels en groepen formulierbesturingselementen uit te lijnen in een horizontale lay-out.
In het volgende voorbeeld wordt een horizontaal formulier gemaakt met twee invoervelden, één selectievakje en één verzendknop.
Voorbeeld
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>