Bootstrap- 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 het type tekst en een van het type wachtwoord:
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="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
Gebruik de .checkbox-inlineklasse als u wilt dat de selectievakjes op dezelfde regel verschijnen:
Voorbeeld
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
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 eerste optie is standaard aangevinkt en de laatste optie is uitgeschakeld:
Voorbeeld
<div class="radio">
<label><input type="radio" name="optradio"
checked>Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
Gebruik de .radio-inlineklasse als u wilt dat de keuzerondjes op dezelfde regel verschijnen:
Voorbeeld
<label class="radio-inline"><input type="radio" name="optradio"
checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
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>