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"
placeholder="voorbeeld text input"
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" placeholder="lorem ipsum" 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"
placeholder="voorbeeld text input"
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 kleine letter en 1 cijfer.</p>
<input
id="password-example"
name="password-example"
pattern="{"^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,}$"}"
placeholder="wachtwoord"
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>
</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,}$"}"
placeholder="wachtwoord"
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>
<textarea id="textarea-example" name="Tekstveld voorbeeld" placeholder="Jouw vraag of opmerking"></textarea>
</div>
</form>Verplicht
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div class="required">
<label for="voorbeeld-tekstveld-required">Bericht</label>
<textarea id="voorbeeld-tekstveld-required" name="voorbeeld-tekstveld-required" placeholder="Jouw vraag of opmerking"></textarea>
</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="form-example-base">Voorbeeld text input</label>
<input
id="form-example-base"
name="form-example-base"
placeholder="voorbeeld text input"
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">
<fieldset>
<legend>Invoervelden</legend>
<div>
<label for="form-example-base">Voorbeeld text input</label>
<input
id="form-example-base"
name="form-example-base"
placeholder="voorbeeld text input"
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" placeholder="lorem ipsum" 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,}$"}"
placeholder="wachtwoord"
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>
<textarea id="voorbeeld-tekstveld-base" name="voorbeeld-tekstveld-base" placeholder="Jouw vraag of opmerking"></textarea>
</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="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="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="form-example-base">Voorbeeld text input</label>
<input
id="form-example-base"
name="form-example-base"
placeholder="voorbeeld text input"
type="text"
/>
</div>
<div class="button-container">
<button>Cancel</button>
<button type="submit">Verzend</button>
</div>
</form>