Forms

Formulieren worden gebruikt om informatie op te vragen en te ontvangen van gebruikers.

Toelichting:

Snelstart

In deze documentatie staan alle verschillende ondersteunde formulierelementen beschreven met zowel visuele voorbeelden als html-voorbeelden die gekopiëerd kunnen worden.

Gebruik het basisformulier voor de algemene opzet. Of het basisformulier met kolommen voor een compactere weergave waarbij de labels en invoervelden op dezelfde regel geplaatst worden waar mogelijk. Let op: Gebruik bij een formulier met kolomweergave ook de html-voorbeelden van de formulierelementen die geschikt zijn voor weergave in kolommen. Deze staan per element beschreven.
Vul het formulier met de benodigde elementen. Zie formulierelementen voor de beschikbare elementen.
Groepeer de formulierelementen voor toegankelijkheid en gebruikersgemak. Zie Invoervelden groeperen voor meer informatie.
Voeg indien nodig of ten behoeve van gebruikersgemak meldingen, toelichtingen en instructies toe aan het formulier. Zie Berichten en meldingen voor meer informatie.
Voeg waar nodig validatie toe. Zie formulieren met validatie voor meer informatie.

Beschikbare voorbeelden:

Basisvoorbeeld formulier

Het basisvoorbeeld met een invoerveld en een verzendknop.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="voorbeeld-text-input-1">Voorbeeld text input</label>
	<input id="voorbeeld-text-input-1" name="voorbeeld-text-input-1" placeholder="voorbeeld text input" type="text">

	<button type="submit">Verzend</button>
</form>

Extra informatie over de gebruikte elementen binnen dit voorbeeld:

Action: Het action attribuut bevat de url die de formulierinzending afhandeldt. Deze waarde kan overschreven worden door formulieracties op knoppen <button>, <input type="submit">knoppen of < input type="image">. Voor meer informatie zie: beschikbare formulier-attributen en action.
Method:method="" heeft de volgende opties.
- Get Veelgebruikt bij het versturen van korte niet gevoelige data die niet verandert als de data nogmaals ingevoerd wordt. Let op: deze methode voegt de content toe aan de url.
- PostVeelgebruikt bij het versturen van data. De data wordt niet toegevoegd aan de url, heeft geen limitaties wat betreft grootte en formulierinzendigen met post kunnen niet opgeslagen worden in bookmarks.
- DialogGebruikt wanneer het formulier zich binnen een <dialog> bevind.
ID: id op de input is toegevoegd zodat het corresponderende label naar de input kan refereren. Voorbeeld: id="invoerveld-1". Let op: Het id moet uniek zijn per document.
For: Het label gebruikt de for om de referentie naar het juiste invoerveld aan te geven. Voorbeeld: for="invoerveld-1".
Submit: De knop met het type submit zal het formulier indienen.

Basisvoorbeeld formulier met kolommen

Het basisvoorbeeld met kolommen.

Aandachtspunten:

Voeg de class horizontal-view toe aan de <form> om het formulier in twee kolommen weer te geven. Waar mogelijk zullen het label en het invoerveld naast elkaar worden geplaatst. Op smalle schermen worden de velden onder elkaar getoond.
Groepeer de <label> en bijbehorende <input> in een <div>.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="voorbeeld-text-input-2">Voorbeeld text input</label>
		<input id="voorbeeld-text-input-2" name="voorbeeld-text-input-2" placeholder="voorbeeld text input" type="text">
	</div>

	<button type="submit">Verzend</button>
</form>

Formulier zonder achtergrond

In sommige gevallen is er om technische redenen een formulier nodig rondom een knop maar is het niet nodig om deze visueel binnen een formulier te plaatsen. Voor die situaties is dit voorbeeld geschikt.

Voeg class="inline" toe aan de <form>.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="inline">
	<div class="button-container">
		<button type="submit">Haal gegevens op</button>
	</div>
</form>

Invoervelden groeperen

Het groeperen van invoervelden binnen formulieren biedt de gebruiker structuur, context en overzicht. Ook geeft het gebruikers die gebruik maken van hulptechnologiën de mogelijkheid te navigeren binnen de formulieren.

Aandachtspunten:

Groepeer vragen en invoervelden die bij elkaar horen samen binnen een <fieldset>. Denk bijvoorbeeld aan: "persoonsgegevens" of "voorkeuren".
Voeg altijd direct binnen de <fieldset> een <legend> toe met een omschrijvende naam die context biedt aan de gebruiker. Houd er hierbij rekening mee dat sommige screenreaders deze titel en het label van het invoerveld gezamelijk oplezen. Voor meer informatie over het gebruik van fieldsets en webtoegankelijkheid zie: https://www.w3.org/WAI/tutorials/forms/grouping/.
Knoppen kunnen binnen een fieldset toegevoegd worden, maar let wel op dat de verzendknop van het formulier direct binnen het formulier geplaatst wordt aangezien deze knop over het hele formulier gaat en niet enkel over de gegroepeerde content.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<fieldset>
		<legend>Lorem ipsum</legend>
		<label for="voorbeeld-text-input-3">Voorbeeld text input</label>
		<input id="voorbeeld-text-input-3" name="voorbeeld-text-input-3" placeholder="voorbeeld text input" type="text">
		<label for="voorbeeld-text-input-4">Voorbeeld text input</label>
		<input id="voorbeeld-text-input-4" name="voorbeeld-text-input-4" placeholder="voorbeeld text input" type="text">
	</fieldset>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<fieldset>
		<legend>Lorem ipsum</legend>
			<div>
				<label for="voorbeeld-text-input-5">Voorbeeld text input</label>
				<input id="voorbeeld-text-input-5" name="voorbeeld-text-input-5" placeholder="voorbeeld text input" type="text">
			</div>
			<div>
				<label for="voorbeeld-text-input-6">Voorbeeld text input</label>
				<input id="voorbeeld-text-input-6" name="voorbeeld-text-input-6" placeholder="voorbeeld text input" type="text">
			</div>
	</fieldset>

	<button type="submit">Verzend</button>
</form>

Verplicht invoerveld

Voor velden die ingevuld dienen te zijn voordat het formulier verstuurd mag worden.

Aandachtspunten:

Geef op de <input> aan dat het invoerveld verplicht is met het required attribuut.
Voeg een span toe boven het inputveld. Het is belangrijk om het bericht boven het invoerveld te plaatsen zodat de volgorde ook klopt voor gebruikers die gebruik maken van hulpmiddelen zoals een screenreader.
Groeppeer de <input> en de <span> samen in een <div> voor de correcte weergave.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="text-form-username-1">Gebruikersnaam</label>
	<span class="nota-bene">Dit veld is verplicht</span>
	<input id="text-form-username-1" name="text-form-username-1" placeholder="gebruikersnaam" title="Gebruikersnaam" type="text" required>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="text-form-username-2">Gebruikersnaam</label>
		<div class="required">
			<span class="nota-bene">Dit veld is verplicht</span>
			<input id="text-form-username-2" name="text-form-username-2" placeholder="gebruikersnaam" title="Gebruikersnaam" type="text" required>
		</div>
	</div>

	<button type="submit">Verzend</button>
</form>

Formulier-elementen

Formulieren worden opgebouwd uit verschillende invoervelden.

Beschikbare voorbeelden:

Invoerveld

Invoervelden worden gebruikt voor het vragen van korte informatie.

Visueel voorbeeld:

Voorbeeld

Html-voorbeeld:

							
<form action="" method="post">
	<label for="voorbeeld-invoerveld-1">Voorbeeld invoerveld</label>
	<input id="voorbeeld-invoerveld-1" name="voorbeeld-invoerveld-1" placeholder="voorbeeld invoerveld" type="text">

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="voorbeeld-invoerveld-2">Voorbeeld invoerveld</label>
		<input id="voorbeeld-invoerveld-2" name="voorbeeld-invoerveld-2" placeholder="voorbeeld invoerveld" type="text">
	</div>

	<button type="submit">Verzend</button>
</form>

Verplicht invoerveld

Voor invoervelden die ingevuld dienen te zijn voordat het formulier verstuurd kan worden.

Visueel voorbeeld:

Voorbeeld

Html-voorbeeld:

							
<form action="" method="post">
	<label for="voorbeeld-verplicht-invoerveld-1">Voorbeeld invoerveld</label>
	<span class="nota-bene">Dit veld is verplicht</span>
	<input id="voorbeeld-verplicht-invoerveld-1" name="voorbeeld-verplicht-invoerveld-1" placeholder="voorbeeld invoerveld" type="text" required>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Aandachtspunten:

Voeg aan de <div> class="required" toe. Deze class zorgt voor de correcte uitlijning van het label in combinatie met de nota bene.
Voeg de tekst toe als nota bene. <p class="nota-bene">Dit veld is verplicht</p>
Groepeer de nota bene met het bijbehorende invoerveld in een <div>.

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div class="required">
		<label for="voorbeeld-verplicht-invoerveld-2">Voorbeeld invoerveld</label>
		<div>
			<span class="nota-bene">Dit veld is verplicht</span>
			<input id="voorbeeld-verplicht-invoerveld-2" name="voorbeeld-verplicht-invoerveld-2" placeholder="voorbeeld invoerveld" type="text">
		</div>
	</div>

	<button type="submit">Verzend</button>
</form>

Datum

Het invoerveld specifiek voor het vragen van data.

Voorbeelden

Datumveld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="date-1">Datum</label>
	<input id="date-1" name="date-1" type="date">
	<button type="submit">Verzend</button>
</form>

Verplicht datumveld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="date-1">Datum</label>
	<span class="nota-bene">Dit veld is verplicht</span>
	<input id="date-1" name="date-1" type="date">
	<button type="submit">Verzend</button>
</form>

Datumveld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="date-1">Datum</label>
		<input id="date-1" name="date-1" type="date">
	</div>

	<button type="submit">Verzend</button>
</form>

Verplicht datumveld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="date-1">Datum</label>
		<div class="required">
			<span class="nota-bene">Dit veld is verplicht</span>
			<input id="date-1" name="date-1" type="date">
		</div>
	</div>

	<button type="submit">Verzend</button>
</form>

Datumvelden gecombineerde weergave

Visueel voorbeeld:

Voorbeeld

Html-voorbeeld:

							
<form action="" method="post" class="help">
  <fieldset>
    <legend>Periode</legend>

    <div class="column-2">
      <div>
        <label for="voorbeeld-date-5-start">van</label>
        <input id="voorbeeld-date-5-start" name="voorbeeld-date-5-start" type="date">
      </div>

      <div>
        <label for="voorbeeld-date-5-end">tot</label>
        <input id="voorbeeld-date-5-end" name="voorbeeld-date-5-end" type="date">
      </div>
    </div>
  </fieldset>

  <button type="submit">Verzend</button>
</form>

Verplichte datumvelden gecombineerde weergave

Visueel voorbeeld:

Voorbeeld

