DSO Toolkit | Component Library

Form: Form Vertical 

<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="form-control-feedback" aria-hidden="true">
                        <svg class="di di-calendar">
                            <use href="../../dso-icons.svg#calendar" />
                        </svg> </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>Bijlagen</legend>
            <div class="form-group dso-files">
                <div class="dso-description dso-rich-content">
                    Geef een tekening van de nieuwe situatie in 1:100. Een situatietekening geeft een schets van de bestaande en de nieuwe situatie met daarop duidelijk de maatvoering en de schaalaanduiding (1:100).
                </div>
                <ul class="dso-filelist">
                    <li>
                        <div class="dso-filename">
                            Schetsen_en_foto’s_1.pdf
                        </div>
                        <div class="dso-confidential dso-selectable">
                            <input type="checkbox" id="input-confirm-0" name="" value="" />
                            <label for="input-confirm-0">
                                Vertrouwelijk
                            </label>
                        </div>
                        <button type="button" class="btn btn-link dso-remove">
                            <span>Verwijder document</span>
                        </button>
                    </li>
                    <li>
                        <div class="dso-filename">
                            Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
                        </div>
                        <div class="dso-confidential dso-selectable">
                            <input type="checkbox" id="input-confirm-1" name="" value="" checked />
                            <label for="input-confirm-1">
                                Vertrouwelijk
                            </label>
                        </div>
                        <svg class="di di-status-warning">
                            <use href="../../dso-icons.svg#status-warning" />
                        </svg> <button type="button" class="btn btn-link dso-remove">
                            <span>Verwijder document</span>
                        </button>
                    </li>
                </ul>
                <div class="alert alert-warning" role="alert">

                    <div class="dso-rich-content">
                        <p>U vraagt of wij een document vertrouwelijk willen behandelen. Hiervoor moet u twee dingen doen:</p>
                        <ol>
                            <li>Voeg ook een publiceerbaar document zonder vertrouwelijke informatie toe.</li>
                            <li>Geef per document de reden op als toelichting op het verzoek in de laatste stap van uw aanvraag.</li>
                        </ol>
                        <p>Er zal worden beoordeeld of uw vraag terecht is. U krijgt hiervan bericht.</p>
                    </div>

                </div>

                <!-- To use an input type="file" element -->
                <div class="dso-file-upload">
                    <input type="file" id="file-upload" />
                    <label class="btn btn-link" for="file-upload">
                        <svg class="di di-plus">
                            <use href="../../dso-icons.svg#plus" />
                        </svg><span>Document toevoegen</span>
                    </label>
                </div>

                <!-- Or to trigger the upload using a button element (not recommended) -->
                <!--
              <button type="button" class="btn btn-link" >
                <svg class="di di-plus">
                <use href="../../dso-icons.svg#plus" />
              </svg><span>Document toevoegen</span>
              </button>
            -->
            </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-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-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-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-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-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="button" class="btn btn-link">
            <span>Annuleren</span>
        </button>
        <button type="submit" class="btn btn-primary">
            <span>Verstuur</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: 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: 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: Bijlagen
    groups:
      - id: documenten
        inputType: files
        description: >-
          Geef een tekening van de nieuwe situatie in 1:100. Een
          situatietekening geeft een schets van de bestaande en de nieuwe
          situatie met daarop duidelijk de maatvoering en de schaalaanduiding
          (1:100).
        files:
          - filename: Schetsen_en_foto’s_1.pdf
          - filename: Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
            confidential: true
  - 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: false
            infoText: |
              Empty
          - value: 2
            label: nee
        infoOpen: false
        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: false
            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>
buttons:
  - type: button
    modifier: link
    label: Annuleren
  - type: submit
    modifier: primary
    label: Verstuur

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: