DSO Component Library

# Modal: Confirm

WIP

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

`

    <!-- When modal is open add .dso-modal-open to body -->

    <body class="dso-modal-open">
        <!-- Modal markup. Can be placed anywhere inside <body> -->
        <div class="dso-modal dso-confirm" tabindex="-1" role="dialog" aria-labelledby="modal-confirm">
            <div class="dso-dialog" role="document">
                <div class="dso-header">
                    <h2 id="modal-confirm">Activiteit toevoegen</h2>
                </div>
                <div class="dso-body">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
                </div>
                <div class="dso-footer">
                    <button type="button" class="btn btn-default">
                Ja
              </button>
                    <button type="button" class="btn btn-default">
                Nee
              </button>
                </div>
            </div>
        </div>

        <div class="container">
            <!-- Page 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>

        </div>
    </body>

`
`

    <!-- When modal is open add .dso-modal-open to body -->
    <body class="dso-modal-open">
      <!-- Modal markup. Can be placed anywhere inside <body> -->
      <div class="dso-modal{{#if confirm }} dso-confirm{{/if}}" tabindex="-1" role="dialog" aria-labelledby="{{ id }}">
        <div class="dso-dialog" role="document">
          <div class="dso-header">
            <h2 id="{{ id }}">{{ heading }}</h2>
            {{#if closeButton }}
              <button type="button" class="dso-close" aria-label="Sluiten"></button>
            {{/if}}
          </div>
          <div class="dso-body">
            <p>{{ body }}</p>
          </div>
          <div class="dso-footer">
            {{#each buttons }}
              {{> '@button' }}
            {{/each}}
          </div>
        </div>
      </div>

      <div class="container">
        <!-- Page content -->
        {{render '@form' }}
      </div>
    </body>

`
`

    id: modal-confirm
    heading: Activiteit toevoegen
    body: >-
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
      ligula eget dolor. Aenean massa.
    buttons:
      - name: yesButton
        type: button
        modifier: default
        label: Ja
      - name: noButton
        type: button
        modifier: default
        label: Nee
    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
    submitButton:
      type: submit
      modifier: primary
      label: Verstuur
    confirm: true

`

- Handle: @modal--modal-confirm
- Variants (6): Modal , Closable , Single submit , Single cancel , Steps , Confirm
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\02-content\modal\modal.hbs
- References (2): @button, @form

There are no notes for this item.

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

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

`<h2 id="modal-no-close">Activiteit toevoegen</h2>`

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

`<h2 id="modal-no-close">Activiteit toevoegen</h2>`

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

Check that the title element describes the document.

`<title>Modal`

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

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

`<button type="submit" class="btn btn-primary"> Toevoegen </button>`

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