Html-voorbeeld:

							
<form action="" method="post" class="help">
  <fieldset class="required">
    <legend>Periode</legend>

    <span class="nota-bene">Dit veld is verplicht</span>
    <div class="column-2">
      <div>
        <label for="voorbeeld-date-6-start">van</label>
        <input id="voorbeeld-date-6-start" name="voorbeeld-date-6-start" type="date">
      </div>

      <div>
        <label for="voorbeeld-date-6-end">tot</label>
        <input id="voorbeeld-date-6-end" name="voorbeeld-date-6-end" type="date">
      </div>
    </div>
  </fieldset>

  <button type="submit">Verzend</button>
</form>

Datumvelden gecombineerde horizontale weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view help">
	<fieldset class="column-2">
		<legend>Periode</legend>

		<div>
			<div>
				<label for="date-1-start">van</label>
				<input id="date-1-start" name="date-1-start" type="date">
			</div>

			<div>
				<label for="date-1-end">tot</label>
				<input id="date-1-end" name="date-1-end" type="date">
			</div>
		</div>
	</fieldset>
	<button type="submit">Verzend</button>
</form>

Verplichte datumvelden gecombineerde horizontale weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view help">
  <fieldset class="required">
    <legend>Periode</legend>
    <span class="nota-bene">Dit veld is verplicht</span>

    <div class="column-2">
      <div>
        <label for="voorbeeld-date-8-start">van</label>
        <input id="voorbeeld-date-8-start" name="voorbeeld-date-8-start" type="date">
      </div>

      <div>
        <label for="voorbeeld-date-8-end">tot</label>
        <input id="voorbeeld-date-8-end" name="voorbeeld-date-8-end" type="date">
      </div>
    </div>

  </fieldset>
  <button type="submit">Verzend</button>
</form>

E-mail

Het invoerveld specifiek voor het vragen van e-mailadressen

Aandachtspunten:

<type="email"> Een invoerveld voor e-mailadressen dient het type email te krijgen. Hierdoor weten browsers en hulptechnologiën dat de content een e-mail hoort te zijn.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="voorbeeld-e-mailadres-1">Voorbeeld e-mailadres</label>
	<input id="voorbeeld-e-mailadres-1" name="voorbeeld-e-mailadres-1" placeholder="mail@example.com" type="email">

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="voorbeeld-e-mailadres-2">Voorbeeld e-mailadres</label>
		<input id="voorbeeld-e-mailadres-2" name="voorbeeld-e-mailadres-2" placeholder="mail@example.com" type="email">
	</div>

	<button type="submit">Verzend</button>
</form>

Telefoonnummer

Het invoerveld specifiek voor het vragen van telefoonnummers

Aandachtspunten:

<type="tel> Een invoerveld voor telefoonnummers dient het type tel te krijgen. Hierdoor weten browsers en hulptechnologiën dat de content een telefoonnummer hoort te zijn. Op basis van deze kennis kunnen bepaalde acties uitgevoerd worden, zoals het op mobiele telefoons op een gebruiksvriendelijke manier het nummer gebruiken om te bellen.
pattern="[0-9]{10}" Om ervoor te zorgen dat alleen nummers in het gewenste format binnenkomen kan het raadzaam zijn om een patroon toe te voegen waar de ingevulde data aan dient te voldoen.
De placeholdertekst geeft de gebruiker informatie over hoe het veld ingevuld dient te worden. Een voorbeeld of en omschrijving zijn beide goede manieren om de gebruiker hierin te begeleiden. Hou bij het schrijven van een placeholder-tekst altijd de gebruiker in gedachten.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="voorbeeld-phonenumber-1">Telefoonnummer</label>
	<input id="voorbeeld-phonenumber-1" pattern="[0-9]{10}" name="voorbeeld-phonenumber-1" placeholder="e.g 0612345678" type="tel">

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="voorbeeld-phonenumber-2">Telefoonnummer</label>
		<input id="voorbeeld-phonenumber-2" pattern="[0-9]{10}" name="voorbeeld-phonenumber-2" placeholder="e.g 0612345678" type="tel">
	</div>

	<button type="submit">Verzend</button>
</form>

Tekstveld

Tekstvelden kunnen toegevoegd worden zodat gebruikers berichten kunnen achterlaten.

Aandachtspunten:

Zorg er voor gebruiksvriendelijkheid en het beste resultaat voor dat het tekstveld een duidelijke vraag en/of duidelijk doel heeft. Zorg er door middel van een omschrijvend <label> en een duidelijke placeholder voor dat de gebruiker weet wat er verwacht wordt.
rows="number" geeft de initiële hoogte van het tekstveld aan in de hoeveelheid regels. Als er een langer bericht verwacht of aangemoedigd wordt is het voor de gebruiker fijn om een hoger initieel tekstveld te hebben.
cols="number" geeft de breedte van het tekstveld aan in hoeveelheid tekens. Binnen de Rijksoverheidhuisstijl wordt deze functie niet ondersteund. De breedte van tekstvelden wordt gezet binnen de css, dit om responsive behaviour, of te wel het schaalbaar maken van de velden op verschillende resoluties, te ondersteunen.
Let op: de <textarea> ondersteund <value>-tag niet.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="voorbeeld-tekstveld-1">Bericht</label>
	<textarea id="voorbeeld-tekstveld-1" name="voorbeeld-tekstveld-1" placeholder="Jouw vraag of opmerking"></textarea>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="voorbeeld-tekstveld-2">Bericht</label>
		<textarea id="voorbeeld-tekstveld-2" name="voorbeeld-tekstveld-2" placeholder="Jouw vraag of opmerking"></textarea>
	</div>

	<button type="submit">Verzend</button>
</form>

Selectievak

Selectievakken geven de gebruiker de mogelijkheid om voorkeuren en/of goedkeuring aan te geven.

Aandachtspunten:

Plaats de <input> met direct daaropvolgend het bijbehorende <label>.
Plaats eventuele ondersteunende teksten zoals "Dit veld is verplicht", direct boven de bijbehorende <input>.
Het <input> dient van het type="checkbox" te zijn.
Voor het tonen van meerdere selectieopties onder een <label> dient het bijbehorende <label> en de bijbehorende checkboxes gegroepeerd te zijn binnen een <div>. Zie lijstweergave voor meer informatie en voorbeelden.

Beschikbare voorbeelden:

Standaard weergave

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<div class="checkbox">
		<input type="checkbox" id="checkbox-example-base" name="standaard-checkbox">
		<label for="checkbox-example-base">Lorem ipsum dolor set amet</label>
	</div>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Voeg de class horizontal-view toe aan de <form> voor de weergave in kolommen. Selectievakken worden hiermee uitgelijnd met de overige invoervelden.

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div class="checkbox">
		<input type="checkbox" id="checkbox-example-base-horizontal-view" name="standaard-checkbox">
		<label for="checkbox-example-base-horizontal-view">Lorem ipsum dolor set amet</label>
	</div>

	<button type="submit">Verzend</button>
</form>

Geselecteerd selectievak

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<div class="checkbox">
		<input type="checkbox" id="checkbox-example-checked-base" name="checked-checkbox" checked>
		<label for="checkbox-example-checked-base">Lorem ipsum dolor set amet</label>
	</div>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">>
	<div class="checkbox">
		<input type="checkbox" id="checkbox-example-checked-horizontal-view" name="checked-checkbox" checked>
		<label for="checkbox-example-checked-horizontal-view">Lorem ipsum dolor set amet</label>
	</div>

	<button type="submit">Verzend</button>
</form>

Verplicht selectievak

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
  <div class="required">
    <span class="nota-bene">Dit veld is verplicht</span>
    <div class="checkbox">
      <input type="checkbox" id="checkbox-example-required" name="verplicht" required>
      <label for="checkbox-example-required">verplicht selectievak</label>
    </div>
  </div>
  <button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

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-horizontal-view" name="verplicht" required>
      <label for="checkbox-example-required-horizontal-view">verplicht selectievak</label>
    </div>
  </div>
  <button type="submit">Verzend</button>
</form>

Uitgeschakeld selectievak

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<div class="checkbox">
		<input type="checkbox" id="checkbox-example-disabled" name="disabled-checkbox" disabled>
		<label for="checkbox-example-disabled">Lorem ipsum dolor set amet</label>
	</div>
	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div class="checkbox">
		<input type="checkbox" id="checkbox-example-disabled-horizontal-view" name="disabled-checkbox" disabled>
		<label for="checkbox-example-disabled-horizontal-view">Lorem ipsum dolor set amet</label>
	</div>
	<button type="submit">Verzend</button>
</form>

Lijstweergave

Aandachtspunten:

Plaats ten behoeve van toegankelijkheid lijsten met selectievakken altijd binnen een fieldset.
Plaats direct binnen de <fieldset> een <legend> met een omschrijvende naam. Houdt er rekening mee dat deze naam bij sommige hulptechnologiën voor iedere optie opgelezen wordt.
Om de legend van de lijstweergave als label weer te geven kan de class grouped-choice-list toegevoegd worden aan de <fieldset>.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<fieldset>
		<legend>Examples</legend>
		<div class="checkbox">
			<input type="checkbox" id="checkbox-example-list-1" name="standaard-checkbox">
			<label for="checkbox-example-list-1">Lorem ipsum dolor set amet</label>
		</div>

		<div class="checkbox">
			<input type="checkbox" id="checkbox-example-list-2" name="standaard-checkbox">
			<label for="checkbox-example-list-2">Lorem ipsum dolor set amet</label>
		</div>

		<div class="checkbox">
			<input type="checkbox" id="checkbox-example-list-3" name="standaard-checkbox">
			<label for="checkbox-example-list-3">Lorem ipsum dolor set amet</label>
		</div>

		<div class="checkbox">
			<input type="checkbox" id="checkbox-example-list-4" name="standaard-checkbox">
			<label for="checkbox-example-list-4">Lorem ipsum dolor set amet</label>
		</div>
	</fieldset>
	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<fieldset>
		<legend>Examples</legend>
		<div class="checkbox">
			<input type="checkbox" id="checkbox-example-list-horizontal-view-1" name="standaard-checkbox">
			<label for="checkbox-example-list-horizontal-view-1">Lorem ipsum dolor set amet</label>
		</div>

		<div class="checkbox">
			<input type="checkbox" id="checkbox-example-list-horizontal-view-2" name="standaard-checkbox">
			<label for="checkbox-example-list-horizontal-view-2">Lorem ipsum dolor set amet</label>
		</div>

		<div class="checkbox">
			<input type="checkbox" id="checkbox-example-list-horizontal-view-3" name="standaard-checkbox">
			<label for="checkbox-example-list-horizontal-view-3">Lorem ipsum dolor set amet</label>
		</div>

		<div class="checkbox">
			<input type="checkbox" id="checkbox-example-list-horizontal-view-4" name="standaard-checkbox">
			<label for="checkbox-example-list-horizontal-view-4">Lorem ipsum dolor set amet</label>
		</div>
	</fieldset>
	<button type="submit">Verzend</button>
</form>

Voorbeeld in twee kolommen

Visueel voorbeeld:

