<form class="form-vertical">
    <fieldset class="form-fields">
        <legend class="sr-only">Vertical form</legend>
        <fieldset>
            <legend>Contact</legend>
            <div class="form-group input text">
                <label for="voornaam">Voornaam</label>
                <input type="text" id="voornaam" class="form-control" />
            </div>
            <div class="form-group input text">
                <label for="achternaam">Achternaam</label>
                <input type="text" id="achternaam" class="form-control" />
                <p class="help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p>
            </div>
            <div class="form-group input email">
                <label for="email">E-mailadres</label>
                <input type="email" id="email" class="form-control" />
            </div>
            <div class="form-group input password">
                <label for="password">Wachtwoord</label>
                <input type="password" id="password" class="form-control" />
            </div>
            <div class="form-group input password">
                <label for="password_bevestig">Wachtwoord (bevestig)</label>
                <input type="password" id="password_bevestig" class="form-control" />
            </div>
            <div class="form-group static">
                <label class="control-label">Product</label>
                <p class="field-container">
                    4.4.1738
                </p>
            </div>
            <div class="form-group confirm">
                <div class="checkbox">
                    <label>
                <input type="checkbox"
                  
                   /> Stuur mij de maandelijkse nieuwsbrief
              </label>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>Beleg</legend>
            <div class="form-group select multiple">
                <label for="beleg">Beleg</label>
                <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>
        </fieldset>
        <fieldset>
            <legend>Vervoer</legend>
            <div class="form-group select">
                <label for="auto_merk">Type auto</label>
                <select id="auto_merk" class="form-control">
                <optgroup label="Europees">
                    <option value="alfa">Alfa Romeo</option>
                    <option value="fiat">Fiat</option>
                    <option value="marcedes" selected>Mercedes</option>
                    <option value="volkswagen">Volkswagen</option>
                </optgroup>
            </select>
            </div>
            <fieldset class="form-group radios">
                <legend class="control-label">Aanhanger2</legend>
                <div class="radio">
                    <label>
                  <input type="radio" name="aanhanger" value="bak" /> Bak
                </label>
                </div>
                <div class="radio">
                    <label>
                  <input type="radio" name="aanhanger" value="caravan" checked /> Caravan
                </label>
                </div>
                <div class="radio">
                    <label>
                  <input type="radio" name="aanhanger" value="fietsendrager" /> Fietsendrager
                </label>
                </div>
                <div class="radio">
                    <label>
                  <input type="radio" name="aanhanger" value="oplegger" /> Oplegger
                </label>
                </div>
            </fieldset>
        </fieldset>
        <fieldset>
            <legend>Vraag</legend>
            <div class="form-group textarea">
                <label for="gekke_vraag">Waarom heeft een tankstation dat 24 uur per dag open is een slot op de deur?</label>
                <textarea class="form-control" id="gekke_vraag" rows="5"></textarea>
                <p class="help-block" id="helpTextId_gekke_vraag">Deze vraag heeft een toelichting</p>
            </div>
        </fieldset>
    </fieldset>
    <div class="form-buttons">
        <button type="submit" class="btn btn-primary">
        Verstuur
    </button>
    </div>
