DSO Component Library

# Form: Form Horizontal

WIP

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <form class="form-horizontal">
        <fieldset class="dso-form-fields">
            <legend class="sr-only">Form Horizontal</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>
        <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: Form Horizontal
    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
    submitButton:
      type: submit
      modifier: primary
      label: Verstuur
    formModifier: form-horizontal

`

- Handle: @form--form-horizontal
- Variants (2): Form Vertical , Form Horizontal
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\03-forms\form.hbs
- References (1): @button

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:

- https://getbootstrap.com/docs/3.3/css/#forms
- H91: Using HTML form controls and links

### 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> <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> <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> <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> <div class="dso-form-buttons"> <button type="submit" class="btn btn-primary"> Verstuur </button> </div> </form>`