Html-voorbeeld:

			         		
<form action="" method="post" class="horizontal-view ">
  <fieldset>
    <legend>Examples</legend>
    <div class="column-2">
      <div class="checkbox">
        <input type="checkbox" id="checkbox-example-list-columns-1" name="standaard-checkbox">
        <label for="checkbox-example-list-columns-1">Lorem ipsum dolor set amet</label>
      </div>

      <div class="checkbox">
        <input type="checkbox" id="checkbox-example-list-columns-2" name="standaard-checkbox">
        <label for="checkbox-example-list-columns-2">Lorem ipsum dolor set amet</label>
      </div>

      <div class="checkbox">
        <input type="checkbox" id="checkbox-example-list-columns-3" name="standaard-checkbox">
        <label for="checkbox-example-list-columns-3">Lorem ipsum dolor set amet</label>
      </div>

      <div class="checkbox">
        <input type="checkbox" id="checkbox-example-list-columns-4" name="standaard-checkbox">
        <label for="checkbox-example-list-columns-4">Lorem ipsum dolor set amet</label>
      </div>
    </div>
  </fieldset>
  <button type="submit">Verzend</button>
</form>

Voorbeeld in drie kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view ">
  <fieldset>
    <legend>Examples</legend>
    <div class="column-3">
      <div class="checkbox">
        <input type="checkbox" id="checkbox-example-list-column-3-1" name="standaard-checkbox">
        <label for="checkbox-example-list-column-3-1">Lorem ipsum dolor set amet</label>
      </div>

      <div class="checkbox">
        <input type="checkbox" id="checkbox-example-list-column-3-2" name="standaard-checkbox">
        <label for="checkbox-example-list-column-3-2">Lorem ipsum dolor set amet</label>
      </div>

      <div class="checkbox">
        <input type="checkbox" id="checkbox-example-list-column-3-3" name="standaard-checkbox">
        <label for="checkbox-example-list-column-3-3">Lorem ipsum dolor set amet</label>
      </div>
    </div>
  </fieldset>
  <button type="submit">Verzend</button>
</form>

Kleurselector

Het kleur-invoerveld geeft de mogelijkheid de gebruiker een kleur te laten selecteren.

Aandachtspunten:

Geef binnen de value met een hexidecimalekleurcode de basiskleur aan die initieel getoond wordt binnen het formulier. Voorbeeld: value="#ffffff", dit geeft een standaard een wit kleurselectievak weer.
Een invoerveld voor kleuren dient het type="color" te krijgen. Hierdoor weten browsers en hulptechnologiën dat de content een kleur hoort te zijn.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<div>
		<label for="color-input">Selecteer de gewenste kleur</label>
		<input id="color-input" name="color-input" type="color" value="#ffffff">
	</div>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="color-input">Selecteer de gewenste kleur</label>
		<input id="color-input" name="color-input" type="color" value="#ffffff">
	</div>

	<button type="submit">Verzend</button>
</form>

Gecombineerde formuliervelden

Het kan in sommige gevallen gebruiksvriendelijker zijn als bij elkaar horende formuliervelden opdezelfde regel staan. Er kan daarom gebruik gemaakt worden van de weergave in twee of drie kolommen.

Aandachtspunten:

Groepeer de velden binnen een <div>.
Geef de gewenste hoeveelheid kolommen aan. Voeg de class class="column-2" of class="column-3" toe aan de bijbehorende div. Zie onderstaande voorbeelden voor meer informatie.

Voorbeelden

Weergave in twee kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
  <fieldset>
    <legend>Periode</legend>

    <div class="column-2">
      <div>
        <label for="voorbeeld-1-date-1-start">van</label>
        <input id="voorbeeld-1-date-1-start" name="voorbeeld-1-date-1-start" type="date">
      </div>

      <div>
        <label for="voorbeeld-1-date-1-end">tot</label>
        <input id="voorbeeld-1-date-1-end" name="voorbeeld-1-date-3-end" type="date">
      </div>
    </div>
  </fieldset>
  <button type="submit">Verzend</button>
</form>

Visueel voorbeeld binnen horizontaal uitgelijnd formulier:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
  <fieldset>
    <legend>Voorbeelden</legend>

    <fieldset>
      <legend>Periode</legend>
      <div class="column-2">
        <div>
          <label for="voorbeeld-2-date-1-start">van</label>
          <input id="voorbeeld-2-date-1-start" name="voorbeeld-2-date-1-start" type="date">
        </div>

        <div>
          <label for="voorbeeld-2-date-1-end">tot</label>
          <input id="voorbeeld-2-date-1-end" name="voorbeeld-2-date-1-end" type="date">
        </div>
      </div>
    </fieldset>
  </fieldset>
</form>

Horizontale weergave drie kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
  <fieldset>
    <legend>Naam</legend>

    <div class="column-3">
      <div>
        <label for="voorbeeld-3-voornaam">Voornaam</label>
        <input id="voorbeeld-3-voornaam" name="voorbeeld-3-voornaam">
      </div>

      <div>
        <label for="voorbeeld-3-tussenvoegsel">Tussenvoegsel</label>
        <input id="voorbeeld-3-tussenvoegsel" name="voorbeeld-3-tussenvoegsel">
      </div>

      <div>
        <label for="voorbeeld-3-achternaam">Achternaam</label>
        <input id="voorbeeld-3-achternaam" name="voorbeeld-3-achternaam">
      </div>
    </div>
  </fieldset>
  <button type="submit">Verzend</button>
</form>

Visueel voorbeeld binnen horizontaal uitgelijnd formulier:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
  <fieldset>
    <legend>Voorbeelden</legend>

    <fieldset>
      <legend>Naam</legend>

      <div class="column-3">
        <div>
          <label for="voorbeeld-4-voornaam">Voornaam</label>
          <input id="voorbeeld-4-voornaam" name="voorbeeld-4-voornaam">
        </div>

        <div>
          <label for="voorbeeld-4-tussenvoegsel">Tussenvoegsel</label>
          <input id="voorbeeld-4-tussenvoegsel" name="voorbeeld-4-tussenvoegsel">
        </div>

        <div>
          <label for="voorbeeld-4-achternaam">Achternaam</label>
          <input id="voorbeeld-4-achternaam" name="voorbeeld-4-achternaam">
        </div>
      </div>
    </fieldset>
  </fieldset>
</form>

Formulier met validatie

Bij sommige invoervelden is het belangrijk om de inhoud te valideren aan de hand van een vooraf bepaald patroon.

Aandachtspunten:

Pattern: Bij het toevoegen van een patroon, voeg ook een leesbare versie van het patroon toe zodat de gebruiker weet wat de verwachtingen zijn. Voeg ook een title element toe met daarin de omschrijving van het patroon zodat deze gebruikt kan worden door user agents, oftewel software die voor de gebruiker de interactie ophaald en weergeeft, zoals browsers en hulptechnologieën.
De <pattern> kan toegevoegd worden aan: text- tel- email- url- password en search-velden.
Voor meer informatie zie: HTML attribute: pattern - MDN

Beschikbare voorbeelden:

Gebruikersnaam

Aandachtspunten:

Vertel de gebruiker welke eisen er aan de gebruikersnaam zijn gesteld indien er eisen zijn. Dit kan met een standaard opengeklapt bericht zoals in het onderstaande voorbeeld of met een ingeklapt bericht die de gebruiker zelf kan openen indien gewenst. Voor meer informatie zie: Berichten en meldingen en ingeklapte hulpteksten.
Om berichten visueel te koppelen aan een inputveld kunnen de <input> en het bericht gegroepeerd worden binnen een <div. Let op: Binnen de weergave met kolommen dienen berichten altijd gegroepeerd te worden met het inputveld.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="text-form-username-3">Gebruikersnaam</label>
	<p class="explanation" id="text-form-username-3-message"><span>Toelichting:</span> Gebruikersnaam mag alleen alfanumerieke tekens (letters A-Z, cijfers 0-9) bevatten, met uitzondering van onderstrepingstekens.</p>
	<input
		id="text-form-username-3"
		name="text-form-username-3"
		pattern="^[a-zA-Z0-9_.-]*$"
		placeholder="gebruikersnaam"
		title="Gebruikersnaam mag alleen alfanumerieke tekens (letters A-Z, cijfers 0-9) bevatten, met uitzondering van onderstrepingstekens."
		type="text"
		aria-describedby="text-form-username-3-message"
		required >

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="text-form-username-4">Gebruikersnaam</label>
		<div>
			<p class="explanation" id="text-form-username-4-message"><span>Toelichting:</span> Gebruikersnaam mag alleen alfanumerieke tekens (letters A-Z, cijfers 0-9) bevatten, met uitzondering van onderstrepingstekens.</p>
			<input
				id="text-form-username-4"
				name="text-form-username-4"
				pattern="^[a-zA-Z0-9_.-]*$"
				placeholder="gebruikersnaam"
				title="Gebruikersnaam mag alleen alfanumerieke tekens (letters A-Z, cijfers 0-9) bevatten, met uitzondering van onderstrepingstekens." type="text"
				aria-describedby="text-form-username-4-message"
				required >
		</div>
	</div>

	<button type="submit">Verzend</button>
</form>

Wachtwoord

Aandachtspunten:

Vertel de gebruiker welke eisen er aan de gebruikersnaam zijn gesteld indien er eisen zijn. Dit kan met een standaard opengeklapt bericht zoals in het onderstaande voorbeeld of met een ingeklapt bericht die de gebruiker zelf kan openen indien gewenst. Voor meer informatie zie: Berichten en meldingen en ingeklapte hulpteksten.
Om berichten visueel te koppelen aan een inputveld kunnen de <input> en het bericht gegroepeerd worden binnen een <div. Let op: Binnen de weergave met kolommen dienen berichten altijd gegroepeerd te worden met het inputveld.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="text-form-password-1">Wachtwoord</label>
	<p class="explanation"
		id="text-form-password-1-message"><span>Toelichting:</span> Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, 1 kleineletter en 1 cijfer.</p>
	<input id="text-form-password-1"
		name="text-form-password-1"
		pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
		placeholder="wachtwoord"
		title="Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, 1 kleineletter en 1 cijfer."
		type="password"
		aria-describedby="text-form-password-1-message">

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="text-form-password-2">Wachtwoord</label>
		<div>
			<p class="explanation"
				id="text-form-password-2-message"><span>Toelichting:</span> Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, 1 kleineletter en 1 cijfer.</p>
			<input id="text-form-password-2"
				name="text-form-password-2"
				pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
				placeholder="wachtwoord"
				title="Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, 1 kleineletter en 1 cijfer."
				type="password"
				aria-describedby="text-form-password-2-message">
		</div>
	</div>

	<button type="submit">Verzend</button>
</form>

Berichten en meldingen

Om de gebruiker van de nodige feedback en uitleg te voorzien kan gebruik gemaakt worden van meldingen binnen het formulier.

Aandachtspunten:

Indien er gebruik wordt gemaakt van de weergaven in kolommen, groepeer het invoerveld met het bijbehorende bericht. Als er geen gebruik gemaakt wordt van kolommen kunnen meldingen direct boven of onder het bijbehorende invoerveld geplaatst worden.
Plaats meldingen met betrekking tot het invullen van velden altijd boven het invoerveld, zodat de gebruiker eerst de uitleg leest en daarna het bijbehorende invoerveld tegenkomt. Denk hierbij aan waarschuwingen en extra toelichting.
Plaats foutmeldingen altijd onder het invoerveld, zodat de gebruiker eerst te zien krijgt wat de context van de foutmelding is.

Algemene melding op het formulier

