<form>
    <fieldset class="dso-form-fields">
        <legend class="sr-only">Vertical Form</legend>
        <fieldset>
            <legend>Contact</legend>
            <div class="form-group dso-input dso-input-text dso-required">
                <div class="dso-label-container">
                    <label for="voornaam" class="control-label">
                        Voornaam
                    </label>
                </div>
                <div class="dso-field-container">
                    <input type="text" id="voornaam" class="form-control" required />
                </div>
            </div>
            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="achternaam" class="control-label">
                        Achternaam
                    </label>
                </div>
                <div class="dso-field-container">
                    <input type="text" id="achternaam" class="form-control" />
                    <p class="dso-help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p>
                </div>
            </div>
            <div class="form-group dso-static">
                <div class="dso-label-container">
                    <label class="control-label">Geslacht</label>
                </div>
                <div class="dso-field-container">
                    <p>Man</p>
                </div>
            </div>
            <div class="form-group dso-input dso-input-text has-feedback">
                <div class="dso-label-container">
                    <label for="geboortedatum" class="control-label">
                        Geboortedatum
                    </label>
                </div>
                <div class="dso-field-container">
                    <input type="text" id="geboortedatum" class="form-control" />
                    <span class="fas fa-calendar form-control-feedback" aria-hidden="true"></span>
                </div>
            </div>
            <div class="form-group dso-input dso-input-text dso-required">
                <div class="dso-label-container">
                    <label for="email" class="control-label">
                        E-mailadres
                    </label>
                </div>
                <div class="dso-field-container">
                    <input type="text" id="email" class="form-control" required />
                </div>
            </div>
            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="password" class="control-label">
                        Wachtwoord
                    </label>
                </div>
                <div class="dso-field-container">
                    <input type="text" id="password" class="form-control" />
                </div>
            </div>
            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="password_bevestig" class="control-label">
                        Wachtwoord (bevestig)
                    </label>
                </div>
                <div class="dso-field-container">
                    <input type="text" id="password_bevestig" class="form-control" />
                </div>
            </div>
            <div class="form-group dso-confirm">
                <div class="dso-field-container">
                    <div class="dso-selectable">
                        <input type="checkbox" id="nieuwsbrief" name="" value="" />
                        <label for="nieuwsbrief">
                            Stuur mij de maandelijkse nieuwsbrief
                        </label>
                    </div>
                    <p class="dso-help-block" id="helpTextId_nieuwsbrief">Uw gegevens zullen niet worden gedeeld met derden</p>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>Beleg</legend>
            <div class="form-group dso-select dso-multiple">
                <div class="dso-label-container">
                    <label for="beleg" class="control-label">
                        Beleg
                    </label>
                </div>
                <div class="dso-field-container">
                    <select id="beleg" class="form-control" multiple>
                        <optgroup label="Vlees">
                            <option value="worst">Worst</option>
                            <option value="salami">Salami</option>
                            <option value="geit">Geit</option>
                        </optgroup>
                        <optgroup label="Vis">
                            <option value="zalm">Zalm</option>
                            <option value="makreel">Makreel</option>
                        </optgroup>
                    </select>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>Auto merk</legend>
            <div class="form-group dso-select">
                <div class="dso-label-container">
                    <label for="auto_merk" class="control-label">
                        Type auto
                    </label>
                </div>
                <div class="dso-field-container">
                    <select id="auto_merk" class="form-control">
                        <optgroup label="Europees">
                            <option value="alfa">Alfa Romeo</option>
                            <option value="fiat">Fiat</option>
                            <option value="mercedes" selected>Mercedes</option>
                            <option value="volkswagen">Volkswagen</option>
                        </optgroup>
                    </select>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>Aanhanger</legend>
            <fieldset class="form-group dso-radios">
                <legend class="dso-label-container">
                    <label class="control-label">
                        Welke aanhanger
                    </label>
                </legend>
                <div class="dso-field-container">
                    <div class="dso-selectable">
                        <input type="radio" id="aanhanger-0" name="aanhanger" value="bak" />
                        <label for="aanhanger-0">
                            Bak
                        </label>
                    </div>
                    <div class="dso-selectable">
                        <input type="radio" id="aanhanger-1" name="aanhanger" value="caravan" checked />
                        <label for="aanhanger-1">
                            Caravan
                        </label>
                    </div>
                    <div class="dso-selectable">
                        <input type="radio" id="aanhanger-2" name="aanhanger" value="fietsendrager" />
                        <label for="aanhanger-2">
                            Fietsendrager
                        </label>
                    </div>
                    <div class="dso-selectable">
                        <input type="radio" id="aanhanger-3" name="aanhanger" value="oplegger" />
                        <label for="aanhanger-3">
                            Oplegger
                        </label>
                    </div>
                </div>
            </fieldset>
        </fieldset>
        <fieldset>
            <legend>Vraag</legend>
            <div class="form-group dso-textarea">
                <div class="dso-label-container">
                    <label for="gekke_vraag" class="control-label">
                        Waarom heeft een tankstation dat 24 uur per dag open is een slot op de deur?
                    </label>
                </div>
                <div class="dso-field-container">
                    <textarea class="form-control" id="gekke_vraag" rows="5"></textarea>
                    <p class="dso-help-block" id="helpTextId_gekke_vraag">Deze vraag heeft een toelichting</p>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>Vraag met infobutton</legend>
            <fieldset class="form-group dso-radios">
                <legend class="dso-label-container">
                    <label class="control-label">
                        Blieft u een toelichting?
                    </label>
                    <button type="button" class="btn dso-field-info-button">
                        <span class="sr-only">
                            Toelichting
                        </span>
                    </button>
                </legend>
                <div class="dso-field-container">
                    <div class="dso-selectable">
                        <input type="radio" id="input-radio-infobutton-0" name="input-radio-infobutton" value="1" checked />
                        <label for="input-radio-infobutton-0">
                            ja
                        </label>
                        <button type="button" class="btn dso-field-info-button">
                            <span class="sr-only">
                                Toelichting
                            </span>
                        </button>
                    </div>
                    <div class="dso-selectable">
                        <input type="radio" id="input-radio-infobutton-1" name="input-radio-infobutton" value="2" />
                        <label for="input-radio-infobutton-1">
                            nee
                        </label>
                    </div>
                </div>
            </fieldset>
        </fieldset>
        <fieldset>
            <legend>Vraag met infobutton uitgeklapt</legend>
            <fieldset class="form-group dso-radios">
                <legend class="dso-label-container">
                    <label class="control-label">
                        Toelichting op uw vraag
                    </label>
                    <button type="button" class="btn dso-field-info-button dso-open">
                        <span class="sr-only">
                            Toelichting
                        </span>
                    </button>
                </legend>
                <div class="dso-field-container">
                    <div class="dso-selectable">
                        <input type="radio" id="input-radio-infobutton-open-0" name="input-radio-infobutton-open" value="1" checked />
                        <label for="input-radio-infobutton-open-0">
                            ja
                        </label>
                        <button type="button" class="btn dso-field-info-button">
                            <span class="sr-only">
                                Toelichting
                            </span>
                        </button>
                    </div>
                    <div class="dso-selectable">
                        <input type="radio" id="input-radio-infobutton-open-1" name="input-radio-infobutton-open" value="2" />
                        <label for="input-radio-infobutton-open-1">
                            nee
                        </label>
                    </div>
                </div>
                <div class="dso-field-info">
                    <button type="button">
                        <span class="sr-only">Sluiten</span>
                    </button>
                    <div class="dso-rich-content">
                        <h4>Let op</h4>
                        <p>Bij verticale formulieren wordt het bij checkboxen en radio's onoverzichtelijk als de toelichting bij de vraag EN opties toont</p>

                    </div>
                </div>
            </fieldset>
        </fieldset>
    </fieldset>
    <div class="dso-form-buttons">
        <button type="submit" class="btn btn-primary">
            Verstuur
        </button>
    </div>
