Basisformulier testpagina
Overzicht van het element in mogelijke structuren om te testen.
Tests
Basis
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post">
<label for="form-example-base">Voorbeeld text input</label>
<div>
<span class="nota-bene" id="form-example-base-explanation"
>Voorbeeld van een instructietekst
</span>
<input
id="form-example-base"
name="form-example-base"
type="text"
aria-describedby="form-example-base-explanation"
/>
</div>
<button type="submit">Verzend</button>
</form>Notificatie direct binnen formulier
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post">
<p class="explanation" role="group" aria-label="Toelichting">
<span>Toelichting:</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus volutpat ligula.
</p>
<label for="form-example-base-notification">Voorbeeld text input</label>
<div>
<span class="nota-bene" id="form-example-base-notification-explanation"
>Voorbeeld van een instructietekst
</span>
<input
id="form-example-base-notification"
name="form-example-base-notification"
type="text"
aria-describedby="form-example-base-notification-explanation"
/>
</div>
<button type="submit">Verzend</button>
</form>Bloknotificatie direct binnen formulier
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post">
<div class="explanation" role="group" aria-label="Toelichting">
<span>Toelichting:</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus volutpat ligula,
et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.
</p>
</div>
<label for="form-example-base-block-notification">Voorbeeld text input</label>
<div>
<span class="nota-bene" id="form-example-base-block-notification-explanation"
>Voorbeeld van een instructietekst
</span>
<input
id="form-example-base-block-notification"
name="form-example-base-block-notification"
type="text"
aria-describedby="form-example-base-block-notification-explanation"
/>
</div>
<button type="submit">Verzend</button>
</form>Notificatie op invoerveld
Visueel voorbeeld foutmelding:
HTML-voorbeeld:
<form action="" method="post">
<label for="input-error">Input</label>
<div>
<span class="nota-bene" id="input-error-explanation"
>Voorbeeld van een instructietekst
</span>
<input
id="input-error"
class="error"
value="Lorem ipsum"
aria-describedby="input-error-message input-error-explanation"
aria-invalid="true"
/>
<p class="error" id="input-error-message">
<span>Foutmelding:</span> Lorem ipsum dolor sit amet
</p>
</div>
<button type="submit">Verzend</button>
</form>Visueel voorbeeld toelichting:
HTML-voorbeeld:
<form action="" method="post">
<label for="input-explanation">Input</label>
<div>
<p class="explanation" id="input-explanation-message">
<span>Toelichting:</span> Lorem ipsum dolor sit amet
</p>
<input id="input-explanation" class="explanation" value="Lorem ipsum" aria-describedby="input-explanation-message" aria-invalid="true">
</div>
<button type="submit">Verzend</button>
</form>Visueel voorbeeld waarschuwing:
HTML-voorbeeld:
<form action="" method="post">
<label for="input-warning">Input</label>
<div>
<p class="warning" id="input-warning-message">
<span>Waarschuwing:</span> Lorem ipsum dolor sit amet
</p>
<input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message" aria-invalid="true">
</div>
<button type="submit">Verzend</button>
</form>Visueel voorbeeld bevestiging:
HTML-voorbeeld:
<form action="" method="post">
<label for="input-confirmation">Input</label>
<div>
<p class="confirmation" id="input-confirmation-message">
<span>Bevestiging:</span> Lorem ipsum dolor sit amet
</p>
<input id="input-confirmation" class="confirmation" value="Lorem ipsum" aria-describedby="input-confirmation-message" aria-invalid="true">
</div>
<button type="submit">Verzend</button>
</form>Visueel voorbeeld systeembericht
HTML-voorbeeld:
<form action="" method="post">
<label for="input-system">Input</label>
<div>
<p class="system" id="input-system-message">
<span>Systeembericht:</span> Lorem ipsum dolor sit amet
</p>
<input id="input-system" class="system" value="Lorem ipsum" aria-describedby="input-system-message" aria-invalid="true">
</div>
<button type="submit">Verzend</button>
</form>Link direct binnen formulier
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post">
<label for="form-link">Voorbeeld text input</label>
<div>
<span class="nota-bene" id="form-link-explanation"
>Voorbeeld van een instructietekst
</span>
<input id="form-link" name="form-link" type="text" />
</div>
<a href="#">Lorem ipsum dolor set</a>
<button type="submit">Verzend</button>
</form>Link direct binnen horizontaal uitgelijnd formulier
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div>
<label for="form-example-base-horizontal">Voorbeeld text input</label>
<div>
<span class="nota-bene" id="form-example-base-horizontal-explanation"
>Voorbeeld van een instructietekst
</span>
<input
id="form-example-base-horizontal"
name="form-example-base-horizontal"
type="text"
aria-describedby="form-example-base-horizontal-explanation"
/>
</div>
</div>
<a href="form-base-test">Lorem ipsum dolor set</a>
<button type="submit">Verzend</button>
</form>Link direct binnen groep in horizontaal uitgelijnd formulier
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<div>
<label for="form-link-example">Voorbeeld text input</label>
<div>
<span class="nota-bene" id="form-link-example-explanation"
>Voorbeeld van een instructietekst
</span>
<input
id="form-link-example"
name="form-link-example"
type="text"
aria-describedby="form-link-example-explanation"
/>
</div>
</div>
<div>
<a href="form-base-test">Lorem ipsum dolor set</a>
</div>
<button type="submit">Verzend</button>
</form>Link direct binnen fieldset
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post">
<fieldset>
<legend>Lorem ipsum</legend>
<label for="form-fieldset-link">Voorbeeld text input</label>
<div>
<span class="nota-bene" id="form-fieldset-link-explanation"
>Voorbeeld van een instructietekst
</span>
<input
id="form-fieldset-link"
name="form-fieldset-link"
type="text"
aria-describedby="form-fieldset-link-explanation"
/>
</div>
<a href="form-base-test">Lorem ipsum dolor set</a>
</fieldset>
<button type="submit">Verzend</button>
</form>Link direct binnen fieldset binnen horizontaal uitgelijnd formulier
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<fieldset>
<legend>Lorem ipsum</legend>
<div>
<label for="form-horizontal-fieldset-link">Voorbeeld text input</label>
<div>
<span class="nota-bene" id="form-horizontal-fieldset-link-explanation"
>Voorbeeld van een instructietekst
</span>
<input
id="form-horizontal-fieldset-link"
name="form-horizontal-fieldset-link"
type="text"
aria-describedby="form-horizontal-fieldset-link-explanation"
/>
</div>
</div>
<a href="form-base-test">Lorem ipsum dolor set</a>
</fieldset>
<button type="submit">Verzend</button>
</form>Link binnen groep binnen fieldset binnen horizontaal uitgelijnd formulier
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<fieldset>
<legend>Lorem ipsum</legend>
<div>
<label for="form-fieldset-link-grouped-horizontal">Voorbeeld text input</label>
<div>
<span class="nota-bene" id="form-fieldset-link-grouped-horizontal-explanation"
>Voorbeeld van een instructietekst
</span>
<input
id="form-fieldset-link-grouped-horizontal"
name="form-fieldset-link-grouped-horizontal"
type="text"
aria-describedby="form-fieldset-link-grouped-horizontal-explanation"
/>
</div>
</div>
<div>
<a href="form-base-test">Lorem ipsum dolor set</a>
</div>
</fieldset>
<button type="submit">Verzend</button>
</form>