DSO Toolkit | Component Library

Form: Single Page 

<form class="dso-single-page">
    <fieldset class="dso-form-fields">
        <legend class="sr-only">Een simpel formulier</legend>
        <fieldset>
            <legend>Invoervelden</legend>
            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="invoer-veld-1" class="control-label">
                        Invoerveld
                    </label>
                </div>
                <div class="dso-field-container">
                    <input type="text" id="invoer-veld-1" class="form-control" />
                </div>
            </div>
            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="invoer-veld-2" class="control-label">
                        Invoerveld
                    </label>
                </div>
                <div class="dso-field-container">
                    <input type="text" id="invoer-veld-2" class="form-control" />
                </div>
            </div>
        </fieldset>
    </fieldset>
    <div class="dso-form-buttons">
        <button type="submit" class="btn btn-primary">
            <span>Primaire actie</span>
        </button>
        <button type="button" class="btn btn-link">
            <span>Secondaire actie</span>
        </button>
    </div>
</form>
 
<form{{#if formModifier }} class="{{ formModifier }}"{{/if}}>
  <fieldset class="dso-form-fields">
    <legend class="sr-only">{{ formLegend }}</legend>
    {{#each fieldsets }}
      <fieldset>
        <legend{{#if legendScreenreaderOnly }} class="sr-only"{{/if}}>{{ legend }}</legend>
        {{#each groups }}
          {{> (concat '@group-' inputType) }}
        {{/each}}
      </fieldset>
    {{/each}}
  </fieldset>
  {{#if buttons.length }}
    <div class="dso-form-buttons">
      {{#each buttons }}
        {{> '@button' }}
      {{/each}}
    </div>
  {{/if}}
</form>
 
formLegend: Een simpel formulier
fieldsets:
  - legend: Invoervelden
    groups:
      - id: invoer-veld-1
        inputType: input
        type: text
        label: Invoerveld
      - id: invoer-veld-2
        inputType: input
        type: text
        label: Invoerveld
buttons:
  - type: submit
    modifier: primary
    label: Primaire actie
  - type: button
    modifier: link
    label: Secondaire actie
formModifier: dso-single-page

Een formulier begint altijd met een form-element. Als een form-element ongewenst is kan een element met de class .form worden ingezet. Elke textuele input en select zit in een .form-group. Elk formulier onderdeel is een groep met een label.

Alle elementen zitten in een fieldset met een legend. De legend kan verborgen worden met een .sr-only. De form submit (en eventueel een form reset) staat buiten de fieldset.

  • Een eventuele toelichting zit in een p.dso-help-block. Als er een toelichting is, dient deze met een @aria-describedby aan de input gekoppeld te worden.
  • Een label bij een textuele input of select eindigt altijd met een dubbele punt.

Buttons worden uitgelijnd afhankelijk van de context:

  • Buttons worden gesorteerd op belangrijkheid van rechts naar links, met de primaire actie aan de rechterkant. Wanneer knoppen gebruikt worden om door een reeks schermen te navigeren, wordt de primaire knop rechts uitgelijnd en de ‘terug’ actie helemaal links om de navigatie visueel te ondersteunen.
  • Uitgezonderd zijn formulieren met één pagina en gerichte taken, buttons links uitlijnen en sorteren op belangrijkheid van links naar rechts.

De uitzonderingen worden met de modifier .dso-single-page op een form of .form ingezet.

Extra: