Bootstrap 5.2 / Formulieren

Formulieren

Voorbeelden en gebruiksrichtlijnen voor stijlen van formulierbesturingselementen, layout-opties en eigen componenten om uiteenlopende formulieren te maken.

Overzicht

De formulierbesturingselementen van Bootstrap bouwen met klassen voort op onze Reboot-formulierstijlen. Gebruik deze klassen om te kiezen voor hun aangepaste weergave, voor een consistenter resultaat in verschillende browsers en op verschillende apparaten.

Zorg dat je op alle inputs een passend type-attribuut gebruikt (bijv. email voor een e-mailadres of number voor numerieke informatie) om te profiteren van nieuwere invoerelementen zoals e-mailverificatie, getalselectie en meer.

Hier is een kort voorbeeld dat de formulierstijlen van Bootstrap demonstreert. Lees verder voor documentatie over verplichte klassen, formulierlayout en meer.

HTML

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">E-mailadres</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We delen je e-mailadres nooit met anderen.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Wachtwoord</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Vink mij aan</label>
  </div>
  <button type="submit" class="btn btn-primary">Versturen</button>
</form>

Formuliertekst

Formuliertekst op block- of inline-niveau kan met .form-text worden gemaakt.

Let op

Formuliertekst koppelen aan formulierbesturingselementen

Formuliertekst moet expliciet aan het bijbehorende formulierbesturingselement worden gekoppeld met het attribuut aria-describedby. Zo weet je zeker dat hulptechnologieën — zoals schermlezers — deze formuliertekst voorlezen wanneer de gebruiker het besturingselement focust of erin typt.

Formuliertekst onder inputs kan met .form-text worden opgemaakt. Wordt er een block-element gebruikt, dan wordt er een bovenmarge toegevoegd voor eenvoudige ruimte ten opzichte van de inputs erboven.

HTML

<label for="inputPassword5" class="form-label">Wachtwoord</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Je wachtwoord moet 8-20 tekens lang zijn, letters en cijfers bevatten en mag geen spaties, speciale tekens of emoji bevatten.
</div>

Voor inline tekst kun je elk gangbaar inline HTML-element gebruiken (of dat nu een <span>, een <small> of iets anders is), met niets meer dan de klasse .form-text.

HTML

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Wachtwoord</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Moet 8-20 tekens lang zijn.
    </span>
  </div>
</div>

Uitgeschakelde formulieren

Voeg het booleaanse attribuut disabled toe aan een input om interactie te voorkomen en hem lichter te laten ogen.

HTML

<input class="form-control" id="disabledInput" type="text" placeholder="Uitgeschakelde input hier..." disabled>

Voeg het attribuut disabled toe aan een <fieldset> om alle besturingselementen erin uit te schakelen. Browsers behandelen alle native formulierbesturingselementen (<input>-, <select>- en <button>-elementen) binnen een <fieldset disabled> als uitgeschakeld, waardoor zowel toetsenbord- als muisinteracties worden voorkomen.

Bevat je formulier echter ook eigen knopachtige elementen zoals <a class="btn btn-*">...</a>, dan krijgen die alleen de stijl pointer-events: none, wat betekent dat ze nog steeds focusbaar en met het toetsenbord bedienbaar zijn. In dat geval moet je die besturingselementen handmatig aanpassen door tabindex="-1" toe te voegen om te voorkomen dat ze focus krijgen, en aria-disabled="disabled" om hun status aan hulptechnologieën door te geven.

HTML

<form>
  <fieldset disabled>
    <legend>Voorbeeld van een uitgeschakelde fieldset</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Uitgeschakelde input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Uitgeschakelde input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Uitgeschakeld selectiemenu</label>
      <select id="disabledSelect" class="form-select">
        <option>Uitgeschakelde select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Dit kun je niet aanvinken
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Versturen</button>
  </fieldset>
</form>

Toegankelijkheid

Zorg dat alle formulierbesturingselementen een passende toegankelijke naam hebben, zodat hun doel aan gebruikers van hulptechnologieën kan worden overgebracht. De eenvoudigste manier is een <label>-element te gebruiken, of — bij knoppen — voldoende beschrijvende tekst binnen de inhoud van <button>...</button> op te nemen.

Voor situaties waarin een zichtbaar <label> of passende tekstinhoud niet mogelijk is, zijn er andere manieren om toch een toegankelijke naam te bieden, zoals:

<label>-elementen die met de klasse .visually-hidden verborgen zijn
Verwijzen naar een bestaand element dat als label kan dienen met aria-labelledby
Een title-attribuut opgeven
De toegankelijke naam expliciet op een element instellen met aria-label

Ontbreken deze allemaal, dan kunnen hulptechnologieën terugvallen op het placeholder-attribuut als toegankelijke naam voor <input>- en <textarea>-elementen. De voorbeelden in dit onderdeel bieden een paar aanbevolen, situatiegebonden aanpakken.

Hoewel visueel verborgen content (.visually-hidden, aria-label en zelfs placeholder-tekst, die verdwijnt zodra een formulierveld inhoud heeft) gebruikers van hulptechnologie helpt, kan het ontbreken van zichtbare labeltekst voor sommige gebruikers alsnog problematisch zijn. Een zichtbaar label is over het algemeen de beste aanpak, zowel voor toegankelijkheid als voor bruikbaarheid.

Sass

Veel formuliervariabelen worden op een algemeen niveau ingesteld, zodat ze door individuele formuliercomponenten hergebruikt en uitgebreid kunnen worden. Je ziet die meestal als $input-btn-*- en $input-*-variabelen.

Variabelen

$input-btn-*-variabelen zijn gedeelde globale variabelen tussen onze knoppen en onze formuliercomponenten. Je ziet ze regelmatig opnieuw toegekend als waarden aan andere componentspecifieke variabelen.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.