Een formulier begint altijd met een form
-element. Als een form
-element ongewenst is kan een element met de class .form
worden ingezet. 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
.
p.dso-help-block
. Als er een toelichting is, dient deze met een @aria-describedby
aan de werkvorm gekoppeld te worden.input
of select
eindigt altijd met een dubbele punt.Buttons worden uitgelijnd afhankelijk van de context:
De uitzonderingen worden met de modifier .dso-single-page
ingezet (op het bovenliggende form
of .form
, of op .dso-form-buttons
zelf).
Het kan zijn dat de gebruiker fouten maakt tijdens het invullen van het formulier. We laten het de gebruiker op twee momenten weten als hij fouten maakt of een verplicht invoerveld overslaat.
Ten eerste wordt een invoerveld gevalideerd als de focus wordt verplaatst. Er verschijnt dan een instructie direct onder het invoerveld. En als tweede op het moment dat de gebruiker op de βsubmitβ-button klikt. Zet dan een samenvatting in een alert boven het formulier. Voorzie tegelijk de fout ingevulde invoervelden van inline validatie. Zet de focus in het eerste foutieve invoerveld. Om snel te kunnen navigeren, wordt er in de alert/samenvatting een lijst met anchor links opgenomen naar de betreffende invoervelden.
Verplichte velden
Op het moment dat de gebruiker focus verplaatst uit het verplichte invoerveld of het formulier indient, verschijnt er een foutmelding direct onder het betreffende invoerveld: dit is een .dso-message
waar met @aria-describedby
naar verwezen moet worden. Deze vorm van validatie wordt toegepast op alle formulierelementen.
Verplicht invoerformaat Net als de verplichte velden kunnen er ook verplichte invoerformaten zijn. Bijvoorbeeld een e-mailadres wat de vorm naam@domein.nl moet hebben. Het is belangrijk om vΓ³Γ³r het invoerveld duidelijk te maken wat de eisen zijn aan de invoer, Γ³f automatisch de invoer te corrigeren. Bijvoorbeeld: Postcode (1234 AB). Het beste is om de instructie binnen het labelelement te plaatsen zodat de instructie wordt voorgelezen als de bezoeker op het invoerveld staat.
De formulierwerkvormen kunnen voorzien worden van een:
.dso-message
).dso-help-block
).dso-info
)Al deze onderdelen dienen een uniek id
te krijgen, en daarnaar wordt verwezen met een aria-describedby
attribuut vanuit:
input
zelf (of textarea
of select
)fieldset
Als het formulier wordt ingediend en er zijn invoervelden niet of niet juist ingevuld, verschijnt er een alert boven het formulier. De alert krijgt een role="alert"
, zodat het direct door screenreaders wordt voorgelezen. In de alert staan één of meerdere anchor links naar de invoervelden. Zodra een invoerveld is gecorrigeerd, verdwijnt deze uit de melding.
Als het formulier accordions gebruikt, moet het duidelijk zijn waar de fout ingevulde invoervelden zich bevinden. Hiervoor tonen we een indicator-icoon op de betreffende accordion heading. Let op: bij geneste accordions moet ook de bovenliggende accordion een icoon krijgen. Zo is het fout ingevulde invoerveld te herleiden als de accordion is dichtgeklapt.
<!-- Form Vertical -->
<form>
<fieldset>
<legend>Contact</legend>
<div class="form-group dso-input dso-input-text dso-required">
<div class="dso-label-container">
<label for="form-vertical-voornaam" class="control-label">
Voornaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-vertical-voornaam" class="form-control" required>
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="form-vertical-achternaam" class="control-label">
Achternaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-vertical-achternaam" class="form-control" aria-describedby="helpTextId_form-vertical-achternaam">
<p class="dso-help-block" id="helpTextId_form-vertical-achternaam">Mag ook de familienaam zijn</p>
</div>
</div>
<div class="form-group dso-static">
<div class="dso-label-container">
<span class="control-label">Geslacht</span>
</div>
<div class="dso-field-container">
Man
</div>
</div>
<div class="form-group dso-input dso-input-text has-feedback">
<div class="dso-label-container">
<label for="form-vertical-geboortedatum" class="control-label">
Geboortedatum
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-vertical-geboortedatum" class="form-control">
<span class="form-control-feedback" aria-hidden="true">
<dso-icon icon="calendar"></dso-icon>
</span>
</div>
</div>
<div class="form-group dso-input dso-input-email dso-required">
<div class="dso-label-container">
<label for="form-vertical-email" class="control-label">
E-mailadres
</label>
</div>
<div class="dso-field-container">
<input type="email" id="form-vertical-email" class="form-control" required>
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="form-vertical-password" class="control-label">
Wachtwoord
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-vertical-password" class="form-control">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="form-vertical-password_bevestig" class="control-label">
Wachtwoord (bevestig)
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-vertical-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="form-vertical-nieuwsbrief" name="nieuwsbrief" aria-describedby="helpTextId_form-vertical-nieuwsbrief">
<label for="form-vertical-nieuwsbrief">
Stuur mij de maandelijkse nieuwsbrief
</label>
</div>
<p class="dso-help-block" id="helpTextId_form-vertical-nieuwsbrief">Uw gegevens zullen niet worden gedeeld met derden</p>
</div>
</div>
</fieldset>
<fieldset>
<legend>Bijlagen</legend>
<fieldset class="form-group dso-files">
<legend class="sr-only"></legend>
<div class="dso-label-container">
<label for="form-vertical-documenten" class="control-label" aria-hidden="true">
</label>
</div>
<div class="dso-field-container">
<ul class="dso-filelist">
<li>
<div class="dso-filename" id="form-vertical-documenten-file-filename-0">
Schetsen_en_foto's_1.pdf
</div>
<div class="dso-selectable dso-confidential">
<input type="checkbox" id="form-vertical-documenten-input-confirm-0" name="form-vertical-documenten-input-confirm-0" aria-describedby="form-vertical-documenten-file-filename-0">
<label for="form-vertical-documenten-input-confirm-0">
Vertrouwelijk
</label>
</div>
<button type="button" aria-describedby="form-vertical-documenten-file-filename-0" class="dso-tertiary dso-remove"><span>Verwijder document</span></button>
</li>
<li>
<div class="dso-filename" id="form-vertical-documenten-file-filename-1">
Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
</div>
<div class="dso-selectable dso-confidential">
<input type="checkbox" id="form-vertical-documenten-input-confirm-1" name="form-vertical-documenten-input-confirm-1" aria-describedby="form-vertical-documenten-file-filename-1" checked>
<label for="form-vertical-documenten-input-confirm-1">
Vertrouwelijk
</label>
</div>
<dso-icon icon="status-warning"></dso-icon>
<button type="button" aria-describedby="form-vertical-documenten-file-filename-1" class="dso-tertiary dso-remove"><span>Verwijder document</span></button>
</li>
</ul>
<dso-alert status="warning">
<div class="dso-rich-content">
<p>U vraagt of wij een document vertrouwelijk willen behandelen. Hiervoor moet u twee dingen doen:</p>
<ol>
<li>Voeg ook een publiceerbaar document zonder vertrouwelijke informatie toe.</li>
<li>Geef per document de reden op als toelichting op het verzoek in de laatste stap van uw aanvraag.</li>
</ol>
<p>Er zal worden beoordeeld of uw vraag terecht is. U krijgt hiervan bericht.</p>
</div>
</dso-alert>
<!-- To use an input type="file" element -->
<div class="dso-file-upload">
<input type="file" id="form-vertical-documenten-file-upload" />
<label class="dso-secondary" for="form-vertical-documenten-file-upload">
<dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
</label>
</div>
</div>
<!-- Or to trigger the upload using a button element (not recommended) -->
<!--
<button type="button"
class="dso-tertiary"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>
-->
</fieldset>
</fieldset>
<fieldset>
<legend>Beleg</legend>
<div class="form-group dso-select dso-multiple">
<div class="dso-label-container">
<label for="form-vertical-beleg" class="control-label">
Beleg
</label>
</div>
<div class="dso-field-container">
<select id="form-vertical-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="form-vertical-auto_merk" class="control-label">
Type auto
</label>
</div>
<div class="dso-field-container">
<select id="form-vertical-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>Filter op type</legend>
<div class="form-group dso-form-group-search-bar">
<div class="dso-label-container">
<label for="form-vertical-filter_type" class="control-label">
Type
</label>
</div>
<div class="dso-field-container">
<div class="dso-search-bar">
<div class="dso-search-bar-input">
<span class="dso-search-icon" aria-hidden="true"></span><input type="text" id="form-vertical-filter_type" placeholder="Bv. GTI" />
<button type="button">
Zoekopdracht legen
</button>
</div>
<button type="button" class="dso-secondary sr-only">
Button
</button>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Aanhanger</legend>
<fieldset class="form-group dso-radios">
<legend class="sr-only">Welke aanhanger</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Welke aanhanger
</span>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="form-vertical-aanhanger-0" name="aanhanger" value="bak">
<label for="form-vertical-aanhanger-0">
Bak
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="form-vertical-aanhanger-1" name="aanhanger" value="caravan" checked>
<label for="form-vertical-aanhanger-1">
Caravan
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="form-vertical-aanhanger-2" name="aanhanger" value="fietsendrager">
<label for="form-vertical-aanhanger-2">
Fietsendrager
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="form-vertical-aanhanger-3" name="aanhanger" value="oplegger">
<label for="form-vertical-aanhanger-3">
Oplegger
</label>
</div>
</div>
</fieldset>
<fieldset class="form-group dso-checkboxes">
<legend class="sr-only">Maak een keuze</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Maak een keuze
</span>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="checkbox" id="form-vertical-input-checkbox-0" name="input-checkbox" value="1">
<label for="form-vertical-input-checkbox-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="form-vertical-input-checkbox-1" name="input-checkbox" value="2">
<label for="form-vertical-input-checkbox-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="form-vertical-input-checkbox-2" name="input-checkbox" value="3">
<label for="form-vertical-input-checkbox-2">
drie
</label>
</div>
</div>
</fieldset>
<div class="form-group dso-input-number">
<div class="dso-label-container">
<label for="form-vertical-input-number-voorbeeld" class="control-label">
Aantal
</label>
</div>
<div class="dso-field-container">
<div class="dso-input-number">
<button type="button" class="dso-tertiary"><span class="sr-only"></span>
<dso-icon icon="minus-square"></dso-icon>
</button>
<input type="number" id="form-vertical-input-number-voorbeeld" readonly tabindex="-1" class="dso-input-step-counter" value="0">
<button type="button" class="dso-tertiary"><span class="sr-only"></span>
<dso-icon icon="plus-square"></dso-icon>
</button>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Vraag</legend>
<div class="form-group dso-textarea">
<div class="dso-label-container">
<label for="form-vertical-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="form-vertical-gekke_vraag" aria-describedby="helpTextId_form-vertical-gekke_vraag" rows="5"></textarea>
<p class="dso-help-block" id="helpTextId_form-vertical-gekke_vraag">Deze vraag heeft een toelichting</p>
</div>
</div>
</fieldset>
<fieldset>
<legend>Vraag met infobutton</legend>
<fieldset class="form-group dso-radios">
<legend class="sr-only">Soms laat de vraagstelling aan duidelijkheid te wensen over. Wenst u een toelichting hierop?</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Soms laat de vraagstelling aan duidelijkheid te wensen over. Wenst u een toelichting hierop?
</span>
<button type="button" class="btn dso-info-button" aria-expanded="false">
<span class="sr-only">Toelichting bij vraag</span>
</button>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="form-vertical-input-radio-infobutton-0" name="input-radio-infobutton" value="1" checked>
<label for="form-vertical-input-radio-infobutton-0">
ja, de vraagstelling aan duidelijkheid te wensen over, ik wil graag een toelichting hierop
</label>
<button type="button" class="btn dso-info-button" aria-expanded="false">
<span class="sr-only">Toelichting bij antwoord</span>
</button>
</div>
<div class="dso-selectable">
<input type="radio" id="form-vertical-input-radio-infobutton-1" name="input-radio-infobutton" value="2">
<label for="form-vertical-input-radio-infobutton-1">
nee, het is mij duidelijk
</label>
</div>
</div>
</fieldset>
</fieldset>
<fieldset>
<legend>Vraag met toelichting uitgeklapt</legend>
<fieldset class="form-group dso-radios">
<legend class="sr-only">Toelichting op uw vraag</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Toelichting op uw vraag
</span>
<button type="button" class="btn dso-info-button dso-open" aria-expanded="true">
<span class="sr-only">Toelichting op uw vraag</span>
</button>
<div class="dso-info">
<button type="button">
<span class="sr-only">Sluiten</span>
</button>
<div class="dso-rich-content">
<h4>Toelichting bij vraag: "Toelichting op uw vraag"</h4>
<p>Bij verticale formulieren wordt het bij checkboxen en radio's onoverzichtelijk als de toelichting bij de vraag EN opties toont</p>
</div>
</div>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="form-vertical-input-radio-infobutton-open-0" name="input-radio-infobutton-open" value="1" checked>
<label for="form-vertical-input-radio-infobutton-open-0">
ja
</label>
<button type="button" class="btn dso-info-button" aria-expanded="false">
<span class="sr-only">Toelichting bij antwoord</span>
</button>
</div>
<div class="dso-selectable">
<input type="radio" id="form-vertical-input-radio-infobutton-open-1" name="input-radio-infobutton-open" value="2">
<label for="form-vertical-input-radio-infobutton-open-1">
nee
</label>
</div>
</div>
</fieldset>
</fieldset>
<div class="dso-form-buttons">
<button type="button" class="dso-tertiary"><span>Annuleren</span></button>
<button type="submit" class="dso-primary"><span>Verstuur</span></button>
</div>
</form>
<!-- Form Horizontal -->
<form class="form-horizontal">
<fieldset>
<legend>Contact</legend>
<div class="form-group dso-input dso-input-text dso-required">
<div class="dso-label-container">
<label for="form-horizontal-voornaam" class="control-label">
Voornaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-horizontal-voornaam" class="form-control" required>
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="form-horizontal-achternaam" class="control-label">
Achternaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-horizontal-achternaam" class="form-control" aria-describedby="helpTextId_form-horizontal-achternaam">
<p class="dso-help-block" id="helpTextId_form-horizontal-achternaam">Mag ook de familienaam zijn</p>
</div>
</div>
<div class="form-group dso-static">
<div class="dso-label-container">
<span class="control-label">Geslacht</span>
</div>
<div class="dso-field-container">
Man
</div>
</div>
<div class="form-group dso-input dso-input-text has-feedback">
<div class="dso-label-container">
<label for="form-horizontal-geboortedatum" class="control-label">
Geboortedatum
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-horizontal-geboortedatum" class="form-control">
<span class="form-control-feedback" aria-hidden="true">
<dso-icon icon="calendar"></dso-icon>
</span>
</div>
</div>
<div class="form-group dso-input dso-input-email dso-required">
<div class="dso-label-container">
<label for="form-horizontal-email" class="control-label">
E-mailadres
</label>
</div>
<div class="dso-field-container">
<input type="email" id="form-horizontal-email" class="form-control" required>
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="form-horizontal-password" class="control-label">
Wachtwoord
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-horizontal-password" class="form-control">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="form-horizontal-password_bevestig" class="control-label">
Wachtwoord (bevestig)
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-horizontal-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="form-horizontal-nieuwsbrief" name="nieuwsbrief" aria-describedby="helpTextId_form-horizontal-nieuwsbrief">
<label for="form-horizontal-nieuwsbrief">
Stuur mij de maandelijkse nieuwsbrief
</label>
</div>
<p class="dso-help-block" id="helpTextId_form-horizontal-nieuwsbrief">Uw gegevens zullen niet worden gedeeld met derden</p>
</div>
</div>
</fieldset>
<fieldset>
<legend>Bijlagen</legend>
<fieldset class="form-group dso-files">
<legend class="sr-only"></legend>
<div class="dso-label-container">
<label for="form-horizontal-documenten" class="control-label" aria-hidden="true">
</label>
</div>
<div class="dso-field-container">
<ul class="dso-filelist">
<li>
<div class="dso-filename" id="form-horizontal-documenten-file-filename-0">
Schetsen_en_foto's_1.pdf
</div>
<div class="dso-selectable dso-confidential">
<input type="checkbox" id="form-horizontal-documenten-input-confirm-0" name="form-horizontal-documenten-input-confirm-0" aria-describedby="form-horizontal-documenten-file-filename-0">
<label for="form-horizontal-documenten-input-confirm-0">
Vertrouwelijk
</label>
</div>
<button type="button" aria-describedby="form-horizontal-documenten-file-filename-0" class="dso-tertiary dso-remove"><span>Verwijder document</span></button>
</li>
<li>
<div class="dso-filename" id="form-horizontal-documenten-file-filename-1">
Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
</div>
<div class="dso-selectable dso-confidential">
<input type="checkbox" id="form-horizontal-documenten-input-confirm-1" name="form-horizontal-documenten-input-confirm-1" aria-describedby="form-horizontal-documenten-file-filename-1" checked>
<label for="form-horizontal-documenten-input-confirm-1">
Vertrouwelijk
</label>
</div>
<dso-icon icon="status-warning"></dso-icon>
<button type="button" aria-describedby="form-horizontal-documenten-file-filename-1" class="dso-tertiary dso-remove"><span>Verwijder document</span></button>
</li>
</ul>
<dso-alert status="warning">
<div class="dso-rich-content">
<p>U vraagt of wij een document vertrouwelijk willen behandelen. Hiervoor moet u twee dingen doen:</p>
<ol>
<li>Voeg ook een publiceerbaar document zonder vertrouwelijke informatie toe.</li>
<li>Geef per document de reden op als toelichting op het verzoek in de laatste stap van uw aanvraag.</li>
</ol>
<p>Er zal worden beoordeeld of uw vraag terecht is. U krijgt hiervan bericht.</p>
</div>
</dso-alert>
<!-- To use an input type="file" element -->
<div class="dso-file-upload">
<input type="file" id="form-horizontal-documenten-file-upload" />
<label class="dso-secondary" for="form-horizontal-documenten-file-upload">
<dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
</label>
</div>
</div>
<!-- Or to trigger the upload using a button element (not recommended) -->
<!--
<button type="button"
class="dso-tertiary"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>
-->
</fieldset>
</fieldset>
<fieldset>
<legend>Beleg</legend>
<div class="form-group dso-select dso-multiple">
<div class="dso-label-container">
<label for="form-horizontal-beleg" class="control-label">
Beleg
</label>
</div>
<div class="dso-field-container">
<select id="form-horizontal-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="form-horizontal-auto_merk" class="control-label">
Type auto
</label>
</div>
<div class="dso-field-container">
<select id="form-horizontal-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>Filter op type</legend>
<div class="form-group dso-form-group-search-bar">
<div class="dso-label-container">
<label for="form-horizontal-filter_type" class="control-label">
Type
</label>
</div>
<div class="dso-field-container">
<div class="dso-search-bar">
<div class="dso-search-bar-input">
<span class="dso-search-icon" aria-hidden="true"></span><input type="text" id="form-horizontal-filter_type" placeholder="Bv. GTI" />
<button type="button">
Zoekopdracht legen
</button>
</div>
<button type="button" class="dso-secondary sr-only">
Button
</button>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Aanhanger</legend>
<fieldset class="form-group dso-radios">
<legend class="sr-only">Welke aanhanger</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Welke aanhanger
</span>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="form-horizontal-aanhanger-0" name="aanhanger" value="bak">
<label for="form-horizontal-aanhanger-0">
Bak
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="form-horizontal-aanhanger-1" name="aanhanger" value="caravan" checked>
<label for="form-horizontal-aanhanger-1">
Caravan
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="form-horizontal-aanhanger-2" name="aanhanger" value="fietsendrager">
<label for="form-horizontal-aanhanger-2">
Fietsendrager
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="form-horizontal-aanhanger-3" name="aanhanger" value="oplegger">
<label for="form-horizontal-aanhanger-3">
Oplegger
</label>
</div>
</div>
</fieldset>
<fieldset class="form-group dso-checkboxes">
<legend class="sr-only">Maak een keuze</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Maak een keuze
</span>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="checkbox" id="form-horizontal-input-checkbox-0" name="input-checkbox" value="1">
<label for="form-horizontal-input-checkbox-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="form-horizontal-input-checkbox-1" name="input-checkbox" value="2">
<label for="form-horizontal-input-checkbox-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="form-horizontal-input-checkbox-2" name="input-checkbox" value="3">
<label for="form-horizontal-input-checkbox-2">
drie
</label>
</div>
</div>
</fieldset>
<div class="form-group dso-input-number">
<div class="dso-label-container">
<label for="form-horizontal-input-number-voorbeeld" class="control-label">
Aantal
</label>
</div>
<div class="dso-field-container">
<div class="dso-input-number">
<button type="button" class="dso-tertiary"><span class="sr-only"></span>
<dso-icon icon="minus-square"></dso-icon>
</button>
<input type="number" id="form-horizontal-input-number-voorbeeld" readonly tabindex="-1" class="dso-input-step-counter" value="0">
<button type="button" class="dso-tertiary"><span class="sr-only"></span>
<dso-icon icon="plus-square"></dso-icon>
</button>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Vraag</legend>
<div class="form-group dso-textarea">
<div class="dso-label-container">
<label for="form-horizontal-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="form-horizontal-gekke_vraag" aria-describedby="helpTextId_form-horizontal-gekke_vraag" rows="5"></textarea>
<p class="dso-help-block" id="helpTextId_form-horizontal-gekke_vraag">Deze vraag heeft een toelichting</p>
</div>
</div>
</fieldset>
<fieldset>
<legend>Vraag met infobutton</legend>
<fieldset class="form-group dso-radios">
<legend class="sr-only">Soms laat de vraagstelling aan duidelijkheid te wensen over. Wenst u een toelichting hierop?</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Soms laat de vraagstelling aan duidelijkheid te wensen over. Wenst u een toelichting hierop?
</span>
<button type="button" class="btn dso-info-button" aria-expanded="false">
<span class="sr-only">Toelichting bij vraag</span>
</button>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="form-horizontal-input-radio-infobutton-0" name="input-radio-infobutton" value="1" checked>
<label for="form-horizontal-input-radio-infobutton-0">
ja, de vraagstelling aan duidelijkheid te wensen over, ik wil graag een toelichting hierop
</label>
<button type="button" class="btn dso-info-button" aria-expanded="false">
<span class="sr-only">Toelichting bij antwoord</span>
</button>
</div>
<div class="dso-selectable">
<input type="radio" id="form-horizontal-input-radio-infobutton-1" name="input-radio-infobutton" value="2">
<label for="form-horizontal-input-radio-infobutton-1">
nee, het is mij duidelijk
</label>
</div>
</div>
</fieldset>
</fieldset>
<fieldset>
<legend>Vraag met toelichting uitgeklapt</legend>
<fieldset class="form-group dso-radios">
<legend class="sr-only">Toelichting op uw vraag</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Toelichting op uw vraag
</span>
<button type="button" class="btn dso-info-button dso-open" aria-expanded="true">
<span class="sr-only">Toelichting op uw vraag</span>
</button>
<div class="dso-info">
<button type="button">
<span class="sr-only">Sluiten</span>
</button>
<div class="dso-rich-content">
<h4>Toelichting bij vraag: "Toelichting op uw vraag"</h4>
<p>Bij verticale formulieren wordt het bij checkboxen en radio's onoverzichtelijk als de toelichting bij de vraag EN opties toont</p>
</div>
</div>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="form-horizontal-input-radio-infobutton-open-0" name="input-radio-infobutton-open" value="1" checked>
<label for="form-horizontal-input-radio-infobutton-open-0">
ja
</label>
<button type="button" class="btn dso-info-button" aria-expanded="false">
<span class="sr-only">Toelichting bij antwoord</span>
</button>
</div>
<div class="dso-selectable">
<input type="radio" id="form-horizontal-input-radio-infobutton-open-1" name="input-radio-infobutton-open" value="2">
<label for="form-horizontal-input-radio-infobutton-open-1">
nee
</label>
</div>
</div>
</fieldset>
</fieldset>
<div class="dso-form-buttons">
<button type="button" class="dso-tertiary"><span>Annuleren</span></button>
<button type="submit" class="dso-primary"><span>Verstuur</span></button>
</div>
</form>
<!-- Multi Page -->
<form>
<fieldset>
<legend>Contact</legend>
<div class="form-group dso-input dso-input-text dso-required">
<div class="dso-label-container">
<label for="multipage-form-voornaam" class="control-label">
Voornaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="multipage-form-voornaam" class="form-control" required>
</div>
</div>
</fieldset>
<div class="dso-form-buttons">
<div class="dso-aside">
<button type="button" class="dso-tertiary">
<dso-icon icon="angle-left"></dso-icon><span>Vorige stap</span>
</button>
</div>
<button type="button" class="dso-tertiary"><span>Secondaire actie</span></button>
<button type="submit" class="dso-primary"><span>Volgende stap</span>
<dso-icon icon="angle-right"></dso-icon>
</button>
</div>
</form>
<!-- Sections -->
<form>
<fieldset>
<legend>Contact</legend>
<div class="form-group dso-input dso-input-text dso-required">
<div class="dso-label-container">
<label for="form-with-sections-voornaam" class="control-label">
Voornaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-with-sections-voornaam" class="form-control" required>
</div>
</div>
</fieldset>
<div class="dso-form-buttons">
<button type="button" class="dso-tertiary"><span>Secondaire actie</span></button>
<button type="submit" class="dso-primary"><span>Primaire actie</span></button>
</div>
</form>
<!-- Single Page -->
<form class="dso-single-page">
<fieldset>
<legend>Invoervelden</legend>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="single-page-form-invoer-veld-1" class="control-label">
Voornaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="single-page-form-invoer-veld-1" class="form-control">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="single-page-form-invoer-veld-2" class="control-label">
Achternaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="single-page-form-invoer-veld-2" class="form-control">
</div>
</div>
</fieldset>
<div class="dso-form-buttons">
<button type="submit" class="dso-primary"><span>Primaire actie</span></button>
<button type="button" class="dso-tertiary"><span>Secondaire actie</span></button>
</div>
</form>
<!-- Autocomplete -->
<form class="dso-single-page">
<fieldset>
<legend>Invoervelden</legend>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="form-met-autocomplete-voornaam" class="control-label">
Voornaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-met-autocomplete-voornaam" class="form-control" autocomplete="given-name">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="form-met-autocomplete-achternaam" class="control-label">
Achternaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-met-autocomplete-achternaam" class="form-control" autocomplete="family-name">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="form-met-autocomplete-straat" class="control-label">
Straat
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-met-autocomplete-straat" class="form-control" autocomplete="address-line1">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="form-met-autocomplete-huisnummer" class="control-label">
Huisnummer (plus letter en toevoeging)
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-met-autocomplete-huisnummer" class="form-control" autocomplete="address-line2">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="form-met-autocomplete-postcode" class="control-label">
Postcode
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-met-autocomplete-postcode" class="form-control" autocomplete="postal-code">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="form-met-autocomplete-woonplaats" class="control-label">
Woonplaats
</label>
</div>
<div class="dso-field-container">
<input type="text" id="form-met-autocomplete-woonplaats" class="form-control" autocomplete="address-level2">
</div>
</div>
<div class="form-group dso-input dso-input-tel">
<div class="dso-label-container">
<label for="form-met-autocomplete-telefoon" class="control-label">
Telefoon
</label>
</div>
<div class="dso-field-container">
<input type="tel" id="form-met-autocomplete-telefoon" class="form-control" autocomplete="tel">
</div>
</div>
<div class="form-group dso-input dso-input-email">
<div class="dso-label-container">
<label for="form-met-autocomplete-email" class="control-label">
Email adres
</label>
</div>
<div class="dso-field-container">
<input type="email" id="form-met-autocomplete-email" class="form-control" autocomplete="e-mail">
</div>
</div>
<div class="form-group dso-select">
<div class="dso-label-container">
<label for="form-met-autocomplete-land" class="control-label">
Land
</label>
</div>
<div class="dso-field-container">
<select id="form-met-autocomplete-land" class="form-control">
<option value="nl">Nederland</option>
<option value="be">Belgie</option>
<option value="de">Duitsland</option>
</select>
</div>
</div>
</fieldset>
<div class="dso-form-buttons">
<button type="submit" class="dso-primary"><span>Primaire actie</span></button>
<button type="button" class="dso-tertiary"><span>Secondaire actie</span></button>
</div>
</form>
<!-- Simple Form -->
<form class="form-horizontal">
<fieldset class="form-group dso-radios dso-inline">
<legend class="sr-only">Heeft de dakkapel een plat dak?</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Heeft de dakkapel een plat dak?
</span>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="Simpel-form-plat-dak-0" name="plat-dak" value="1">
<label for="Simpel-form-plat-dak-0">
Ja
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="Simpel-form-plat-dak-1" name="plat-dak" value="0">
<label for="Simpel-form-plat-dak-1">
Nee
</label>
</div>
</div>
</fieldset>
<fieldset class="form-group dso-checkboxes">
<legend class="sr-only">Wat is de afstand tussen de zijkanten van de dakkapel en de zijranden van het dak?</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Wat is de afstand tussen de zijkanten van de dakkapel en de zijranden van het dak?
</span>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="checkbox" id="Simpel-form-afstand-0" name="afstand">
<label for="Simpel-form-afstand-0">
50 cm of minder
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="Simpel-form-afstand-1" name="afstand">
<label for="Simpel-form-afstand-1">
meer dan 50 cm
</label>
</div>
</div>
</fieldset>
<div class="dso-form-buttons">
<button type="submit" class="dso-primary"><span>Volgende</span></button>
</div>
</form>
<!-- Header In Legend -->
<form class="dso-header-in-legend">
<fieldset>
<legend>
<h1>Heading H1</h1>
</legend>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="header-in-legend-invoer-veld-1" class="control-label">
Voornaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="header-in-legend-invoer-veld-1" class="form-control">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="header-in-legend-invoer-veld-2" class="control-label">
Achternaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="header-in-legend-invoer-veld-2" class="form-control">
</div>
</div>
</fieldset>
<fieldset>
<legend>
<h2>Heading H2</h2>
</legend>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="header-in-legend-invoer-veld-1" class="control-label">
Voornaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="header-in-legend-invoer-veld-1" class="form-control">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="header-in-legend-invoer-veld-2" class="control-label">
Achternaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="header-in-legend-invoer-veld-2" class="form-control">
</div>
</div>
</fieldset>
<fieldset>
<legend>
<h3>Heading H3</h3>
</legend>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="header-in-legend-invoer-veld-1" class="control-label">
Voornaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="header-in-legend-invoer-veld-1" class="form-control">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="header-in-legend-invoer-veld-2" class="control-label">
Achternaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="header-in-legend-invoer-veld-2" class="form-control">
</div>
</div>
</fieldset>
<fieldset>
<legend>
<h4>Heading H4</h4>
</legend>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="header-in-legend-invoer-veld-1" class="control-label">
Voornaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="header-in-legend-invoer-veld-1" class="form-control">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="header-in-legend-invoer-veld-2" class="control-label">
Achternaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="header-in-legend-invoer-veld-2" class="form-control">
</div>
</div>
</fieldset>
<fieldset>
<legend>
<h5>Heading H5</h5>
</legend>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="header-in-legend-invoer-veld-1" class="control-label">
Voornaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="header-in-legend-invoer-veld-1" class="form-control">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="header-in-legend-invoer-veld-2" class="control-label">
Achternaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="header-in-legend-invoer-veld-2" class="form-control">
</div>
</div>
</fieldset>
<fieldset>
<legend>
<h6>Heading H6</h6>
</legend>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="header-in-legend-invoer-veld-1" class="control-label">
Voornaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="header-in-legend-invoer-veld-1" class="form-control">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="header-in-legend-invoer-veld-2" class="control-label">
Achternaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="header-in-legend-invoer-veld-2" class="form-control">
</div>
</div>
</fieldset>
<div class="dso-form-buttons">
<button type="submit" class="dso-primary"><span>Primaire actie</span></button>
<button type="button" class="dso-tertiary"><span>Secondaire actie</span></button>
</div>
</form>
{% set formPrefix = generateformPrefix(__title, formModifier) %}
<form {{ className(formModifier) }}>
{% render '@form-fieldsets', {fieldsets: fieldsets, prefix: formPrefix} %}
{% render '@form-buttons', {buttons: buttons, asideButtons: asideButtons} %}
</form>
/* Form Vertical */
__title: form vertical
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: calendar
- id: email
inputType: input
type: email
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: Bijlagen
groups:
- id: documenten
inputType: files
description: >-
Geef een tekening van de nieuwe situatie in 1:100. Een
situatietekening geeft een schets van de bestaande en de nieuwe
situatie met daarop duidelijk de maatvoering en de schaalaanduiding
(1:100).
buttonClass: secondary
files:
- filename: Schetsen_en_foto's_1.pdf
- filename: Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
confidential: true
- 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: Filter op type
groups:
- id: filter_type
inputType: search-bar
label: Type
searchBar:
placeholder: Bv. GTI
icon: true
id: filter_type
hideSearchButton: true
clearButton: true
- 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
- id: input-checkbox
inputType: checkboxes
label: Maak een keuze
options:
- value: 1
label: een
id: checkbox_1
- value: 2
label: twee
id: checkbox_2
- value: 3
label: drie
id: checkbox_3
- id: input-number-voorbeeld
inputType: input-number
label: Aantal
count: 0
- legend: Vraag
groups:
- id: gekke_vraag
inputType: textarea
rows: 5
label: >-
Waarom heeft een tankstation dat 24 uur per dag open is een slot op de
deur?
helpText: Deze vraag heeft een toelichting
- legend: Vraag met infobutton
groups:
- id: input-radio-infobutton
inputType: radios
label: >-
Soms laat de vraagstelling aan duidelijkheid te wensen over. Wenst u
een toelichting hierop?
options:
- value: 1
label: >-
ja, de vraagstelling aan duidelijkheid te wensen over, ik wil
graag een toelichting hierop
checked: true
infoOpen: false
infoButtonLabel: Toelichting bij antwoord
infoText: |
Empty
- value: 2
label: nee, het is mij duidelijk
infoOpen: false
infoButtonLabel: Toelichting bij vraag
infoText: |
Empty
- legend: Vraag met toelichting uitgeklapt
groups:
- id: input-radio-infobutton-open
inputType: radios
label: Toelichting op uw vraag
options:
- value: 1
label: ja
checked: true
infoOpen: false
infoButtonLabel: Toelichting bij antwoord
infoText: Empty
- value: 2
label: nee
infoOpen: true
infoButtonLabel: Toelichting op uw vraag
infoText: >
<h4>Toelichting bij vraag: "Toelichting op uw vraag"</h4>
<p>Bij verticale formulieren wordt het bij checkboxen en radio's
onoverzichtelijk als de toelichting bij de vraag EN opties toont</p>
buttons:
- type: button
modifier: dso-tertiary
label: Annuleren
- type: submit
modifier: dso-primary
label: Verstuur
/* Form Horizontal */
__title: 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: calendar
- id: email
inputType: input
type: email
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: Bijlagen
groups:
- id: documenten
inputType: files
description: >-
Geef een tekening van de nieuwe situatie in 1:100. Een
situatietekening geeft een schets van de bestaande en de nieuwe
situatie met daarop duidelijk de maatvoering en de schaalaanduiding
(1:100).
buttonClass: secondary
files:
- filename: Schetsen_en_foto's_1.pdf
- filename: Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
confidential: true
- 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: Filter op type
groups:
- id: filter_type
inputType: search-bar
label: Type
searchBar:
placeholder: Bv. GTI
icon: true
id: filter_type
hideSearchButton: true
clearButton: true
- 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
- id: input-checkbox
inputType: checkboxes
label: Maak een keuze
options:
- value: 1
label: een
id: checkbox_1
- value: 2
label: twee
id: checkbox_2
- value: 3
label: drie
id: checkbox_3
- id: input-number-voorbeeld
inputType: input-number
label: Aantal
count: 0
- legend: Vraag
groups:
- id: gekke_vraag
inputType: textarea
rows: 5
label: >-
Waarom heeft een tankstation dat 24 uur per dag open is een slot op de
deur?
helpText: Deze vraag heeft een toelichting
- legend: Vraag met infobutton
groups:
- id: input-radio-infobutton
inputType: radios
label: >-
Soms laat de vraagstelling aan duidelijkheid te wensen over. Wenst u
een toelichting hierop?
options:
- value: 1
label: >-
ja, de vraagstelling aan duidelijkheid te wensen over, ik wil
graag een toelichting hierop
checked: true
infoOpen: false
infoButtonLabel: Toelichting bij antwoord
infoText: |
Empty
- value: 2
label: nee, het is mij duidelijk
infoOpen: false
infoButtonLabel: Toelichting bij vraag
infoText: |
Empty
- legend: Vraag met toelichting uitgeklapt
groups:
- id: input-radio-infobutton-open
inputType: radios
label: Toelichting op uw vraag
options:
- value: 1
label: ja
checked: true
infoOpen: false
infoButtonLabel: Toelichting bij antwoord
infoText: Empty
- value: 2
label: nee
infoOpen: true
infoButtonLabel: Toelichting op uw vraag
infoText: >
<h4>Toelichting bij vraag: "Toelichting op uw vraag"</h4>
<p>Bij verticale formulieren wordt het bij checkboxen en radio's
onoverzichtelijk als de toelichting bij de vraag EN opties toont</p>
buttons:
- type: button
modifier: dso-tertiary
label: Annuleren
- type: submit
modifier: dso-primary
label: Verstuur
formModifier: form-horizontal
/* Multi Page */
__title: multipage form
fieldsets:
- legend: Contact
groups:
- id: voornaam
inputType: input
type: text
label: Voornaam
required: true
buttons:
- type: button
modifier: dso-tertiary
label: Secondaire actie
- type: submit
modifier: dso-primary
label: Volgende stap
iconAfter: angle-right
asideButtons:
- type: button
modifier: dso-tertiary
label: Vorige stap
icon: angle-left
/* Sections */
__title: form with sections
fieldsets:
- legend: Contact
groups:
- id: voornaam
inputType: input
type: text
label: Voornaam
required: true
buttons:
- type: button
modifier: dso-tertiary
label: Secondaire actie
- type: submit
modifier: dso-primary
label: Primaire actie
/* Single Page */
__title: single page form
fieldsets:
- legend: Invoervelden
groups:
- id: invoer-veld-1
inputType: input
type: text
label: Voornaam
- id: invoer-veld-2
inputType: input
type: text
label: Achternaam
buttons:
- type: submit
modifier: dso-primary
label: Primaire actie
- type: button
modifier: dso-tertiary
label: Secondaire actie
formModifier: dso-single-page
/* Autocomplete */
__title: form met autocomplete
fieldsets:
- legend: Invoervelden
groups:
- id: voornaam
inputType: input
type: text
label: Voornaam
autocomplete: given-name
- id: achternaam
inputType: input
type: text
label: Achternaam
autocomplete: family-name
- id: straat
inputType: input
type: text
label: Straat
autocomplete: address-line1
- id: huisnummer
inputType: input
type: text
label: Huisnummer (plus letter en toevoeging)
autocomplete: address-line2
- id: postcode
inputType: input
type: text
label: Postcode
autocomplete: postal-code
- id: woonplaats
inputType: input
type: text
label: Woonplaats
autocomplete: address-level2
- id: telefoon
inputType: input
type: tel
label: Telefoon
autocomplete: tel
- id: email
inputType: input
type: email
label: Email adres
autocomplete: e-mail
- id: land
inputType: select
label: Land
autocomplete: country
options:
- value: nl
label: Nederland
- value: be
label: Belgie
- value: de
label: Duitsland
buttons:
- type: submit
modifier: dso-primary
label: Primaire actie
- type: button
modifier: dso-tertiary
label: Secondaire actie
__explanation: >-
Het HTML autocomplete-attribuut wordt gebruikt om aan te geven of het
invoerveld door de browser automatisch, en met welke waarde, ingevuld kan
worden.
formModifier: dso-single-page
/* Simple Form */
__title: Simpel form
fieldsets:
- groups:
- id: plat-dak
label: Heeft de dakkapel een plat dak?
inputType: radios
inline: true
options:
- value: '1'
label: Ja
- value: '0'
label: Nee
- id: afstand
label: >-
Wat is de afstand tussen de zijkanten van de dakkapel en de zijranden
van het dak?
inputType: checkboxes
options:
- id: minder
label: 50 cm of minder
- id: meer
label: meer dan 50 cm
buttons:
- type: submit
modifier: dso-primary
label: Volgende
__explanation: >-
Een formulier waar <code>.form-group</code> direct in
<code><form></code> staat.
formModifier: form-horizontal
/* Header In Legend */
__title: header in legend
fieldsets:
- legend: <h1>Heading H1</h1>
groups:
- id: invoer-veld-1
inputType: input
type: text
label: Voornaam
- id: invoer-veld-2
inputType: input
type: text
label: Achternaam
- legend: <h2>Heading H2</h2>
groups:
- id: invoer-veld-1
inputType: input
type: text
label: Voornaam
- id: invoer-veld-2
inputType: input
type: text
label: Achternaam
- legend: <h3>Heading H3</h3>
groups:
- id: invoer-veld-1
inputType: input
type: text
label: Voornaam
- id: invoer-veld-2
inputType: input
type: text
label: Achternaam
- legend: <h4>Heading H4</h4>
groups:
- id: invoer-veld-1
inputType: input
type: text
label: Voornaam
- id: invoer-veld-2
inputType: input
type: text
label: Achternaam
- legend: <h5>Heading H5</h5>
groups:
- id: invoer-veld-1
inputType: input
type: text
label: Voornaam
- id: invoer-veld-2
inputType: input
type: text
label: Achternaam
- legend: <h6>Heading H6</h6>
groups:
- id: invoer-veld-1
inputType: input
type: text
label: Voornaam
- id: invoer-veld-2
inputType: input
type: text
label: Achternaam
buttons:
- type: submit
modifier: dso-primary
label: Primaire actie
- type: button
modifier: dso-tertiary
label: Secondaire actie
formModifier: dso-header-in-legend