Voeg berichten die op het hele formulier slaan toe door het bericht direct binnen de <form>-tag te plaatsen.

Hiervoor kan gebruik gemaakt worden van de verschillende berichttypes, en de beschikbare berichtweergaven. Denk hierbij aan, toelichting, waarschuwingen en foutmeldingen. Voor alle beschikbare voorbeelden en types zie: notificaties.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" aria-describedby="form-1-message">
	<p class="explanation" id="form-1-message"><span>Toelichting:</span> Lorem ipsum dolor set amet</p>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view" aria-describedby="form-2-message">
	<p class="explanation" id="form-2-message"><span>Toelichting:</span> Lorem ipsum dolor set amet</p>
</form>

Feedback op invoervelden

Feedback direct op het invoerveld is een van de meest directe manieren om de gebruiker te laten weten welk invoerveld extra aandacht nodig heeft. Beschikbare notificatietypes zijn:

error
warning
explanation

Aandachtspunten:

Let op: visuele feedback op het invoerveld is op zichzelf onvoldoende om toegankelijkheid en een goede gebruikerservaring te waarborgen.
Vertel de gebruiker altijd wat de vervolgstappen zijn die zij kunnen nemen om het probleem op te lossen of om zelf verder te kunnen.
Voeg de class toe met het type melding op het invoerveld om gebruik te maken van visuele feedback direct op het invoerveld. Voorbeeld: class="error".
Voeg voor screenreader gebruikers aria-invalid="true" toe aan invoervelden met een error.

Voorbeeld

Visuele voorbeelden:

Html-voorbeelden:

							
<form action="" method="post">
	<label for="voorbeeld-text-input-error-1">Voorbeeld invoerveld foutmelding</label>
	<div>
		<input id="voorbeeld-text-input-error-1" class="error" value="Voorbeeld invoerveld foutmelding" aria-describedby="input-error-message" aria-invalid="true">
		<p class="error" id="input-error-message"><span>foutmelding:</span> Lorem ipsum dolor set amet </p>
	</div>

	<label for="voorbeeld-text-input-warning-1">Input</label>
	<div>
		<p class="warning" id="input-warning-message"> <span>waarschuwing:</span> Lorem ipsum dolor sit.</p>
		<input id="voorbeeld-text-input-warning-1" class="warning" value="Voorbeeld invoerveld waarschuwing" aria-describedby="input-warning-message">
	</div>

	<label for="voorbeeld-text-input-explanation-1">Voorbeeld invoerveld toelichting</label>
	<div>
		<p class="explanation" id="input-explanation-message"><span>toelichting:</span> Lorem ipsum dolor set amet</p>
		<input id="voorbeeld-text-input-explanation-1" class="explanation" value="Voorbeeld invoerveld toelichting" aria-describedby="input-explanation-message">
	</div>
	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visuele voorbeelden:

Html-voorbeelden:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="voorbeeld-text-input-error-2">Voorbeeld invoerveld foutmelding</label>
		<div>
			<p class="error" id="input-error-message">
				<span>foutmelding:</span> Lorem ipsum dolor set amet
			</p>
			<input
				id="voorbeeld-text-input-error-2"
				class="error"
				name="voorbeeld-text-input-error-2"
				placeholder="Voorbeeld invoerveld foutmelding"
				type="text"
				aria-describedby="input-error-message"
				aria-invalid="true">
		</div>
	</div>

	<div>
		<label for="voorbeeld-text-input-warning-2">Voorbeeld invoerveld waarschuwing</label>

		<div>
			<p class="warning" id="input-warning-message">
				<span>waarschuwing:</span> Lorem ipsum dolor sit.
			</p>
			<input
				id="voorbeeld-text-input-warning-2"
				class="warning"
				name="voorbeeld-text-input-warning-2"
				placeholder="Voorbeeld invoerveld waarschuwing"
				type="text"
				aria-describedby="input-warning-message">
		</div>
	</div>

	<div>
		<label for="voorbeeld-text-input-explanation-2">Voorbeeld invoerveld toelichting</label>
		<div>
			<input
				id="voorbeeld-text-input-explanation-2"
				class="explanation"
				name="voorbeeld-text-input-explanation-2"
				placeholder="Voorbeeld invoerveld toelichting"
				type="text"
				aria-describedby="input-explanation-message">
			<p class="explanation" id="input-explanation-message">
				<span>toelichting:</span> Lorem ipsum dolor set amet
			</p>
		</div>
	</div>
	<button type="submit">Verzend</button>
</form>

Tekstuele meldingen bij invoervelden

Meldingen die over een specifiek invoerveld gaan, dienen in de context bij het invoerveld geplaatst te worden. Hierdoor is het voor de gebruiker direct duidelijk waar de melding bij hoort.

Indien er gebruik wordt gemaakt van de weergaven in kolommen, groepeer het invoerveld met het bijbehorende bericht. Als er geen gebruik gemaakt wordt van kolommen kunnen meldingen direct boven of onder het bijbehorende invoerveld geplaatst worden.
Plaats toelichting met betrekking tot het invullen van velden boven het invoerveld, zodat de gebruiker eerst de toelichtig leest en daarna het bijbehorende invoerveld tegenkomt. Hierdoor weet de gebruiker hoe het invoerveld ingevuld dient te worden voordat deze gepresenteerd wordt. Uitzondering hierop zijn toelichtingsteksten die de gerbruiker zelf activeert door middel van de hulpknop. Die teksten worden onder het gekozen invoerveld geplaatst zodat de structuur van het formulier en het element waar de gebruiker interactie mee heeft zo min mogelijk verspringt.
Plaats foutmeldingen altijd onder het invoerveld. Dit zorgt ervoor dat de gebruiker eerst te zien krijgt wat de context van de foutmelding is wat het begrijpen van de foutmelding toegankelijker maakt.
Voor het toevoegen van meldingen kan gebruik gemaakt worden van de types en html-elementen zoals beschreven in Notificaties.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="voorbeeld-text-input-error-3">Voorbeeld invoerveld foutmelding</label>
	<div>
		<input
			id="voorbeeld-text-input-error-3"
			class="error"
			name="voorbeeld-text-input-error-3"
			placeholder="Voorbeeld invoerveld foutmelding"
			type="text"
			aria-describedby="input-error-message-1"
			aria-invalid="true">
		<p class="error" id="input-error-message-1">
			<span>foutmelding:</span> Lorem ipsum dolor set amet
		</p>
	</div>

	<label for="voorbeeld-text-input-warning-3">Voorbeeld invoerveld waarschuwing</label>
	<div>
		<p class="warning" id="input-warning-message-1">
			<span>waarschuwing:</span> Lorem ipsum dolor sit.
		</p>
		<input
			id="voorbeeld-text-input-warning-3"
			class="warning"
			name="voorbeeld-text-input-warning-3"
			placeholder="Voorbeeld invoerveld waarschuwing"
			type="text"
			aria-describedby="input-warning-message-1">
	</div>

	<label for="voorbeeld-text-input-explanation-3">Voorbeeld invoerveld toelichting</label>
	<div>
		<p class="explanation" id="input-explanation-message-1">
			<span>toelichting:</span> Lorem ipsum dolor set amet
		</p>
		<input
			id="voorbeeld-text-input-explanation-3"
			class="explanation"
			name="voorbeeld-text-input-explanation-3"
			placeholder="Voorbeeld invoerveld toelichting"
			type="text" aria-describedby="input-explanation-message-1">
	</div>
	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="voorbeeld-text-input-error-4">Voorbeeld invoerveld foutmelding</label>
		<div>
			<input
				id="voorbeeld-text-input-error-4"
				class="error"
				name="voorbeeld-text-input-error-4"
				placeholder="Voorbeeld invoerveld foutmelding"
				type="text"
				aria-describedby="input-error-message-2"
				aria-invalid="true">
			<p class="error" id="input-error-message-2">
				<span>foutmelding:</span> Lorem ipsum dolor set amet
			</p>
		</div>
	</div>

	<div>
		<label for="voorbeeld-text-input-warning-4">Voorbeeld invoerveld waarschuwing</label>
		<div>
			<p class="warning" id="input-warning-message-2">
				<span>waarschuwing:</span> Lorem ipsum dolor sit.
			</p>
			<input
				id="voorbeeld-text-input-warning-4"
				class="warning"
				name="voorbeeld-text-input-warning-4"
				placeholder="Voorbeeld invoerveld waarschuwing"
				type="text"
				aria-describedby="input-warning-message-2">
		</div>
	</div>

	<div>
		<label for="voorbeeld-text-input-explanation-4">Voorbeeld invoerveld toelichting</label>
		<div>
			<p class="explanation" id="input-explanation-message-2">
				<span>toelichting:</span> Lorem ipsum dolor set amet
			</p>
			<input
				id="voorbeeld-text-input-explanation-4"
				class="explanation"
				name="voorbeeld-text-input-explanation-4"
				placeholder="Voorbeeld invoerveld toelichting"
				type="text"
				aria-describedby="input-explanation-message-2">
		</div>
	</div>
	<button type="submit">Verzend</button>
</form>

Invoerveld waarschuwing

Voor het toevoegen van waarschuwingen

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="voorbeeld-text-input-warning-5">Voorbeeld invoerveld waarschuwing</label>
	<div>
		<p class="warning" id="input-warning-message-5">
			<span>waarschuwing:</span> Lorem ipsum dolor sit.
		</p>
		<input
			id="voorbeeld-text-input-warning-5"
			class="warning"
			name="voorbeeld-text-input-warning-5"
			placeholder="Voorbeeld invoerveld waarschuwing"
			type="text"
			aria-describedby="input-warning-message-5">
	</div>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="voorbeeld-text-input-warning-6">Voorbeeld invoerveld waarschuwing</label>
		<div>
			<p class="warning" id="input-warning-message-6">
				<span>waarschuwing:</span> Lorem ipsum dolor sit.
			</p>
			<input
				id="voorbeeld-text-input-warning-6"
				class="warning"
				name="voorbeeld-text-input-warning-6"
				placeholder="Voorbeeld invoerveld waarschuwing"
				type="text"
				aria-describedby="input-warning-message-6">
		</div>
	</div>

	<button type="submit">Verzend</button>
</form>

Invoerveld foutmelding

Voor het toevoegen van foutmeldingen

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="voorbeeld-text-input-error-5">Voorbeeld invoerveld foutmelding</label>
	<div>
		<input
			id="voorbeeld-text-input-error-5"
			class="error"
			name="voorbeeld-text-input-error-5"
			placeholder="Voorbeeld invoerveld foutmelding"
			type="text"
			aria-describedby="input-error-message-5"
			aria-invalid="true">
		<p class="error" id="input-error-message-5">
			<span>foutmelding:</span> Lorem ipsum dolor set amet
		</p>
	</div>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="voorbeeld-text-input-error-6">Voorbeeld invoerveld foutmelding</label>
		<div>
			<input
				id="voorbeeld-text-input-error-6"
				class="error" name="voorbeeld-text-input-error-6"
				placeholder="Voorbeeld invoerveld foutmelding"
				type="text"
				aria-describedby="input-error-message-6"
				aria-invalid="true">
			<p class="error" id="input-error-message-6">
				<span>foutmelding:</span> Lorem ipsum dolor set amet
			</p>
		</div>
	</div>

	<button type="submit">Verzend</button>
