Bootstrap 4 formulierinvoer
Ondersteunde formulierbesturingselementen
Bootstrap ondersteunt de volgende formulierbesturingselementen:
- invoer
- tekstgebied
- selectievakje
- radio-
- selecteer
Bootstrap-invoer
Bootstrap ondersteunt alle HTML5-invoertypen: tekst, wachtwoord, datetime, datetime-local, datum, maand, tijd, week, nummer, e-mail, url, zoeken, tel en kleur.
Opmerking: Ingangen worden NIET volledig gestyled als hun type niet correct is aangegeven!
Het volgende voorbeeld bevat twee invoerelementen; een van type="text"en een van
type="password". Zoals we in het hoofdstuk Formulieren vermeldden, gebruiken we de .form-controlklasse om invoer te stylen met volledige breedte en de juiste opvulling, enz.:
Voorbeeld
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Bootstrap-tekstgebied
Het volgende voorbeeld bevat een tekstgebied:
Voorbeeld
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Bootstrap-selectievakjes
Selectievakjes worden gebruikt als u wilt dat de gebruiker een willekeurig aantal opties selecteert uit een lijst met vooraf ingestelde opties.
Het volgende voorbeeld bevat drie selectievakjes. De laatste optie is uitgeschakeld:
Voorbeeld
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Voorbeeld uitgelegd
Gebruik een wrapper-element met class="form-check"om te zorgen voor de juiste marges voor labels en selectievakjes.
Voeg de .form-check-labelklasse toe om elementen te labelen en .form-check-inputom selectievakjes op de juiste manier in de .form-checkcontainer op te maken.
Inline selectievakjes
Gebruik de .form-check-inlineklasse als u wilt dat de selectievakjes op dezelfde regel verschijnen:
Voorbeeld
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Bootstrap-radioknoppen
Keuzerondjes worden gebruikt als u de gebruiker wilt beperken tot slechts één selectie uit een lijst met vooraf ingestelde opties.
Het volgende voorbeeld bevat drie keuzerondjes. De laatste optie is uitgeschakeld:
Voorbeeld
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Gebruik, net als bij selectievakjes, de .form-check-inlineklasse als u wilt dat de keuzerondjes op dezelfde regel verschijnen:
Voorbeeld
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Bootstrap-selectielijst
Selectielijsten worden gebruikt als u de gebruiker wilt laten kiezen uit meerdere opties.
Het volgende voorbeeld bevat een vervolgkeuzelijst (selecteer lijst):
Voorbeeld
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
Formaat van formulierbesturing
Wijzig de grootte van het formulierbesturingselement met .form-control-smof .form-control-lg:
Voorbeeld
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
Formulierbesturing met platte tekst
Gebruik de .form-control-plaintextals u het invoerveld wilt opmaken als platte tekst:
Voorbeeld
<input type="text" class="form-control-plaintext">
Formulierbesturingsbestand en bereik
Voeg de .form-control-rangeklasse toe aan input type"range"of .form-control-fileaan input type"file"om een bereikbesturingselement of een bestandsveld op te maken met volledige breedte:
Voorbeeld
<input type="range" class="form-control-range">
<input type="file"
class="form-control-file border">