Bootstrap 5.2 / Formulieren

Form controls

Geef tekstuele formulierbesturingselementen zoals `<input>`s en `<textarea>`s een opfrisbeurt met eigen stijlen, afmetingen, focus-states en meer.

Voorbeeld

HTML

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">E-mailadres</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="naam@voorbeeld.nl">
</div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Voorbeeld-textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

Afmetingen

Stel hoogtes in met klassen als .form-control-lg en .form-control-sm.

HTML

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label="Voorbeeld van .form-control-lg">
<input class="form-control" type="text" placeholder="Standaard-input" aria-label="Voorbeeld van standaard-input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label="Voorbeeld van .form-control-sm">

Uitgeschakeld

Voeg het booleaanse attribuut disabled toe aan een input om hem grijs te maken, pointer events uit te schakelen en focus te voorkomen.

HTML

<input class="form-control" type="text" placeholder="Uitgeschakelde input" aria-label="Voorbeeld van uitgeschakelde input" disabled>
<input class="form-control" type="text" value="Uitgeschakelde alleen-lezen input" aria-label="Voorbeeld van uitgeschakelde input" disabled readonly>

Alleen-lezen

Voeg het booleaanse attribuut readonly toe aan een input om te voorkomen dat de waarde wordt gewijzigd. readonly-inputs kunnen nog steeds focus krijgen en geselecteerd worden, disabled-inputs niet.

HTML

<input class="form-control" type="text" value="Alleen-lezen input hier..." aria-label="Voorbeeld van alleen-lezen input" readonly>

Alleen-lezen platte tekst

Wil je <input readonly>-elementen in je formulier als platte tekst opgemaakt hebben, vervang dan .form-control door .form-control-plaintext om de standaardstyling van het formulierveld te verwijderen en de juiste margin en padding te behouden.

HTML

<div class="mb-3 row">
    <label for="staticEmail" class="col-sm-2 col-form-label">E-mail</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
  </div>
  <div class="mb-3 row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Wachtwoord</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>

HTML

<form class="row g-3">
  <div class="col-auto">
    <label for="staticEmail2" class="visually-hidden">E-mail</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="col-auto">
    <label for="inputPassword2" class="visually-hidden">Wachtwoord</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Wachtwoord">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary mb-3">Identiteit bevestigen</button>
  </div>
</form>

Bestandsinvoer

HTML

<div class="mb-3">
  <label for="formFile" class="form-label">Voorbeeld van standaard bestandsinvoer</label>
  <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="formFileMultiple" class="form-label">Voorbeeld van invoer met meerdere bestanden</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
  <label for="formFileDisabled" class="form-label">Voorbeeld van uitgeschakelde bestandsinvoer</label>
  <input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
  <label for="formFileSm" class="form-label">Voorbeeld van kleine bestandsinvoer</label>
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
  <label for="formFileLg" class="form-label">Voorbeeld van grote bestandsinvoer</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

Kleur

Zet type="color" en voeg .form-control-color aan de <input> toe. We gebruiken de modifier-klasse om vaste heights in te stellen en een aantal inconsistenties tussen browsers te overschrijven.

HTML

<label for="exampleColorInput" class="form-label">Kleurkiezer</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Kies je kleur">

Datalists

Met datalists kun je een groep <option>s maken die vanuit een <input> benaderd (en automatisch aangevuld) kunnen worden. Ze lijken op <select>-elementen, maar kennen meer beperkingen en verschillen in de styling van het menu. Hoewel de meeste browsers en besturingssystemen <datalist>-elementen tot op zekere hoogte ondersteunen, is de styling ervan op zijn best inconsistent.

Lees meer over ondersteuning voor datalist-elementen.

HTML

<label for="exampleDataList" class="form-label">Voorbeeld van datalist</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Typ om te zoeken...">
<datalist id="datalistOptions">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
</datalist>

Sass

Variabelen

$input-* worden gedeeld door de meeste van onze formulierbesturingselementen (maar niet door knoppen).

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

$form-label-* en $form-text-* zijn voor onze <label>s en het .form-text-component.

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

$form-file-* zijn voor bestandsinvoer.

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