</form>

Invoerveld toelichting

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="voorbeeld-text-input-explanation-5">Voorbeeld invoerveld toelichting</label>
	<div>
		<p class="explanation" id="input-explanation-message-5">
			<span>toelichting:</span> Lorem ipsum dolor set amet
		</p>
		<input
			id="voorbeeld-text-input-explanation-5"
			class="explanation"
			name="voorbeeld-text-input-explanation-5"
			placeholder="Voorbeeld invoerveld toelichting"
			type="text"
			aria-describedby="input-explanation-message-5">
	</div>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="voorbeeld-text-input-explanation-6">Voorbeeld invoerveld toelichting</label>
		<div>
			<p class="explanation" id="input-explanation-message-6">
				<span>toelichting:</span> Lorem ipsum dolor set amet
			</p>
			<input
				id="voorbeeld-text-input-explanation-6"
				class="explanation"
				name="voorbeeld-text-input-explanation-6"
				placeholder="Voorbeeld invoerveld toelichting"
				type="text"
				aria-describedby="input-explanation-message-6">
		</div>
	</div>

	<button type="submit">Verzend</button>
</form>

Overige formulierelementen met meldingen

Selectievak

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
  <div>
    <div class="checkbox">
      <input type="checkbox" id="checkbox-example-error-1" name="voorwaarden" value="checkbox input error"
        class="error" aria-describedby="checkbox-example-error-1-message">
      <label for="checkbox-example-base">Lorem ipsum dolor set amet</label>
    </div>
    <p class="error" id="checkbox-example-error-1-message"><span>Foutmelding</span> Lorem ipsum</p>
  </div>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
  <div class="option-group">
    <div class="checkbox">
      <input type="checkbox" id="checkbox-example-default-4" name="standaard-checkbox"
        aria-describedby="input-error-message-checkbox-4" aria-invalid="true">
      <label for="checkbox-example-default-4">Lorem ipsum dolor set amet</label>
    </div>
    <p class="error" id="input-error-message-checkbox-4">
      <span>foutmelding:</span> Lorem ipsum dolor set amet
    </p>
  </div>
</form>

Verplicht selectievak

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
  <div class="required">
    <span class="nota-bene">Dit veld is verplicht</span>
    <div class="checkbox">
      <input type="checkbox" id="checkbox-example-error-required-message" name="voorwaarden" value="checkbox input error" class="error" aria-describedby="checkbox-example-error-required-message-message">
      <label for="checkbox-example-base">Lorem ipsum dolor set amet</label>
    </div>
    <p class="error" id="checkbox-example-error-required-message-message"><span>Foutmelding</span> Lorem
      ipsum
    </p>
  </div>
</form>

Voorbeeld weergave in kolommen

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-6" name="voorwaarden" required=""
        aria-describedby="checkbox-example-required-6-message" aria-invalid="true">
      <label for="checkbox-example-required-6">verplicht selectievak</label>
    </div>
    <p class="error" id="checkbox-example-required-6-message">
      <span>Foutmelding:</span> Lorem ipsum dolor set amet
    </p>
  </div>
</form>

Lijstweergave melding op de lijst

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
  <fieldset class="grouped-choice-list" aria-describedby="grouped-choice-list-1" aria-invalid="true">
    <legend>Lorem ipsum legend</legend>
    <p class="error" id="grouped-choice-list-1">
      <span>foutmelding:</span> Lorem ipsum dolor set amet
    </p>
    <div class="checkbox">
      <input type="checkbox" id="checkbox-list-item-7" name="option-1">
      <label for="checkbox-list-item-7">Optie 1</label>
    </div>

    <div class="checkbox">
      <input type="checkbox" id="checkbox-list-item-8" name="option-2">
      <label for="checkbox-list-item-8">Optie 2</label>
    </div>

    <div class="checkbox">
      <input type="checkbox" id="checkbox-list-item-9" name="option-3">
      <label for="checkbox-list-item-9">Optie 3</label>
    </div>
  </fieldset>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
  <fieldset class="grouped-choice-list" aria-invalid="true">
    <legend>Lorem ipsum</legend>
    <div aria-describedby="checkbox-error-message-10">
      <p class="error" id="checkbox-error-message-10">
        <span>foutmelding:</span>Lorem ipsum dolor set amet
      </p>

      <div class="checkbox">
        <input type="checkbox" id="checkbox-list-item-10" name="option-1">
        <label for="checkbox-list-item-10">Optie 1</label>
      </div>

      <div class="checkbox">
        <input type="checkbox" id="checkbox-list-item-11" name="option-2">
        <label for="checkbox-list-item-11">Optie 2</label>
      </div>

      <div class="checkbox">
        <input type="checkbox" id="checkbox-list-item-12" name="option-3">
        <label for="checkbox-list-item-12">Optie 3</label>
      </div>
    </div>
  </fieldset>
</form>

Lijstweergave melding op lijstelementen

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
  <fieldset class="grouped-choice-list">
    <legend>Lorem ipsum</legend>
    <div class="checkbox">
      <input type="checkbox" id="checkbox-list-item-13" name="option-1"
        aria-describedby="checkbox-error-item-13-message" aria-invalid="true">
      <label for="checkbox-list-item-13">Optie 1</label>
      <p class="error" id="checkbox-error-item-13-message"><span>foutmelding:</span>Lorem
        ipsum dolor set amet</p>
    </div>

    <div class="checkbox">
      <input type="checkbox" id="checkbox-list-item-14" name="option-2"
        aria-describedby="checkbox-error-item-14-message" aria-invalid="true">
      <label for="checkbox-list-item-14">Optie 2</label>
      <p class="error" id="checkbox-error-item-14-message"><span>foutmelding:</span>Lorem
        ipsum dolor set amet</p>
    </div>

    <div class="checkbox">
      <input type="checkbox" id="checkbox-list-item-15" name="option-3"
        aria-describedby="checkbox-error-item-15-message" aria-invalid="true">
      <label for="checkbox-list-item-15">Optie 3</label>
      <p class="error" id="checkbox-error-item-15-message"><span>foutmelding:</span>Lorem
        ipsum dolor set amet</p>
    </div>
  </fieldset>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
  <fieldset class="grouped-choice-list">
    <legend>Lorem ipsum</legend>
    <div class="checkbox">
      <input type="checkbox" id="checkbox-list-item-16" name="option-1"
        aria-describedby="checkbox-list-item-16-message" aria-invalid="true">
      <label for="checkbox-list-item-16">Optie 1</label>
      <p class="error" id="checkbox-list-item-16-message">
        <span>foutmelding:</span>
        Lorem ipsum dolor set amet
      </p>
    </div>

    <div class="checkbox">
      <input type="checkbox" id="checkbox-list-item-17" name="option-2"
        aria-describedby="checkbox-list-item-17-message" aria-invalid="true">
      <label for="checkbox-list-item-17">Optie 2</label>
      <p class="error" id="checkbox-list-item-17-message">
        <span>foutmelding:</span>
        Lorem ipsum dolor set amet
      </p>
    </div>

    <div class="checkbox">
      <input type="checkbox" id="checkbox-list-item-18" name="option-3"
        aria-describedby="checkbox-list-item-18-message" aria-invalid="true">
      <label for="checkbox-list-item-18">Optie 3</label>
      <p class="error" id="checkbox-list-item-18-message">
        <span>foutmelding:</span>
        Lorem ipsum dolor set amet
      </p>
    </div>
  </fieldset>
</form>

Radio-selecteerknop

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<div class="radio">
		<input
			type="radio"
			id="radio-example-default-1"
			name="standaard-radiobutton" value="value"
			aria-describedby="radio-example-default-1-message"
			aria-invalid="true">
		<label for="radio-example-default-1">Lorem ipsum dolor set amet</label>
  </div>
		<p class="error" id="radio-example-default-1-message">
			<span>foutmelding:</span>
			Lorem ipsum dolor set amet
		</p>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
  <div class="option-group">
    <div class="radio">
      <input type="radio" id="radio-example-default-2" name="standaard-radiobutton" value="value"
        aria-describedby="radio-example-default-2-message" aria-invalid="true">
      <label for="radio-example-default-2">Lorem ipsum dolor set amet</label>
    </div>
    <p class="error" id="radio-example-default-2-message">
      <span>foutmelding:</span>
      Lorem ipsum dolor set amet
    </p>
  </div>
</form>

Verplichte radio-selecteerknop

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<div class="radio required">
		<span class="nota-bene">Dit veld is verplicht</span>
		<div>
			<input
				type="radio"
				id="radio-example-default-3"
				name="standaard-radiobutton"
				value="value"
				required
			 	aria-describedby="radio-example-default-3-message"
			 	aria-invalid="true">
			<label for="radio-example-default-3">Lorem ipsum dolor set amet</label>
		</div>

          <p class="error" id="radio-example-default-3-message">
              <span>foutmelding:</span>
              Lorem ipsum dolor set amet
          </p>
	</div>
</form>

Voorbeeld weergave in kolommen

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-default-4" name="standaard-radiobutton" value="value" required
        aria-describedby="radio-example-default-4-message" aria-invalid="true">
      <label for="radio-example-default-4">Lorem ipsum dolor set amet</label>
    </div>
    <p class="error" id="radio-example-default-4-message">
      <span>foutmelding:</span>
      Lorem ipsum dolor set amet
    </p>
  </div>
</form>

Lijstweergave melding op de lijst

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<fieldset
		class="grouped-choice-list"
		aria-describedby="radio-list-1-message"
		aria-invalid="true">
		<legend>Lorem ipsum</legend>
		<p class="error" id="radio-list-1-message">
			<span>foutmelding:</span>
			Lorem ipsum dolor set amet
		</p>
		<div class="radio">
			<input type="radio" id="radio-list-item-10" name="radio-option" value="value 1">
			<label for="radio-list-item-10">Optie 1</label>
		</div>

		<div class="radio">
			<input type="radio" id="radio-list-item-11" name="radio-option" value="value 2">
			<label for="radio-list-item-11">Optie 2</label>
		</div>

		<div class="radio">
			<input type="radio" id="radio-list-item-12" name="radio-option" value="value 3">
			<label for="radio-list-item-12">Optie 3</label>
		</div>
	</fieldset>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<fieldset
		class="grouped-choice-list"
		aria-describedby="radio-1-list-message"
		aria-invalid="true">
		<legend>Lorem ipsum</legend>
		<div>
			<p class="error" id="radio-1-list-message">
				<span>Foutmelding:</span>
				Lorem ipsum dolor set amet
			</p>
			<div class="radio">
				<input type="radio" id="radio-1-list-item-1" name="radio-option-2" value="value 1">
				<label for="radio-1-list-item-1">Optie 1</label>
			</div>
			<div class="radio">
				<input type="radio" id="radio-1-list-item-2" name="radio-option-2" value="value 2">
				<label for="radio-1-list-item-2">Optie 2</label>
			</div>
			<div class="radio">
				<input type="radio" id="radio-1-list-item-3" name="radio-option-2" value="value 3">
				<label for="radio-1-list-item-3">Optie 3</label>
			</div>
		</div>
	</fieldset>
</form>

