DSO Component Library

Voorbeeld 

<form class="form-horizontal">
    <fieldset class="form-fields">
        <legend class="sr-only">Horizontal form</legend>
        <fieldset>
            <legend>Contact</legend>
            <div class="form-group input text">
                <label for="voornaam" class="control-label">Voornaam</label>
                <div class="field-container">
                    <input type="text" id="voornaam" class="form-control" />
                </div>
            </div>
            <div class="form-group input text">
                <label for="achternaam" class="control-label">Achternaam</label>
                <div class="field-container">
                    <input type="text" id="achternaam" class="form-control" aria-describedby="helpTextId_achternaam" />
                    <p class="help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p>
                </div>
            </div>
            <div class="form-group static">
                <label class="control-label">Geslacht</label>
                <p class="field-container">
                    Man
                </p>
            </div>
            <div class="form-group input email">
                <label for="email" class="control-label">E-mailadres</label>
                <div class="field-container">
                    <input type="email" id="email" class="form-control" />
                </div>
            </div>
            <div class="form-group input password">
                <label for="password" class="control-label">Wachtwoord</label>
                <div class="field-container">
                    <input type="password" id="password" class="form-control" />
                </div>
            </div>
            <div class="form-group input password">
                <label for="password_bevestig" class="control-label">Wachtwoord (bevestig)</label>
                <div class="field-container">
                    <input type="password" id="password_bevestig" class="form-control" />
                </div>
            </div>
            <div class="form-group confirm">
                <div class="field-container">
                    <div class="checkbox">
                        <label>
                  <input type="checkbox"
                    
                     /> Stuur mij de maandelijkse nieuwsbrief
                </label>
                    </div>
                    <p class="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 select multiple">
                <label for="beleg" class="control-label">Beleg</label>
                <div class="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 select">
                <label for="auto_merk" class="control-label">Type auto</label>
                <div class="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="marcedes" selected>Mercedes</option>
                      <option value="volkswagen">Volkswagen</option>
                  </optgroup>
              </select>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>Aanhanger</legend>
            <fieldset class="form-group radios">
                <legend class="control-label">Welke aanhanger</legend>
                <div class="field-container">
                    <div class="radio">
                        <label>
                    <input type="radio" name="aanhanger" value="bak"
                      
                      
                       />
                    Bak
                  </label>
                    </div>
                    <div class="radio">
                        <label>
                    <input type="radio" name="aanhanger" value="caravan"
                      
                      
                      checked />
                    Caravan
                  </label>
                    </div>
                    <div class="radio">
                        <label>
                    <input type="radio" name="aanhanger" value="fietsendrager"
                      
                      
                       />
                    Fietsendrager
                  </label>
                    </div>
                    <div class="radio">
                        <label>
                    <input type="radio" name="aanhanger" value="oplegger"
                      
                      
                       />
                    Oplegger
                  </label>
                    </div>
                </div>
            </fieldset>
        </fieldset>
        <fieldset>
            <legend>Vraag</legend>
            <div class="form-group textarea">
                <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 class="field-container">
                    <textarea class="form-control" id="gekke_vraag" rows="5"></textarea>
                    <p class="help-block" id="helpTextId_gekke_vraag">Deze vraag heeft een toelichting</p>
                </div>
            </div>
        </fieldset>
    </fieldset>
    <div class="form-buttons">
        <button type="submit" class="btn btn-primary">
        Verstuur
    </button>
    </div>
</form>
 
<form class="form-horizontal">
  <fieldset class="form-fields">
    <legend class="sr-only">Horizontal form</legend>
    {{#each fieldsets }}
      <fieldset>
        <legend>{{ legend }}</legend>
        {{#each groups }}
          {{> (concat '@horizontal-group-' type) }}
        {{/each}}
      </fieldset>
    {{/each}}
  </fieldset>
  <div class="form-buttons">
    {{> '@button' submitButton }}
  </div>
</form>
 
fieldsets:
  - legend: Contact
    groups:
      - id: voornaam
        type: input
        inputType: text
        label: Voornaam
      - id: achternaam
        type: input
        inputType: text
        label: Achternaam
        helpText: Mag ook de familienaam zijn
      - type: static
        label: Geslacht
        value: Man
      - id: email
        type: input
        inputType: email
        label: E-mailadres
      - id: password
        type: input
        inputType: password
        label: Wachtwoord
      - id: password_bevestig
        type: input
        inputType: password
        label: Wachtwoord (bevestig)
      - id: nieuwsbrief
        type: confirm
        label: Stuur mij de maandelijkse nieuwsbrief
        helpText: Uw gegevens zullen niet worden gedeeld met derden
  - legend: Beleg
    groups:
      - id: beleg
        type: 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
        type: select
        label: Type auto
        options:
          - optionType: Europees
            items:
              - value: alfa
                label: Alfa Romeo
              - value: fiat
                label: Fiat
              - value: marcedes
                label: Mercedes
                selected: true
              - value: volkswagen
                label: Volkswagen
  - legend: Aanhanger
    groups:
      - id: aanhanger
        type: 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
        type: 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
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.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 eindigd altijd met een dubbelepunt.

Extra: