Horizontaal uitgelijnde testpagina
Overzicht van het element in mogelijke structuren om te testen.
Basisformulier
Formulier zonder gebruik van fieldset
Invoerveld
Basis-invoerveld met verschillende states
Basisweergave:
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div>
<label for="input-example">Voorbeeld text input</label>
<input
id="input-example"
name="input-example"
type="text"
>
</div>
<button type="submit">Verzend</button>
</form>Verplicht:
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div class="required">
<label for="input-example-required">Ipsum</label>
<div>
<span class="nota-bene">Dit veld is verplicht</span>
<input id="input-example-required" name="voorbeeld-input-required" type="text" required>
</div>
</div>
</form>Gegroepeerde knoppen:
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div>
<label for="input-example-grouped">Voorbeeld text input</label>
<input
id="input-example-grouped"
name="input-example-grouped"
type="text"
>
</div>
<div class="button-container">
<a class="button ghost" type="submit">Annuleren</a>
<button type="submit">Verzend</button>
</div>
</form>Datumveld
Invoerveld voor het aangeven van data.
Basisweergave:
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div>
<label for="date-example">Datum</label>
<input id="date-example" name="datumveld voorbeeld" type="date">
</div>
</form>Verplicht
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div class="required">
<label for="date-example-required">Datum</label>
<div>
<span class="nota-bene">Dit veld is verplicht</span>
<input id="date-example-required" name="voorbeeld verplicht dataveld" type="date" required>
</div>
</div>
</form>E-mailveld
Basisweergave:
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div>
<label for="email-example">Email</label>
<input id="email-example" name="voorbeeld email-veld" type="email">
</div>
</form>Verplicht
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div class="required">
<label for="email-example-required">Email</label>
<div>
<span class="nota-bene">Dit veld is verplicht</span>
<input id="email-example-required" name="voorbeeld-email-required" type="email" required>
</div>
</div>
</form>Wachtwoordveld
Invoerveld voor wachtwoorden met toegestane patronen.
Basisweergave
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div>
<label for="password-example">Wachtwoord</label>
<div>
<p class="explanation" id="password-example-message">
<span>Toelichting:</span> Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal
1 hoofdletter, 1 kleineletter en 1 cijfer.
</p>
<div>
<input
id="password-example"
name="password-example"
pattern={"^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,}$"}
title="Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, 1 kleine letter en 1 cijfer."
type="password"
aria-describedby="password-example-message"
/>
</div>
</div>
</div>
</form>Verplicht
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div class="required">
<label for="password-example-required">Wachtwoord</label>
<div>
<p class="explanation" id="password-example-required-message"><span>Toelichting:</span> Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, 1 kleine letter en 1 cijfer.</p>
<input
id="password-example-required"
name="password-example-required"
pattern="{"^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,}$"}"
title="Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, 1 kleine letter en 1 cijfer."
type="password"
aria-describedby="password-example-required-message"
required>
</div>
</div>
</form>Tekstveld - textarea
Invoerveld voor langere teksten.
Basisweergave
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div>
<label for="textarea-example">Bericht</label>
<div>
<span class="nota-bene" id="textarea-example-explanation"
>Jouw vraag of opmerking
</span>
<textarea
id="textarea-example"
name="Tekstveld voorbeeld"
aria-describedby="textarea-example-explanation"
></textarea>
</div>
</div>
</form>Verplicht
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div class="required">
<label for="voorbeeld-tekstveld-required">Bericht</label>
<div>
<span class="nota-bene" id="voorbeeld-tekstveld-required-explanation"
>Dit veld is verplicht. Stel jouw vraag of vul jouw opmerking in.
</span>
<textarea
id="voorbeeld-tekstveld-required"
name="voorbeeld-tekstveld-required"
aria-describedby="voorbeeld-tekstveld-required-explanation"
></textarea>
</div>
</div>
</form>Selectielijst - select
Lijst met keuzeopties waarvan er een enkele optie gekozen kan worden.
Basisweergave
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div>
<label for="select-example">Selectielijst</label>
<select id="select-example" name="voorbeeld selectielijst">
<option value="1">Optie 1</option>
<option value="2">Optie 2</option>
<option value="3">Optie 3</option>
</select>
</div>
</form>Verplicht
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div>
<label for="select-example-required">Selectielijst</label>
<div>
<span class="nota-bene">Dit veld is verplicht</span>
<select id="select-example-required" name="voorbeeld verplichte selectielijst">
<option value="1">Optie 1</option>
<option value="2">Optie 2</option>
<option value="3">Optie 3</option>
</select>
</div>
</div>
</form>Selectievak - checkbox
Basisweergave
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div class="checkbox">
<input type="checkbox" id="checkbox-example" name="checkbox">
<label for="checkbox-example">Selectievak</label>
</div>
</form>Verplicht
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div class="option-group required">
<span class="nota-bene">Dit veld is verplicht</span>
<div class="checkbox">
<input type="checkbox" id="checkbox-example-required" name="standaard-checkbox" required>
<label for="checkbox-example-required">Verplicht selectievak</label>
</div>
</div>
</form>Uitgeschakeld
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div class="checkbox">
<input type="checkbox" id="checkbox-example-disabled" name="voorwaarden" disabled>
<label for="checkbox-example-disabled">Uitgeschakeld selectievak</label>
</div>
</form>Radio-button
Basisweergave
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div class="radio">
<input
type="radio"
id="radio-example"
name="voorbeeld radio-knop"
value="value">
<label for="radio-example">Radio-button</label>
</div>
</form>Verplicht
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div class="option-group required">
<span class="nota-bene">Dit veld is verplicht</span>
<div class="radio">
<input type="radio" id="radio-example-required" name="radio verplicht" required>
<label for="radio-example-required">Verplichte radio-button</label>
</div>
</div>
</form>Uitgeschakeld
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div class="radio">
<input type="radio" id="radio-example-disabled" name="radio uitgeschakeld" disabled>
<label for="radio-example-disabled">Uitgeschakelde radio-button</label>
</div>
</form>Bereik - range
Basisweergave
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div>
<label for="range-example">Range</label>
<input type="range" id="range-example" name="Voorbeeld bereik" min="0" max="100">
</div>
</form>Verplicht
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div>
<label for="range-example-required">Range</label>
<div>
<span class="nota-bene">Dit veld is verplicht</span>
<input type="range" id="range-example-required" name="voorbeeld verplicht bereik" min="0" max="100">
</div>
</div>
</form>Kleurselector
Basisweergave
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div>
<label for="color-picker-example">Selecteer de gewenste kleur</label>
<input id="color-picker-example" name="voorbeeld kleurselector" type="color" value="#ffffff">
</div>
</form>Gegroepeerde knoppen
Basisweergave
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div>
<label for="grouped-buttons-example">Voorbeeld text input</label>
<input
id="grouped-buttons-example"
name="grouped-buttons-example"
type="text"
/>
</div>
<div class="button-container">
<button>Cancel</button>
<button type="submit">Verzend</button>
</div>
</form>Verplicht
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div>
<label for="color-picker-example-required">Selecteer de gewenste kleur</label>
<div>
<span class="nota-bene">Dit veld is verplicht</span>
<input id="color-picker-example-required" name="voorbeeld verplichte kleurselector" type="color" value="#ffffff">
</div>
</div>
</form>fieldset
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div class="explanation" role="group" aria-label="toelichting">
<span>Toelichting:</span>
<p>Dit is een voorbeeld van een notificatie direct binnen het formulier.</p>
</div>
<fieldset>
<legend>Invoervelden</legend>
<div class="explanation" role="group" aria-label="toelichting">
<span>Toelichting:</span>
<p>Dit is een voorbeeld van een notificatie direct binnen een fieldset.</p>
</div>
<div>
<label for="fieldset-example">Voorbeeld text input</label>
<input id="fieldset-example" name="fieldset-example" type="text" />
</div>
<div class="required">
<label for="voorbeeld-input-required">Ipsum</label>
<div>
<span class="nota-bene">Dit veld is verplicht</span>
<input
id="voorbeeld-input-required"
name="voorbeeld-input-required"
type="text"
required
/>
</div>
</div>
<div>
<label for="voorbeeld-date-1">Datum</label>
<input id="voorbeeld-date-1" name="voorbeeld-date-1" type="date" />
</div>
<div>
<label for="voorbeeld-email-1">Email</label>
<input id="voorbeeld-email-1" name="voorbeeld-email-1" type="email" />
</div>
<div>
<label for="input-password-1">Wachtwoord</label>
<div>
<p class="explanation" id="input-password-1-message">
<span>Toelichting:</span> Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal
1 hoofdletter, 1 kleine letter en 1 cijfer.
</p>
<input
id="input-password-1"
name="input-password-1"
pattern={"^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,}$"}
title="Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, 1 kleine letter en 1 cijfer."
type="password"
aria-describedby="input-password-1-message"
/>
</div>
</div>
<div>
<label for="voorbeeld-tekstveld-base">Bericht</label>
<div>
<span class="nota-bene" id="voorbeeld-tekstveld-base-explanation"
>Stel een vraag of geef een opmerking
</span>
<textarea
id="voorbeeld-tekstveld-base"
name="voorbeeld-tekstveld-base"
aria-describedby="voorbeeld-tekstveld-base-explanation"
></textarea>
</div>
</div>
<div>
<label for="select-example-fieldset">Selectielijst</label>
<select id="select-example-fieldset" name="voorbeeld selectielijst binnen fieldset">
<option value="1">Optie 1</option>
<option value="2">Optie 2</option>
<option value="3">Optie 3</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Checkboxes</legend>
<div class="checkbox">
<input
type="checkbox"
id="checkbox-example-fieldset"
name="voorbeeld selectievak binnen fieldset"
/>
<label for="checkbox-example-fieldset">Selectievak</label>
</div>
<div class="option-group required">
<span class="nota-bene">Dit veld is verplicht</span>
<div class="checkbox">
<input
type="checkbox"
id="checkbox-example-fieldset-required"
name="selectievak binnen fieldset"
required
/>
<label for="checkbox-example-fieldset-required">Verplicht selectievak</label>
</div>
</div>
<div class="checkbox">
<input
type="checkbox"
id="checkbox-example-disabled-fieldset"
name="uitgeschakeld selectievak binnen fieldset"
disabled
/>
<label for="checkbox-example-disabled-fieldset">Uitgeschakeld selectievak</label>
</div>
</fieldset>
<fieldset>
<legend>radio-buttons</legend>
<div class="radio">
<input
type="radio"
id="radio-example-default-5"
name="standaard-radiobutton"
value="value"
/>
<label for="radio-example-default-5">Radio button</label>
</div>
<div class="option-group required">
<span class="nota-bene">Dit veld is verplicht</span>
<div class="radio">
<input type="radio" id="radio-example-grouped" name="standaard-radio" required />
<label for="radio-example-grouped">Verplichte radio-button</label>
</div>
</div>
<div class="radio">
<input
type="radio"
id="radio-example-disabled-fieldset"
name="voorbeeld uitgeschakeld radio-button binnen fieldset"
disabled
/>
<label for="radio-example-disabled-fieldset">uitgeschakelde radio-button</label>
</div>
</fieldset>
<fieldset>
<legend>Overig</legend>
<div>
<label for="range-example-fieldset">Range</label>
<input
type="range"
id="range-example-fieldset"
name="voorbeeld bereik binnen fieldset"
min="0"
max="100"
/>
</div>
<div>
<label for="color-picker-fieldset">Selecteer de gewenste kleur</label>
<input
id="color-picker-fieldset"
name="voorbeeld kleurselector binnen fieldset"
type="color"
value="#ffffff"
/>
</div>
</fieldset>
<button type="submit">Verzend</button>
</form>Gegroepeerde knoppen binnen fieldset
Basisweergave
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div>
<label for="grouped-buttons-within-fieldset">Voorbeeld text input</label>
<input
id="grouped-buttons-within-fieldset"
name="grouped-buttons-within-fieldset"
type="text"
/>
</div>
<div class="button-container">
<button>Cancel</button>
<button type="submit">Verzend</button>
</div>
</form>