Lijstweergave melding op lijstelementen

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<fieldset class="grouped-choice-list">
		<legend>Lorem ipsum</legend>
		<div class="radio">
			<input
				type="radio"
				id="radio-list-item-4"
				name="radio-option" value="value 1"
				aria-describedby="radio-list-item-4-message"
				aria-invalid="true">
			<label for="radio-list-item-4">Optie 1</label>
			<p class="error" id="radio-list-item-4-message">
				<span>Foutmelding:</span>
				Lorem ipsum dolor set amet
			</p>
		</div>

		<div class="radio">
			<input
				type="radio"
				id="radio-list-item-5"
				name="radio-option" value="value 2"
				aria-describedby="radio-list-item-5-message"
				aria-invalid="true">
			<label for="radio-list-item-5">Optie 2</label>
			<p class="error" id="radio-list-item-5-message">
				<span>Foutmelding:</span>
				Lorem ipsum dolor set amet
			</p>
		</div>

		<div class="radio">
			<input
				type="radio"
				id="radio-list-item-6"
				name="radio-option" value="value 3"
				aria-describedby="radio-list-item-6-message"
				aria-invalid="true">
			<label for="radio-list-item-6">Optie 3</label>
			<p class="error" id="radio-list-item-6-message">
				<span>Foutmelding:</span>
				Lorem ipsum dolor set amet
			</p>
		</div>
	</fieldset>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<fieldset class="grouped-choice-list">
		<legend>Lorem ipsum</legend>
		<div>
			<div class="radio">
				<input
					type="radio"
					id="radio-2-list-item-1"
					name="radio-option-2"
					value="value 1"
					aria-describedby="radio-2-list-item-1-message"
					aria-invalid="true">
				<label for="radio-2-list-item-1">Optie 1</label>
				<p class="error" id="radio-2-list-item-1-message">
					<span>Foutmleding:</span>
					Lorem ipsum dolor set amet
				</p>
			</div>
			<div class="radio">
				<input
					type="radio"
					id="radio-2-list-item-2"
					name="radio-option-2"
					value="value 2"
					aria-describedby="radio-2-list-item-2-message"
					aria-invalid="true">
				<label for="radio-2-list-item-2">Optie 2</label>
				<p class="error" id="radio-2-list-item-2-message">
					<span>Foutmleding:</span>
					Lorem ipsum dolor set amet
				</p>
			</div>
			<div class="radio">
				<input
					type="radio"
					id="radio-2-list-item-3"
					name="radio-option-2"
					value="value 3"
					aria-describedby="radio-2-list-item-3-message"
					aria-invalid="true">
				<label for="radio-2-list-item-3">Optie 3</label>
				<p class="error" id="radio-2-list-item-3-message">
					<span>Foutmleding:</span>
					Lorem ipsum dolor set amet
				</p>
			</div>
		</div>
	</fieldset>
</form>

Selectielijst

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<!-- Message above -->

	<label for="single-select-1">Single select</label>
	<p class="warning" id="single-select-1-message">
		<span>Waarschuwing:</span>
		Lorem ipsum dolor set amet.
	</p>
	<select id="single-select-1" name="single-select-1" aria-describedby="single-select-1-message">
		<option value="1">Optie 1</option>
		<option value="2">Optie 2</option>
		<option value="3">Optie 3</option>
	</select>

	<!-- Message below -->

	<label for="single-select-2">Single select</label>
	<select id="single-select-2" name="single-select-2" aria-describedby="single-select-2-message" aria-invalid="true">
		<option value="1">Optie 1</option>
		<option value="2">Optie 2</option>
		<option value="3">Optie 3</option>
	</select>
	<p class="error" id="single-select-2-message">
		<span>Foutmelding:</span>
		Lorem ipsum dolor set amet.
	</p>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<!-- Message above -->

	<div>
		<label for="single_select">Single select</label>
		<div>
			<p class="warning" id="single-select-3-message">
				<span>Waarschuwing:</span>
				Lorem ipsum dolor set amet.
			</p>
			<select
				id="single-select-3"
				name="single-select-3"
				aria-describedby="single-select-3-message">
				<option value="1">Optie 1</option>
				<option value="2">Optie 2</option>
				<option value="3">Optie 3</option>
			</select>
		</div>
	</div>

	<!-- Message below -->

	<div>
		<label for="single_select">Single select</label>
		<div>
			<select id="single-select-4" name="single-select-4" aria-describedby="single-select-4-message" aria-invalid="true">
				<option value="1">Optie 1</option>
				<option value="2">Optie 2</option>
				<option value="3">Optie 3</option>
			</select>
			<p class="error" id="single-select-4-message">
				<span>Foutmelding:</span>
				Lorem ipsum dolor set amet.
			</p>
		</div>
	</div>

	<button type="submit">Verzend</button>
</form>

Ingeklapte hulpteksten

Voor het geven van extra toelichting op een invoerveld die niet voor iedere gebruiker nodig zal zijn, kan het beste gekozen worden voor de ingeklapte variant. Bij deze weergave is de toelichting verborgen tot dat de gebruiker op het hulpicoon klikt.

Aandachtspunten:

Om gebruik te maken van de ingeklapte weergave dient de class help toegevoegd te worden aan het formulier.
Plaats het invoerveld met de bijbehorende hulptekst in een <div> voor de correcte weergave.
Ingeklapte hulpteksten dienen onder het invoerveld geplaatst te worden zodat de structuur van het formulier en het element waar de gebruiker interactie mee heeft zo min mogelijk verspringt. Hulptekst die boven het invoerveld staat, wordt niet ingeklapt.
Icoonknoppen tonen geen tekst. Voeg de knoptekst wel altijd toe voor screenreader gebruikers.
- Dit kan middels de data-open-label en data-close-label attributen op de .explanation. Zie het Html-voorbeeld hieronder.
- Zorg ervoor dat de knoptekst in dezelfde taal is als de rest van het document, en dat deze duidelijk aangeeft welke toelichting de knop bedient.
Let op: Deze functionaliteit maakt gebruik van JavaScript.
- Voeg <script defer src="./pad/naar/form-help.min.js"></script> toe aan de <head> van de site.
- De knop wordt automatisch toegevoegd. Deze hoeft dus niet handmatig in de html opgenomen te worden.
- Zonder JavaScript wordt de knop niet toegevoegd en wordt hulptekst getoont zonder deze in te klappen.

Toelichting: Wordt de hulptekst niet ingeklapt? Controleer dan of de JavaScript correct geladen wordt en of de hulptekst onder het invoerveld geplaatst is.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="help">
	<label for="voorbeeld-text-input-met-hulptekst-simpel-1">Help op simpel formulierveld</label>
	<div>
		<input
			id="voorbeeld-text-input-met-hulptekst-simpel-1"
			name="voorbeeld-text-input"
			placeholder="voorbeeld text input" type="text"
			aria-describedby="voorbeeld-text-input-met-hulptekst-simpel-1-message">
		<p
			class="explanation"
			data-open-label="Toelichting bij het veld: Voorbeeld text input"
			data-close-label="Sluit toelichting bij het veld: Voorbeeld text input"
			id="voorbeeld-text-input-met-hulptekst-simpel-1-message"
			>
			Lorem ipsum dolor set amet.</p>
	</div>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view help">
	<div>
		<label for="voorbeeld-text-input-met-hulptekst-kolommen-1">Voorbeeld text input</label>
		<div>
			<input
				id="voorbeeld-text-input-met-hulptekst-kolommen-1"
				name="voorbeeld-text-input-met-hulptekst-kolommen-1"
				placeholder="voorbeeld text input"
				type="text"
				aria-describedby="voorbeeld-text-input-met-hulptekst-kolommen-1-message">
			<p
				class="explanation"
				data-open-label="Toelichting bij het veld: Voorbeeld text input"
				data-close-label="Sluit toelichting bij het veld: Voorbeeld text input"
				id="voorbeeld-text-input-met-hulptekst-kolommen-1-message">
				Lorem ipsum dolor set amet.</p>
		</div>
	</div>

	<button type="submit">Verzend</button>
</form>

Voorbeeld verplicht veld met ingeklapte hulptekst

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="help">
  <label for="voorbeeld-text-input-met-hulptekst-simpel-2">Help op simpel
    formulierveld</label>
  <div class="required">
    <p class="nota-bene">Dit veld is verplicht</p>
    <div>
      <input id="voorbeeld-text-input-met-hulptekst-simpel-2"
        name="voorbeeld-text-input-met-hulptekst-simpel-2" placeholder="voorbeeld text input" type="text"
        aria-describedby="voorbeeld-text-input-met-hulptekst-simpel-2-message">
      <p class="explanation" data-open-label="Toelichting bij het veld: Voorbeeld text input"
        data-close-label="Sluit toelichting bij het veld: Voorbeeld text input"
        id="voorbeeld-text-input-met-hulptekst-simpel-2-message">
        Lorem ipsum dolor set amet.</p>
    </div>
  </div>

  <button type="submit">Verzend</button>
</form>

Voorbeeld verplicht veld met ingeklapte hulptekst weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view help">
  <div class="required">
    <label for="voorbeeld-text-input-met-hulptekst-kolommen-2">Voorbeeld text input</label>
    <div>
      <p class="nota-bene">Dit veld is verplicht</p>
      <div>
        <input id="voorbeeld-text-input-met-hulptekst-kolommen-2" name="voorbeeld-text-input"
          placeholder="voorbeeld text input" type="text"
          aria-describedby="voorbeeld-text-input-met-hulptekst-kolommen-2-message">
        <p class="explanation" data-open-label="Toelichting bij het veld: Voorbeeld text input"
          data-close-label="Sluit toelichting bij het veld: Voorbeeld text input"
          id="voorbeeld-text-input-met-hulptekst-kolommen-2-message">
          Lorem ipsum dolor set amet.</p>
      </div>
    </div>
  </div>
  <button type="submit">Verzend</button>
</form>

Radio-selecteerknop

Radio-selecteerknoppen geven de gebruiker de mogelijkheid om een enkele voorkeur uit een lijst te kiezen.

Aandachtspunten:

Groepeer de <input> met direct daaropvolgend het bijbehorende <label> in een <div>.
Plaats eventuele ondersteunende teksten zoals "Dit veld is verplicht", direct boven de bijbehorende <input>.
Het <input> dient van het type="radio" te zijn.
De selectieopties onder een <label> dienen met het bijbehorende <label> en de bijbehorende radio-selecteerknoppen gegroepeerd te zijn binnen een <div>. Zie lijstweergave voor meer informatie en voorbeelden.

Beschikbare voorbeelden:

Standaard weergave

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<div class="radio">
		<input
			type="radio"
			id="radio-example-default-5"
			name="standaard-radiobutton"
			value="value">
		<label for="radio-example-default-5">Lorem ipsum dolor set amet</label>
	</div>
	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen:

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div class="radio">
		<input
			type="radio"
			id="radio-example-default-horizontal"
			name="standaard-radiobutton"
			value="value">
		<label for="radio-example-default-horizontal">Lorem ipsum dolor set amet</label>
	</div>
	<button type="submit">Verzend</button>
</form>