</form>
<form class="form-vertical">
  <fieldset class="form-fields">
    <legend class="sr-only">Vertical form</legend>
    {{#each fieldsets }}
      <fieldset>
        <legend>{{ legend }}</legend>
        {{#each groups }}
          {{> (concat '@vertical-group-' type) }}
        {{/each}}
      </fieldset>
    {{/each}}
  </fieldset>
  <div class="form-buttons">
    {{> '@button' submitButton }}
  </div>
</form>
fieldsets:
  - legend: Contact
    groups:
      - id: voornaam
        type: input
        inputType: text
        label: Voornaam
      - id: achternaam
        type: input
        inputType: text
        label: Achternaam
        helpText: Mag ook de familienaam zijn
      - id: email
        type: input
        inputType: email
        label: E-mailadres
      - id: password
        type: input
        inputType: password
        label: Wachtwoord
      - id: password_bevestig
        type: input
        inputType: password
        label: Wachtwoord (bevestig)
      - id: product
        type: static
        label: Product
        value: 4.4.1738
      - id: nieuwsbrief
        type: confirm
        label: Stuur mij de maandelijkse nieuwsbrief
  - legend: Beleg
    groups:
      - id: beleg
        type: select
        label: Beleg
        multiple: true
        options:
          - optionType: Vlees
            items:
              - value: worst
                label: Worst
              - value: salami
                label: Salami
              - value: geit
                label: Geit
          - optionType: Vis
            items:
              - value: zalm
                label: Zalm
              - value: makreel
                label: Makreel
  - legend: Vervoer
    groups:
      - id: auto_merk
        type: select
        label: Type auto
        options:
          - optionType: Europees
            items:
              - value: alfa
                label: Alfa Romeo
              - value: fiat
                label: Fiat
              - value: marcedes
                label: Mercedes
                selected: true
              - value: volkswagen
                label: Volkswagen
      - id: aanhanger
        type: radios
        label: Aanhanger2
        options:
          - value: bak
            label: Bak
          - value: caravan
            label: Caravan
            checked: true
          - value: fietsendrager
            label: Fietsendrager
          - value: oplegger
            label: Oplegger
  - legend: Vraag
    groups:
      - id: gekke_vraag
        type: textarea
        rows: 5
        label: >-
          Waarom heeft een tankstation dat 24 uur per dag open is een slot op de
          deur?
        helpText: Deze vraag heeft een toelichting
submitButton:
  type: submit
  modifier: primary
  label: Verstuur

Een formulier begint altijd met een form element. Elke textuele input en select zit in een .form-group. Elk formulier onderdeel is een groep met een label.

Alle elementen zitten in een fieldset met een legend. De legend kan verborgen worden met een .sr-only. De form submit (en eventueel een form reset) staat buiten de fieldset.

  • Een eventuele toelichting zit in een p.help-block. Als er een toelichting is, dient deze met een @aria-describedby aan de input gekoppeld te worden.
  • Een label bij een textuele input of select eindigd altijd met een dubbelepunt.

Extra:

WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1.H44.NonExistentFragment

This label's "for" attribute contains an ID that does not exist in the document fragment.

<label class="control-label">Product</label>

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

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

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 class="form-vertical"> <fieldset class="form-fields"> <legend class="sr-only">Vertical form</legend> <fieldset> <legend>Contact</legend> <div class="form-group input text"> <label for="voornaam">Voornaam</label> <input type="text" id="voornaam" class="form-control"> </div> <div class="form-group input text"> <label for="achternaam">Achternaam</label> <input type="text" id="achternaam" class="form-control"> <p class="help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p> </div> <div class="form-group input email"> <label for="email">E-mailadres</label> <input type="email" id="email" class="form-control"> </div> <div class="form-group input password"> <label for="password">Wachtwoord</label> <input type="password" id="password" class="form-control"> </div> <div class="form-group input password"> <label for="password_bevestig">Wachtwoord (bevestig)</label> <input type="password" id="password_bevestig" class="form-control"> </div> <div class="form-group static"> <label class="control-label">Product</label> <p class="field-container"> 4.4.1738 </p> </div> <div class="form-group confirm"> <div class="checkbox"> <label> <input type="checkbox"> Stuur mij de maandelijkse nieuwsbrief </label> </div> </div> </fieldset> <fieldset> <legend>Beleg</legend> <div class="form-group select multiple"> <label for="beleg">Beleg</label> <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> </fieldset> <fieldset> <legend>Vervoer</legend> <div class="form-group select"> <label for="auto_merk">Type auto</label> <select id="auto_merk" class="form-control"> <optgroup label="Europees"> <option value="alfa">Alfa Romeo</option> <option value="fiat">Fiat</option> <option value="marcedes" selected="">Mercedes</option> <option value="volkswagen">Volkswagen</option> </optgroup> </select> </div> <fieldset class="form-group radios"> <legend class="control-label">Aanhanger2</legend> <div class="radio"> <label> <input type="radio" name="aanhanger" value="bak"> Bak </label> </div> <div class="radio"> <label> <input type="radio" name="aanhanger" value="caravan" checked=""> Caravan </label> </div> <div class="radio"> <label> <input type="radio" name="aanhanger" value="fietsendrager"> Fietsendrager </label> </div> <div class="radio"> <label> <input type="radio" name="aanhanger" value="oplegger"> Oplegger </label> </div> </fieldset> </fieldset> <fieldset> <legend>Vraag</legend> <div class="form-group textarea"> <label for="gekke_vraag">Waarom heeft een tankstation dat 24 uur per dag open is een slot op de deur?</label> <textarea class="form-control" id="gekke_vraag" rows="5"></textarea> <p class="help-block" id="helpTextId_gekke_vraag">Deze vraag heeft een toelichting</p> </div> </fieldset> </fieldset> <div class="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 class="form-vertical"> <fieldset class="form-fields"> <legend class="sr-only">Vertical form</legend> <fieldset> <legend>Contact</legend> <div class="form-group input text"> <label for="voornaam">Voornaam</label> <input type="text" id="voornaam" class="form-control"> </div> <div class="form-group input text"> <label for="achternaam">Achternaam</label> <input type="text" id="achternaam" class="form-control"> <p class="help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p> </div> <div class="form-group input email"> <label for="email">E-mailadres</label> <input type="email" id="email" class="form-control"> </div> <div class="form-group input password"> <label for="password">Wachtwoord</label> <input type="password" id="password" class="form-control"> </div> <div class="form-group input password"> <label for="password_bevestig">Wachtwoord (bevestig)</label> <input type="password" id="password_bevestig" class="form-control"> </div> <div class="form-group static"> <label class="control-label">Product</label> <p class="field-container"> 4.4.1738 </p> </div> <div class="form-group confirm"> <div class="checkbox"> <label> <input type="checkbox"> Stuur mij de maandelijkse nieuwsbrief </label> </div> </div> </fieldset> <fieldset> <legend>Beleg</legend> <div class="form-group select multiple"> <label for="beleg">Beleg</label> <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> </fieldset> <fieldset> <legend>Vervoer</legend> <div class="form-group select"> <label for="auto_merk">Type auto</label> <select id="auto_merk" class="form-control"> <optgroup label="Europees"> <option value="alfa">Alfa Romeo</option> <option value="fiat">Fiat</option> <option value="marcedes" selected="">Mercedes</option> <option value="volkswagen">Volkswagen</option> </optgroup> </select> </div> <fieldset class="form-group radios"> <legend class="control-label">Aanhanger2</legend> <div class="radio"> <label> <input type="radio" name="aanhanger" value="bak"> Bak </label> </div> <div class="radio"> <label> <input type="radio" name="aanhanger" value="caravan" checked=""> Caravan </label> </div> <div class="radio"> <label> <input type="radio" name="aanhanger" value="fietsendrager"> Fietsendrager </label> </div> <div class="radio"> <label> <input type="radio" name="aanhanger" value="oplegger"> Oplegger </label> </div> </fieldset> </fieldset> <fieldset> <legend>Vraag</legend> <div class="form-group textarea"> <label for="gekke_vraag">Waarom heeft een tankstation dat 24 uur per dag open is een slot op de deur?</label> <textarea class="form-control" id="gekke_vraag" rows="5"></textarea> <p class="help-block" id="helpTextId_gekke_vraag">Deze vraag heeft een toelichting</p> </div> </fieldset> </fieldset> <div class="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 class="form-vertical"> <fieldset class="form-fields"> <legend class="sr-only">Vertical form</legend> <fieldset> <legend>Contact</legend> <div class="form-group input text"> <label for="voornaam">Voornaam</label> <input type="text" id="voornaam" class="form-control"> </div> <div class="form-group input text"> <label for="achternaam">Achternaam</label> <input type="text" id="achternaam" class="form-control"> <p class="help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p> </div> <div class="form-group input email"> <label for="email">E-mailadres</label> <input type="email" id="email" class="form-control"> </div> <div class="form-group input password"> <label for="password">Wachtwoord</label> <input type="password" id="password" class="form-control"> </div> <div class="form-group input password"> <label for="password_bevestig">Wachtwoord (bevestig)</label> <input type="password" id="password_bevestig" class="form-control"> </div> <div class="form-group static"> <label class="control-label">Product</label> <p class="field-container"> 4.4.1738 </p> </div> <div class="form-group confirm"> <div class="checkbox"> <label> <input type="checkbox"> Stuur mij de maandelijkse nieuwsbrief </label> </div> </div> </fieldset> <fieldset> <legend>Beleg</legend> <div class="form-group select multiple"> <label for="beleg">Beleg</label> <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> </fieldset> <fieldset> <legend>Vervoer</legend> <div class="form-group select"> <label for="auto_merk">Type auto</label> <select id="auto_merk" class="form-control"> <optgroup label="Europees"> <option value="alfa">Alfa Romeo</option> <option value="fiat">Fiat</option> <option value="marcedes" selected="">Mercedes</option> <option value="volkswagen">Volkswagen</option> </optgroup> </select> </div> <fieldset class="form-group radios"> <legend class="control-label">Aanhanger2</legend> <div class="radio"> <label> <input type="radio" name="aanhanger" value="bak"> Bak </label> </div> <div class="radio"> <label> <input type="radio" name="aanhanger" value="caravan" checked=""> Caravan </label> </div> <div class="radio"> <label> <input type="radio" name="aanhanger" value="fietsendrager"> Fietsendrager </label> </div> <div class="radio"> <label> <input type="radio" name="aanhanger" value="oplegger"> Oplegger </label> </div> </fieldset> </fieldset> <fieldset> <legend>Vraag</legend> <div class="form-group textarea"> <label for="gekke_vraag">Waarom heeft een tankstation dat 24 uur per dag open is een slot op de deur?</label> <textarea class="form-control" id="gekke_vraag" rows="5"></textarea> <p class="help-block" id="helpTextId_gekke_vraag">Deze vraag heeft een toelichting</p> </div> </fieldset> </fieldset> <div class="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 class="form-vertical"> <fieldset class="form-fields"> <legend class="sr-only">Vertical form</legend> <fieldset> <legend>Contact</legend> <div class="form-group input text"> <label for="voornaam">Voornaam</label> <input type="text" id="voornaam" class="form-control"> </div> <div class="form-group input text"> <label for="achternaam">Achternaam</label> <input type="text" id="achternaam" class="form-control"> <p class="help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p> </div> <div class="form-group input email"> <label for="email">E-mailadres</label> <input type="email" id="email" class="form-control"> </div> <div class="form-group input password"> <label for="password">Wachtwoord</label> <input type="password" id="password" class="form-control"> </div> <div class="form-group input password"> <label for="password_bevestig">Wachtwoord (bevestig)</label> <input type="password" id="password_bevestig" class="form-control"> </div> <div class="form-group static"> <label class="control-label">Product</label> <p class="field-container"> 4.4.1738 </p> </div> <div class="form-group confirm"> <div class="checkbox"> <label> <input type="checkbox"> Stuur mij de maandelijkse nieuwsbrief </label> </div> </div> </fieldset> <fieldset> <legend>Beleg</legend> <div class="form-group select multiple"> <label for="beleg">Beleg</label> <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> </fieldset> <fieldset> <legend>Vervoer</legend> <div class="form-group select"> <label for="auto_merk">Type auto</label> <select id="auto_merk" class="form-control"> <optgroup label="Europees"> <option value="alfa">Alfa Romeo</option> <option value="fiat">Fiat</option> <option value="marcedes" selected="">Mercedes</option> <option value="volkswagen">Volkswagen</option> </optgroup> </select> </div> <fieldset class="form-group radios"> <legend class="control-label">Aanhanger2</legend> <div class="radio"> <label> <input type="radio" name="aanhanger" value="bak"> Bak </label> </div> <div class="radio"> <label> <input type="radio" name="aanhanger" value="caravan" checked=""> Caravan </label> </div> <div class="radio"> <label> <input type="radio" name="aanhanger" value="fietsendrager"> Fietsendrager </label> </div> <div class="radio"> <label> <input type="radio" name="aanhanger" value="oplegger"> Oplegger </label> </div> </fieldset> </fieldset> <fieldset> <legend>Vraag</legend> <div class="form-group textarea"> <label for="gekke_vraag">Waarom heeft een tankstation dat 24 uur per dag open is een slot op de deur?</label> <textarea class="form-control" id="gekke_vraag" rows="5"></textarea> <p class="help-block" id="helpTextId_gekke_vraag">Deze vraag heeft een toelichting</p> </div> </fieldset> </fieldset> <div class="form-buttons"> <button type="submit" class="btn btn-primary"> Verstuur </button> </div> </form>