Bootstrap 5.2 / Formulieren

Layout

Geef je formulieren structuur — van inline tot horizontaal tot eigen grid-implementaties — met onze layout-opties voor formulieren.

Formulieren

Elke groep formuliervelden hoort binnen een <form>-element te staan. Bootstrap biedt geen standaardstyling voor het <form>-element, maar er zijn wel een aantal krachtige browserfuncties die standaard beschikbaar zijn.

Nieuw met browserformulieren? Bekijk dan de formulierdocumentatie van MDN voor een overzicht en een volledige lijst met beschikbare attributen.
<button>s binnen een <form> hebben standaard type="submit", dus wees specifiek en geef altijd een type op.

Omdat Bootstrap display: block en width: 100% op vrijwel al onze formulierbesturingselementen toepast, stapelen formulieren zich standaard verticaal. Met extra klassen kun je die layout per formulier variëren.

Utilities

Margin-utilities zijn de eenvoudigste manier om formulieren wat structuur te geven. Ze bieden een basisgroepering van labels, besturingselementen, optionele formuliertekst en validatieberichten. We raden aan het bij margin-bottom-utilities te houden en voor de consistentie in het hele formulier één richting te gebruiken.

Bouw je formulieren gerust op de manier die jij wilt, met <fieldset>s, <div>s of vrijwel elk ander element.

HTML

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Voorbeeldlabel</label>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Placeholder voor voorbeeld-input">
</div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Nog een label</label>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Nog een input-placeholder">
</div>

Formuliergrid

Complexere formulieren kun je met onze grid-klassen bouwen. Gebruik ze voor formulierlayouts met meerdere kolommen, verschillende breedtes en extra uitlijningsopties. Vereist dat de Sass-variabele $enable-grid-classes is ingeschakeld (standaard aan).

HTML

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="Voornaam" aria-label="Voornaam">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Achternaam" aria-label="Achternaam">
  </div>
</div>

Gutters

Door gutter-modifier-klassen toe te voegen, kun je de gutterbreedte in zowel de inline- als de block-richting bepalen. Vereist eveneens dat de Sass-variabele $enable-grid-classes is ingeschakeld (standaard aan).

HTML

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="Voornaam" aria-label="Voornaam">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Achternaam" aria-label="Achternaam">
  </div>
</div>

Ook complexere layouts kun je met het grid-systeem maken.

HTML

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">E-mail</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Wachtwoord</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Adres</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="Hoofdstraat 1234">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Adres 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Appartement, studio of verdieping">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">Plaats</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">Provincie</label>
    <select id="inputState" class="form-select">
      <option selected>Kies...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Postcode</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Vink mij aan
      </label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Inloggen</button>
  </div>
</form>

Horizontaal formulier

Maak horizontale formulieren met het grid door de klasse .row aan formuliergroepen toe te voegen en met de .col-*-*-klassen de breedte van je labels en besturingselementen op te geven. Voeg ook .col-form-label aan je <label>s toe, zodat ze verticaal gecentreerd zijn ten opzichte van de bijbehorende formulierbesturingselementen.

Soms heb je margin- of padding-utilities nodig om precies de gewenste uitlijning te krijgen. Zo hebben we bijvoorbeeld de padding-top op het label van onze gestapelde radio-inputs verwijderd om de basislijn van de tekst beter uit te lijnen.

HTML

<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">E-mail</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Wachtwoord</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Radioknoppen</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          Eerste radioknop
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Tweede radioknop
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Derde, uitgeschakelde radioknop
        </label>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Voorbeeld-selectievakje
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Inloggen</button>
</form>

Labelformaten in horizontale formulieren

Gebruik .col-form-label-sm of .col-form-label-lg op je <label>s of <legend>s om het formaat van .form-control-lg en .form-control-sm correct te volgen.

HTML

<div class="row mb-3">
  <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">E-mail</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
  </div>
</div>
<div class="row mb-3">
  <label for="colFormLabel" class="col-sm-2 col-form-label">E-mail</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
  </div>
</div>
<div class="row">
  <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">E-mail</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
  </div>
</div>

Kolomafmetingen

Zoals in de vorige voorbeelden te zien is, kun je met ons grid-systeem een willekeurig aantal .cols binnen een .row plaatsen. Ze verdelen de beschikbare breedte gelijk onder elkaar. Je kunt ook een deel van je kolommen meer of minder ruimte laten innemen, terwijl de overige .cols de rest gelijk verdelen, met specifieke kolomklassen zoals .col-sm-7.

HTML

<div class="row g-3">
  <div class="col-sm-7">
    <input type="text" class="form-control" placeholder="Plaats" aria-label="Plaats">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="Provincie" aria-label="Provincie">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="Postcode" aria-label="Postcode">
  </div>
</div>

Automatische afmetingen

Het onderstaande voorbeeld gebruikt een flexbox-utility om de inhoud verticaal te centreren en verandert .col in .col-auto, zodat je kolommen alleen de ruimte innemen die ze nodig hebben. Met andere woorden: de kolom bepaalt zijn eigen afmetingen op basis van de inhoud.

HTML

<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Naam</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jan Jansen">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Gebruikersnaam</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Gebruikersnaam">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Voorkeur</label>
    <select class="form-select" id="autoSizingSelect">
      <option selected>Kies...</option>
      <option value="1">Een</option>
      <option value="2">Twee</option>
      <option value="3">Drie</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck">
      <label class="form-check-label" for="autoSizingCheck">
        Onthoud mij
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Versturen</button>
  </div>
</form>

Vervolgens kun je dat opnieuw combineren met formaatspecifieke kolomklassen.

HTML

<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Naam</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jan Jansen">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Gebruikersnaam</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Gebruikersnaam">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Voorkeur</label>
    <select class="form-select" id="specificSizeSelect">
      <option selected>Kies...</option>
      <option value="1">Een</option>
      <option value="2">Twee</option>
      <option value="3">Drie</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
      <label class="form-check-label" for="autoSizingCheck2">
        Onthoud mij
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Versturen</button>
  </div>
</form>

Inline formulieren

Gebruik de .row-cols-*-klassen om responsieve horizontale layouts te maken. Door gutter-modifier-klassen toe te voegen krijgen we gutters in horizontale én verticale richting. Op smalle mobiele viewports helpt .col-12 om de formulierbesturingselementen en meer te stapelen. De klasse .align-items-center lijnt de formulierelementen in het midden uit, waardoor de .form-check netjes uitlijnt.

HTML

<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Gebruikersnaam</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Gebruikersnaam">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Voorkeur</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Kies...</option>
      <option value="1">Een</option>
      <option value="2">Twee</option>
      <option value="3">Drie</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Onthoud mij
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Versturen</button>
  </div>
</form>