Geselecteerde radio-selecteerknop

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<div class="radio">
		<input
			type="radio"
			id="radio-example-checked"
			name="standaard-radiobutton"
			value="value"
			checked>
		<label for="radio-example-checked">Lorem ipsum dolor set amet</label>
	</div>
  <button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div class="radio">
		<input
			type="radio"
			id="radio-example-default-7"
			name="standaard-radiobutton"
			value="value"
			checked>
		<label for="radio-example-default-7">Lorem ipsum dolor set amet</label>
	</div>
  <button type="submit">Verzend</button>
</form>

Verplicht selectievak

Radio selecteerknoppen staan nooit op zichzelf. Je hebt altijd tenminste twee opties. Voor verplichte radio selecteerknoppen geld dan ook dat je tenminste 1 van deze opties moet aanvinken.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<div class="required">
		<span class="nota-bene">Dit veld is verplicht</span>
		<div class="radio"
		    <input
			    type="radio"
			    id="radio-example-required"
			    name="voorwaarden" required>
		    <label for="radio-example-required">Dit veld is verplicht</label>
	    </div>
	</div>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div class="radio required">
		<span class="nota-bene">Dit veld is verplicht</span>
		<div
		    <input
    			type="radio"
	    		id="radio-example-required"
    		  	name="verplichte-radiobutton"
    			required>
    		<label for="radio-example-required">verplicht keuzeveld</label>
    	</div>
	</div>
	<button type="submit">Verzend</button>
</form>

Uitgeschakeld keuzevak

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<div class="radio">
		<input
			type="radio"
			id="radio-example-disabled"
			name="disabled-radiobutton"
			value="value"
			disabled>
		<label for="radio-example-disabled">Uitgeschakeld keuzevak</label>
	</div>
  <button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div class="radio">
		<input
			type="radio"
			id="radio-example-disabled-2"
			name="disabled-radiobutton"
			value="value"
			disabled>
		<label for="radio-example-disabled">Uitgeschakeld keuzevak</label>
	</div>
  <button type="submit">Verzend</button>
</form>

Lijstweergave

Aandachtspunten:

Plaats ten behoeve van toegankelijkheid lijsten met selectievakken altijd binnen een fieldset.
Plaats direct binnen de <fieldset> een <legend> met een omschrijvende naam. Houdt er rekening mee dat deze naam bij sommige hulptechnologiën voor iedere optie opgelezen wordt.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<fieldset class="grouped-choice-list">
		<legend>Lorem ipsum</legend>
		<div class="radio">
			<input
				type="radio"
				id="radio-list-item-1"
				name="radio-option" value="value 1">
			<label for="radio-list-item-1">Optie 1</label>
		</div>

		<div class="radio">
			<input
				type="radio"
				id="radio-list-item-2"
				name="radio-option" value="value 2">
			<label for="radio-list-item-2">Optie 2</label>
		</div>

		<div class="radio">
			<input
				type="radio"
				id="radio-list-item-3"
				name="radio-option" value="value 3">
			<label for="radio-list-item-3">Optie 3</label>
		</div>
	</fieldset>
  <button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<fieldset class="grouped-choice-list">
		<legend>Lorem ipsum</legend>
		<div>
			<div class="radio">
				<input
					type="radio"
					id="radio-3-list-item-1"
					name="radio-option-2"
					value="value 1">
				<label for="radio-3-list-item-1">Optie 1</label>
			</div>
			<div class="radio">
				<input
					type="radio"
					id="radio-3-list-item-2"
					name="radio-option-2"
					value="value 2">
				<label for="radio-3-list-item-2">Optie 2</label>
			</div>
			<div class="radio">
				<input
					type="radio"
					id="radio-3-list-item-3"
					name="radio-option-2"
					value="value 3">
				<label for="radio-3-list-item-3">Optie 3</label>
			</div>
		</div>
	</fieldset>
  <button type="submit">Verzend</button>
</form>

Selectielijst

Invoerveld met een lijst aan keuzes voor de gebruiker.

Aandachtspunten:

Let op: Het overschrijven van de standaard styling van <select>-elementen wordt sterk afgeraden. Dit omdat in verschillende contexten, browsers en systemen het <select>-element anders getoont wordt. De rijksoverheidhuisstijl bevat geen specificaties voor de styling van <select>-elementen. En het is daarom dan ook niet nodig om extra styling toe te voegen. Bestaande websites gebruiken in sommige gevallen wel aangepaste styling voor het <select>-element. Voor de volledigheid is een variant hiervan wel opgenomen binnen deze componenten bibliotheek, om developers op weg te helpen indien het onomkoombaar is dat het <select>-element deze styling-versie nodig heeft. Let op: Deze variant is niet volledig doorgetest in de verschillende situaties, browsers en systemen. Test daarom bij gebruik zelf de elementen goed door. Om gebruik te maken van deze extra toegevoegde styling zie alternatieve weergave.
Als een selectielijst een verplicht invoerveld is, voeg dan altijd als eerste optie een lege optie toe: <option value="">--Please choose an option--</option> Zie Verplichte selectielijst voor meer informatie.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="select">Selectielijst</label>
	<select id="select" name="select">
		<option value="1">Optie 1</option>
		<option value="2">Optie 2</option>
		<option value="3">Optie 3</option>
	</select>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="select">Selectielijst</label>
		<select id="select" name="select">
			<option value="1">Optie 1</option>
			<option value="2">Optie 2</option>
			<option value="3">Optie 3</option>
		</select>
	</div>

	<button type="submit">Verzend</button>
</form>

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="select-required">Verplichte selectielijst</label>
	<span class="nota-bene">Dit veld is verplicht</span>
	<select id="select-required" name="select-required" required>
		<option value="">--Please choose an option--</option>
		<option value="1">Optie 1</option>
		<option value="2">Optie 2</option>
		<option value="3">Optie 3</option>
	</select>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div class="required">
		<label for="select-required">Verplichte selectielijst</label>
		<div class="required">
			<span class="nota-bene">Dit veld is verplicht</span>
			<select id="select-required" name="select-required" required>
				<option value="">--Please choose an option--</option>
				<option value="1">Optie 1</option>
				<option value="2">Optie 2</option>
				<option value="3">Optie 3</option>
			</select>
		</div>
	</div>

	<button type="submit">Verzend</button>
</form>

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="select-disabled">Uitgeschakelde selectielijst</label>
	<select disabled id="select-disabled" name="select-disabled">
		<option value="1">Optie 1</option>
		<option value="2">Optie 2</option>
		<option value="3">Optie 3</option>
	</select>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="select-disabled">Uitgeschakelde selectielijst</label>
		<select disabled id="select-disabled" name="select-disabled">
			<option value="1">Optie 1</option>
			<option value="2">Optie 2</option>
			<option value="3">Optie 3</option>
		</select>
	</div>

	<button type="submit">Verzend</button>
</form>

Aandachtspunten:

Voeg het attribuut selected toe aan een van de option's om de optie voor te selecteren.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="select-selected">Selectielijst met voorgeselecteerde optie</label>
	<select id="select-selected" name="select-selected">
		<option value="1">Optie 1</option>
		<option value="2">Optie 2</option>
		<option value="Voorgeselecteerd" selected>Voorgeselecteerd</option>
	</select>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="select-selected">Selectielijst met voorgeselecteerde optie</label>
		<select id="select-selected" name="select-selected">
			<option value="1">Optie 1</option>
			<option value="2">Optie 2</option>
			<option value="Voorgeselecteerd" selected>Voorgeselecteerd</option>
		</select>
	</div>

	<button type="submit">Verzend</button>
</form>

Waarschuwing: Het gebruik maken van meerdere opties selecteren binnen een <select> wordt sterk afgeraden vanwege de grote hoeveelheid problemen die het met zich mee brengt op het gebied van gebruikersgemak en toegankelijkheid.

Vaak is een lijst met selectievakken een goed alternatief.

Aandachtspunten:

Voeg het attribuut multiple toe aan de <select> om het selecteren van meerdere opties mogelijk te maken.
De browser handelt de vormgeving af, in veel gevallen betekend dit de lijst met opties direct getoond worden.
Geef de gebruiker bij deze optie altijd toelichting over de werking, aangezien deze niet af te lezen is uit de standaard weergave. Dit zorgt qua gebruikservaring snel voor problemen, gebruik daarom een lijst met selectievakken als aternatief.
Let op: Houd bij het implementeren van deze optie rekening mee dat gebruikers die gebruik maken van screenreaders of die enkel met het toetsenbord navigeren naar alle waarschijnlijkheid problemen zullen ondervinden. gebruik daarom een lijst met selectievakken als aternatief.
Geef indien nodig aan hoeveel opties er tegelijkertijd getoont worden. Gebruik hiervoor size="[number]" voorbeeld: size="5". Zie Hoeveelheid getoonde opties voor meer informatie.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="select-multiple">Meerdere opties selecteren</label>
	<div class="explanation" role="group" id="select-multiple-1-message">
		<span>Toelichting:</span>
		<p>Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele voorbeelden:</p>
		<ul>
			<li>Windows: Houd de <code>ctrl</code>-knop ingedrukt en selecteer met de muis de gewenste opties.</li>
			<li>Mac: Houd de <code>cmd</code>-knop ingedrukt en selecteer met de muis de gewenste opties.</li>
		</ul>
	</div>
	<select
		id="select-multiple"
		name="select-multiple"
		multiple
		aria-describedby="select-multiple-1-message">
		<option value="1">Optie 1</option>
		<option value="2">Optie 2</option>
		<option value="3">Optie 3</option>
	</select>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="select-multiple">Meerdere opties selecteren</label>
		<div>
			<div class="explanation" role="group" id="select-multiple-2-message">
				<span>Toelichting:</span>
				<p>Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele voorbeelden:</p>
				<ul>
					<li>Windows: Houd de <code>ctrl</code>-knop ingedrukt en selecteer met de muis de gewenste opties.</li>
					<li>Mac: Houd de <code>cmd</code>-knop ingedrukt en selecteer met de muis de gewenste opties.</li>
				</ul>
			</div>
			<select
				id="select-multiple"
				name="select-multiple"
				multiple
				aria-describedby="select-multiple-2-message">
				<option value="1">Optie 1</option>
				<option value="2">Optie 2</option>
				<option value="3">Optie 3</option>
			</select>
		</div>
	</div>

	<button type="submit">Verzend</button>
</form>

Aandachtspunten:

Geef indien nodig aan hoeveel opties er tegelijkertijd getoont worden. Gebruik hiervoor size="[number]" voorbeeld: size="5".

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="select-mulitple-size">Meerdere opties selecteren</label>
	<div class="explanation" role="group" id="select-multiple-size-1-message">
		<span>Toelichting:</span>
		<p>Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele voorbeelden:</p>
		<ul>
			<li>Windows: Houd de <code>ctrl</code>-knop ingedrukt en selecteer met de muis de gewenste opties.</li>
			<li>Mac: Houd de <code>cmd</code>-knop ingedrukt en selecteer met de muis de gewenste opties.</li>
		</ul>
	</div>

	<select
		id="select-mulitple-size"
		name="select-mulitple-size"
		multiple size="3"
		aria-describedby="select-multiple-size-1-message">
		<option value="1">Optie 1</option>
		<option value="2">Optie 2</option>
		<option value="3">Optie 3</option>
		<option value="4">Optie 4</option>
		<option value="5">Optie 5</option>
		<option value="6">Optie 6</option>
	</select>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Meerdere opties selecteren