</form>
<form{{#if formModifier }} class="{{ formModifier }}"{{/if}}>
  <fieldset class="dso-form-fields">
    <legend class="sr-only">{{ formLegend }}</legend>
    {{#each fieldsets }}
      <fieldset>
        <legend>{{ legend }}</legend>
        {{#each groups }}
          {{> (concat '@group-' inputType) }}
        {{/each}}
      </fieldset>
    {{/each}}
  </fieldset>
  <div class="dso-form-buttons">
    {{> '@button' submitButton }}
  </div>
</form>
formLegend: Vertical Form
fieldsets:
  - legend: Contact
    groups:
      - id: voornaam
        inputType: input
        type: text
        label: Voornaam
        required: true
      - id: achternaam
        inputType: input
        type: text
        label: Achternaam
        helpText: Mag ook de familienaam zijn
      - inputType: static
        label: Geslacht
        value: Man
      - id: geboortedatum
        inputType: input
        type: text
        label: Geboortedatum
        inputIcon: fas fa-calendar
      - id: email
        inputType: input
        type: text
        label: E-mailadres
        required: true
      - id: password
        inputType: input
        type: text
        label: Wachtwoord
      - id: password_bevestig
        inputType: input
        type: text
        label: Wachtwoord (bevestig)
      - id: nieuwsbrief
        inputType: confirm
        label: Stuur mij de maandelijkse nieuwsbrief
        helpText: Uw gegevens zullen niet worden gedeeld met derden
  - legend: Beleg
    groups:
      - id: beleg
        inputType: select
        label: Beleg
        multiple: true
        options:
          - optionType: Vlees
            items:
              - value: worst
                label: Worst
              - value: salami
                label: Salami
              - value: geit
                label: Geit
          - optionType: Vis
            items:
              - value: zalm
                label: Zalm
              - value: makreel
                label: Makreel
  - legend: Auto merk
    groups:
      - id: auto_merk
        inputType: select
        label: Type auto
        options:
          - optionType: Europees
            items:
              - value: alfa
                label: Alfa Romeo
              - value: fiat
                label: Fiat
              - value: mercedes
                label: Mercedes
                selected: true
              - value: volkswagen
                label: Volkswagen
  - legend: Aanhanger
    groups:
      - id: aanhanger
        inputType: radios
        label: Welke aanhanger
        options:
          - value: bak
            label: Bak
          - value: caravan
            label: Caravan
            checked: true
          - value: fietsendrager
            label: Fietsendrager
          - value: oplegger
            label: Oplegger
  - legend: Vraag
    groups:
      - id: gekke_vraag
        inputType: textarea
        rows: 5
        label: >-
          Waarom heeft een tankstation dat 24 uur per dag open is een slot op de
          deur?
        helpText: Deze vraag heeft een toelichting
  - legend: Vraag met infobutton
    groups:
      - id: input-radio-infobutton
        inputType: radios
        label: Blieft u een toelichting?
        options:
          - value: 1
            label: ja
            checked: true
            infoOpen: null
            infoText: |
              Empty
          - value: 2
            label: nee
        infoOpen: null
        infoText: |
          Empty
  - legend: Vraag met infobutton uitgeklapt
    groups:
      - id: input-radio-infobutton-open
        inputType: radios
        label: Toelichting op uw vraag
        options:
          - value: 1
            label: ja
            checked: true
            infoOpen: null
            infoText: Empty
          - value: 2
            label: nee
        infoOpen: true
        infoText: >
          <h4>Let op</h4>

          <p>Bij verticale formulieren wordt het bij checkboxen en radio's
          onoverzichtelijk als de toelichting bij de vraag EN opties toont</p>
submitButton:
  type: submit
  modifier: primary
  label: Verstuur

Een formulier begint altijd met een form element. 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.

Extra: