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>
<input id="form-example-base" name="form-example-base" placeholder="voorbeeld text input" type="text">
<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">Voorbeeld text input</label>
<input
id="form-example-base"
name="form-example-base"
placeholder="voorbeeld text input"
type="text"
/>
<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">Voorbeeld text input</label>
<input
id="form-example-base"
name="form-example-base"
placeholder="voorbeeld text input"
type="text"
/>
<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>
<input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message" 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-example-base">Voorbeeld text input</label>
<input id="form-example-base" name="form-example-base" placeholder="voorbeeld text input" type="text" />
<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">Voorbeeld text input</label>
<input id="form-example-base" name="form-example-base" placeholder="voorbeeld text input" type="text" />
</div>
<a href="#">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-example-base">Voorbeeld text input</label>
<input id="form-example-base" name="form-example-base" placeholder="voorbeeld text input" type="text" />
</div>
<div>
<a href="#">Lorem ipsum dolor set</a>
</div>
<button type="submit">Verzend</button>
</form>Link direct binnen fieldset
Visueel voorbeeld:
HTML-voorbeeld:
<form action="" method="post" class="horizontal-view">
<fieldset>
<legend>Lorem ipsum</legend>
<label for="form-example-base">Voorbeeld text input</label>
<input id="form-example-base" name="form-example-base" placeholder="voorbeeld text input" type="text" />
<a href="#">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-example-base">Voorbeeld text input</label>
<input id="form-example-base" name="form-example-base" placeholder="voorbeeld text input" type="text" />
</div>
<a href="#">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-example-base">Voorbeeld text input</label>
<input id="form-example-base" name="form-example-base" placeholder="voorbeeld text input" type="text" />
</div>
<div>
<a href="#">Lorem ipsum dolor set</a>
</div>
</fieldset>
<button type="submit">Verzend</button>
</form>