Toelichting:

Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele voorbeelden:

Windows: Houd de ctrl-knop ingedrukt en selecteer met de muis de gewenste opties.
Mac: Houd de cmd-knop ingedrukt en selecteer met de muis de gewenste opties.

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="select-mulitple-size">Meerdere opties selecteren</label>
		<div>
			<div class="explanation" role="group" id="select-multiple-size-2-message">
				<span>Toelichting:</span>
				<p>Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele voorbeelden:</p>
				<ul>
					<li>Windows: Houd de <code>ctrl</code>-knop ingedrukt en selecteer met de muis de gewenste opties.</li>
					<li>Mac: Houd de <code>cmd</code>-knop ingedrukt en selecteer met de muis de gewenste opties.</li>
				</ul>
			</div>

			<select
				id="select-mulitple-size"
				name="select-mulitple-size"
				multiple size="3"
				aria-describedby="select-multiple-size-2-message">
				<option value="1">Optie 1</option>
				<option value="2">Optie 2</option>
				<option value="3">Optie 3</option>
				<option value="4">Optie 4</option>
				<option value="5">Optie 5</option>
				<option value="6">Optie 6</option>
			</select>
		</div>
	</div>

	<button type="submit">Verzend</button>
</form>

Aandachtspunten:

Gebruik <optgroup label="[groepsnaam]"> om opties binnen de lijst te groeperen.

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post">
	<label for="select-optgroup">Gegroepeerde opties</label>
	<select id="select-optgroup" name="select-optgroup">
		<optgroup label="Rollende objecten">
			<option value="Bal">Bal</option>
			<option value="Wiel">Wiel</option>
			<option value="Knikker">Knikker</option>
		</optgroup>

		<optgroup label="Slecht rollende objecten">
			<option value="Aambeeld">Aambeeld</option>
			<option value="Eiffeltoren">Eiffeltoren</option>
			<option value="Dinosaurus">Dinosaurus</option>
		</optgroup>
	</select>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="select-optgroup">Gegroepeerde opties</label>
		<select id="select-optgroup" name="select-optgroup">
			<optgroup label="Rollende objecten">
				<option value="Bal">Bal</option>
				<option value="Wiel">Wiel</option>
				<option value="Knikker">Knikker</option>
			</optgroup>

			<optgroup label="Slecht rollende objecten">
				<option value="Aambeeld">Aambeeld</option>
				<option value="Eiffeltoren">Eiffeltoren</option>
				<option value="Dinosaurus">Dinosaurus</option>
			</optgroup>
		</select>
	</div>

	<button type="submit">Verzend</button>
</form>

Alternatieve weergave

Waarschuwing: Het overschrijven van de standaard styling van <select>-elementen wordt sterk afgeraden. Dit omdat in verschillende contexten, browsers en systemen het <select>-element anders getoont wordt.

Aandachtspunten:

De rijksoverheidhuisstijl bevat geen specificaties voor de styling van <select>-elementen. En het is daarom dan ook niet nodig om extra styling toe te voegen.
Bestaande websites gebruiken in sommige gevallen wel aangepaste styling voor het <select>-element. Voor de volledigheid is een variant hiervan wel opgenomen binnen deze componenten bibliotheek, om developers op weg te helpen indien het onomkoombaar is dat het <select>-element deze styling-versie nodig heeft. Let op: Deze variant is niet volledig doorgetest in de verschillende situaties, browsers en systemen. Test daarom bij gebruik zelf de elementen goed door. Om gebruik te maken van deze extra toegevoegde styling zie Alternatieve weergave.
Voeg een extra <div> rondom het <select>-element met de class ro-select toe om gebruik te maken van de alternatieve weergave voor het <select>-element.

Voorbeeld

Visueel voorbeeld:

Selectielijst

Verplichte selectielijst Dit veld is verplicht

Uitgeschakelde selectielijst

Selectielijst met voorgeselecteerde optie

Meerdere opties selecteren

Toelichting:

Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele voorbeelden:

Windows: Houd de ctrl-knop ingedrukt en selecteer met de muis de gewenste opties.
Mac: Houd de cmd-knop ingedrukt en selecteer met de muis de gewenste opties.

Gegroepeerde opties

Html-voorbeeld:

							
<form action="" method="post">
	<label for="ro-select">Selectielijst</label>
	<div class="ro-select">
		<select id="ro-select" name="ro-select">
			<option value="1">Optie 1</option>
			<option value="2">Optie 2</option>
			<option value="3">Optie 3</option>
		</select>
	</div>

	<label for="ro-select-required">Verplichte selectielijst</label>
	<span class="nota-bene">Dit veld is verplicht</span>
	<div class="ro-select">
		<select
			id="ro-select-required" name="ro-select-required" required >
			<option value="">--Please choose an option--</option>
			<option value="1">Optie 1</option>
			<option value="2">Optie 2</option>
			<option value="3">Optie 3</option>
		</select>
	</div>

	<label for="ro-select-disabled">Uitgeschakelde selectielijst</label>
	<div class="ro-select">
		<select
			disabled id="ro-select-disabled" name="ro-select-disabled">
			<option value="1">Optie 1</option>
			<option value="2">Optie 2</option>
			<option value="3">Optie 3</option>
		</select>
	</div>

	<label for="ro-select-selected">Selectielijst met voorgeselecteerde optie</label>
	<div class="ro-select">
		<select id="ro-select-selected" name="ro-select-selected">
			<option value="1">Optie 1</option>
			<option value="3">Optie 2</option>
			<option value="2" selected>Voorgeselecteerd</option>
		</select>
	</div>

	<label for="select-mulitple-size">Meerdere opties selecteren</label>
	<div class="explanation" role="group" id="select-multiple-size-3-message">
		<span>Toelichting:</span>
		<p>Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele voorbeelden:</p>
		<ul>
			<li>Windows: Houd de <code>ctrl</code>-knop ingedrukt en selecteer met de muis de gewenste opties.</li>
			<li>Mac: Houd de <code>cmd</code>-knop ingedrukt en selecteer met de muis de gewenste opties.</li>
		</ul>
	</div>

	<div class="ro-select">
		<select
			id="select-mulitple-size"
			name="select-mulitple-size"
			multiple size="3"
			aria-describedby="select-multiple-size-3-message">
			<option value="1">Optie 1</option>
			<option value="2">Optie 2</option>
			<option value="3">Optie 3</option>
			<option value="4">Optie 4</option>
			<option value="5">Optie 5</option>
			<option value="6">Optie 6</option>
		</select>
	</div>

	<label for="select-optgroup">Gegroepeerde opties</label>
	<div class="ro-select">
		<select
			id="select-optgroup"
			name="select-optgroup"
			aria-describedby="select-multiple-size-3-message">
			<optgroup label="Rollende objecten">
				<option value="Bal">Bal</option>
				<option value="Wiel">Wiel</option>
				<option value="Knikker">Knikker</option>
			</optgroup>

			<optgroup label="Slecht rollende objecten">
				<option value="Aambeeld">Aambeeld</option>
				<option value="Eiffeltoren">Eiffeltoren</option>
				<option value="Dinosaurus">Dinosaurus</option>
			</optgroup>
		</select>
	</div>

	<button type="submit">Verzend</button>
</form>

Voorbeeld weergave in kolommen

Visueel voorbeeld:

Selectielijst

Verplichte selectielijst

Dit veld is verplicht

Uitgeschakelde selectielijst

Selectielijst met voorgeselecteerde optie

Meerdere opties selecteren

Toelichting:

Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele voorbeelden:

Windows: Houd de ctrl-knop ingedrukt en selecteer met de muis de gewenste opties.
Mac: Houd de cmd-knop ingedrukt en selecteer met de muis de gewenste opties.

Gegroepeerde opties

Html-voorbeeld:

							
<form action="" method="post" class="horizontal-view">
	<div>
		<label for="ro-select">Selectielijst</label>
		<div class="ro-select">
			<select id="ro-select" name="ro-select">
				<option value="1">Optie 1</option>
				<option value="2">Optie 2</option>
				<option value="3">Optie 3</option>
			</select>
		</div>
	</div>

	<div>
		<label for="ro-select-required">Verplichte selectielijst</label>
		<div class="required">
			<span class="nota-bene">Dit veld is verplicht</span>
			<div class="ro-select">
				<select id="ro-select-required" name="ro-select-required" required>
					<option value="">--Please choose an option--</option>
					<option value="1">Optie 1</option>
					<option value="2">Optie 2</option>
					<option value="3">Optie 3</option>
				</select>
			</div>
		</div>
	</div>

	<div>
		<label for="ro-select-disabled">Uitgeschakelde selectielijst</label>
		<div class="ro-select">
			<select disabled id="ro-select-disabled" name="ro-select-disabled">
				<option value="1">Optie 1</option>
				<option value="2">Optie 2</option>
				<option value="3">Optie 3</option>
			</select>
		</div>
	</div>

	<div>
		<label for="ro-select-selected">Selectielijst met voorgeselecteerde optie</label>
		<div class="ro-select">
			<select id="ro-select-selected" name="ro-select-selected">
				<option value="1">Optie 1</option>
				<option value="3">Optie 2</option>
				<option value="2" selected>Voorgeselecteerd</option>
			</select>
		</div>
	</div>

	<div>
		<label for="select-mulitple-size">Meerdere opties selecteren</label>
		<div>
			<div class="explanation" role="group" id="select-multiple-size-4-message">
				<span>Toelichting:</span>
				<p>Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele voorbeelden:</p>
				<ul>
					<li>Windows: Houd de <code>ctrl</code>-knop ingedrukt en selecteer met de muis de gewenste opties.</li>
					<li>Mac: Houd de <code>cmd</code>-knop ingedrukt en selecteer met de muis de gewenste opties.</li>
				</ul>
			</div>

			<div class="ro-select">
				<select
					id="select-mulitple-size"
					name="select-mulitple-size"
					multiple size="3"
					aria-describedby="select-multiple-size-4-message">
					<option value="1">Optie 1</option>
					<option value="2">Optie 2</option>
					<option value="3">Optie 3</option>
					<option value="4">Optie 4</option>
					<option value="5">Optie 5</option>
					<option value="6">Optie 6</option>
				</select>
			</div>
		</div>
	</div>

	<div>
		<label for="select-optgroup">Gegroepeerde opties</label>
		<div class="ro-select">
			<select
				id="select-optgroup"
				name="select-optgroup"
				aria-describedby="select-multiple-size-4-message">
				<optgroup label="Rollende objecten">
					<option value="Bal">Bal</option>
					<option value="Wiel">Wiel</option>
					<option value="Knikker">Knikker</option>
				</optgroup>

				<optgroup label="Slecht rollende objecten">
					<option value="Aambeeld">Aambeeld</option>
					<option value="Eiffeltoren">Eiffeltoren</option>
					<option value="Dinosaurus">Dinosaurus</option>
				</optgroup>
			</select>
		</div>
	</div>

	<button type="submit">Verzend</button>
</form>

Terug naar het hoofdmenu