DSO 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="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:

WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141

The heading structure is not logically nested. This h4 element appears to be the primary document heading, so should be an h1 element.

<h4>Let op</h4>

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<legend class="sr-only">Vertical Form</legend>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Form Vertical

NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

<input type="text" id="voornaam" class="form-control" required="">

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_1.G83,G84,G85

If an input error is automatically detected in this form, check that the item(s) in error are identified and the error(s) are described to the user in text.

<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>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_2.G131,G89,G184,H90

Check that descriptive labels or instructions (including for required fields) are provided for user input in this form.

<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>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_3.G177

Check that this form provides suggested corrections to errors in user input, unless it would jeopardize the security or purpose of the content.

<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>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_4.G98,G99,G155,G164,G168.LegalForms

If this form would bind a user to a financial or legal commitment, modify/delete user-controllable data, or submit test responses, ensure that submissions are either reversible, checked for input errors, and/or confirmed by the user.

<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>