Formulieren

Op deze pagina staan alle verschillende formuliercombinaties.

Beschikbare tests:

Formulier zonder kolommen

Toelichting: Lorem ipsum dolor set amet

Waarschuwing: Lorem ipsum dolor set amet

Foutmelding: Lorem ipsum dolor set amet

Bevestiging: Lorem ipsum dolor set amet

Toelichting:

Lorem ipsum dolor set amet

Waarschuwing:

Lorem ipsum dolor set amet

Foutmelding:

Lorem ipsum dolor set amet

Consectetur adepicing elit.

Bevestiging:

Lorem ipsum dolor set amet

Loren ipsum dolor set amet
Loren ipsum dolor set amet

Voorbeeld text input Voorbeeld e-mailadres Voorbeeld Telefoonnummer Voorbeeld tekstveld Veld met actieknop Dit veld is verplicht

Lorem ipsum dolor set amet

Checkbox label test met een lange naam. Lorem ipsum dolor set amet

Lorem ipsum dolor set amet

Dit veld is verplicht

verplicht selectievak

Lorem ipsum dolor set amet

Foutmelding Lorem ipsum

Dit veld is verplicht

Lorem ipsum dolor set amet

Foutmelding Lorem ipsum

Examples

Lorem ipsum dolor set amet

Foutmelding Lorem ipsum

Dit veld is verplicht

Uitgeschakeld keuzevak

Lorem ipsum

Optie 1

Optie 2

Optie 3

Radio label test met een lange naam. Lorem ipsum dolor set amet

Radio label met error

Foutmelding: Lorem ipsum

Selecteer de gewenste kleur

Voorbeeld invoerveld foutmelding

Foutmelding: Lorem ipsum dolor set amet

Voorbeeld invoerveld toelichting

Toelichting: Lorem ipsum dolor set amet

Voorbeeld invoerveld waarschuwing

Waarschuwing: Lorem ipsum dolor set amet

Voorbeeld tekstveld foutmelding

Foutmelding: Lorem ipsum dolor set amet

Voorbeeld tekstveld toelichting

Toelichting: Lorem ipsum dolor set amet

Voorbeeld tekstveld waarschuwing

Waarschuwing: Lorem ipsum dolor set amet

Selectielijst Verplichte selectielijst Dit veld is verplicht Uitgeschakelde selectielijst Selectielijst met voorgeselecteerde optie Selectielijst met foutmelding

Foutmelding: Lorem ipsum dolor set amet

Selectielijst met toelichting

Toelichting: Lorem ipsum dolor set amet

Selectielijst met waarschuwing

Waarschuwing: Lorem ipsum dolor set amet

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.

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 Link within form test

Gegroepeerde knoppen test

Formulier met kolommen

Toelichting: Lorem ipsum dolor set amet

Waarschuwing: Lorem ipsum dolor set amet

Foutmelding: Lorem ipsum dolor set amet

Bevestiging: Lorem ipsum dolor set amet

Toelichting:

Lorem ipsum dolor set amet

Waarschuwing:

Lorem ipsum dolor set amet

Foutmelding:

Lorem ipsum dolor set amet

Consectetur adepicing elit.

Bevestiging:

Lorem ipsum dolor set amet

Loren ipsum dolor set amet
Loren ipsum dolor set amet

Voorbeeld text input

Voorbeeld e-mailadres

Voorbeeld telefoonnummer

Voorbeeld tekstveld

Gebruikersnaam

Dit veld is verplicht

Voorbeeld inputveld met knop

Dit veld is verplicht

Lorem ipsum dolor set amet

Checkbox label test met een lange naam. Lorem ipsum dolor set amet

Lorem ipsum dolor set amet

Dit veld is verplicht

verplicht selectievak

Uitgeschakeld selectievak

Lorem ipsum

Optie 1

Optie 2

Optie 3

Checkbox label test met een lange naam. Lorem ipsum dolor set amet

Lijst met fieldset

Optie 1

Optie 2

Optie 3

Checkbox label test met een lange naam. Lorem ipsum dolor set amet

Lorem ipsum dolor set amet

Dit veld is verplicht

verplicht keuzeveld

Uitgeschakeld keuzevak

Lijst met fieldset

Optie 1

Optie 2

Optie 3

Radio label test met een lange naam. Lorem ipsum dolor set amet

Selecteer de gewenste kleur

Gebruikersnaam

Wachtwoord

Voorbeeld text input

Voorbeeld invoerveld foutmelding

Foutmelding: Lorem ipsum dolor set amet

Voorbeeld invoerveld waarschuwing

Waarschuwing: Lorem ipsum

Voorbeeld invoerveld toelichting

Toelichting: Lorem ipsum

Lorem ipsum dolor set amet

Foutmelding: Lorem ipsum dolor set amet

Dit veld is verplicht

verplicht selectievak

Foutmelding: Lorem ipsum dolor set amet

Voorbeeld text input

Toelichting: Lorem ipsum dolor set amet.

Single select

Dit veld is verplicht

Disabled single select

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.

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

Input with link

Link within form test

Gegroepeerde knoppen test

Fieldset

Toelichting: Lorem ipsum dolor set amet

Waarschuwing: Lorem ipsum dolor set amet

Foutmelding: Lorem ipsum dolor set amet

Bevestiging: Lorem ipsum dolor set amet

Toelichting:

Lorem ipsum dolor set amet

Waarschuwing:

Lorem ipsum dolor set amet

Foutmelding:

Lorem ipsum dolor set amet

Consectetur adepicing elit.

Bevestiging:

Lorem ipsum dolor set amet

Loren ipsum dolor set amet
Loren ipsum dolor set amet

Invoervelden Text input E-mailadres Telefoonnummer tekstveld

Voorbeeld invoerveld met knop Voorbeeld input met knop Dit veld is verplicht

Selectievak

selecievak

Checkbox label test met een lange naam. Lorem ipsum dolor set amet

Geselecteerd selectievak

Dit veld is verplicht

verplicht selectievak

Uitgeschakeld selectievak

Selectievak opties kolommen

Optie 1

Optie 2

Optie 3

Checkbox label test met een lange naam. Lorem ipsum dolor set amet

Radio buttons

Lorem ipsum dolor set amet

Dit veld is verplicht Dit veld is verplicht

Uitgeschakeld keuzevak

Radio selectielijst Lorem ipsum

Optie 1

Optie 2

Optie 3

Radio label test met een lange naam. Lorem ipsum dolor set amet

Kleurselectie

Selecteer de gewenste kleur

Meldingen Voorbeeld invoerveld foutmelding

Foutmelding: Lorem ipsum dolor set amet

Voorbeeld invoerveld toelichting

Toelichting: Lorem ipsum dolor set amet

Voorbeeld invoerveld waarschuwing

Waarschuwing: Lorem ipsum dolor set amet

Selectielijst Selectielijst Verplichte selectielijst Dit veld is verplicht Uitgeschakelde selectielijst Selectielijst met voorgeselecteerde optie Gegroepeerde opties

Link within form test

Gegroepeerde knoppen test

Fieldset weergave in kolommen

Toelichting: Lorem ipsum dolor set amet

Waarschuwing: Lorem ipsum dolor set amet

Foutmelding: Lorem ipsum dolor set amet

Bevestiging: Lorem ipsum dolor set amet

Toelichting:

Lorem ipsum dolor set amet

Waarschuwing:

Lorem ipsum dolor set amet

Foutmelding:

Lorem ipsum dolor set amet

Consectetur adepicing elit.

Bevestiging:

Lorem ipsum dolor set amet

Loren ipsum dolor set amet
Loren ipsum dolor set amet

Voorbeeld invoervelden

Voorbeeld text input

Voorbeeld e-mailadres

Voorbeeld telefoonnummer

Voorbeeld tekstveld

Gebruikersnaam

Dit veld is verplicht

Nested fieldset test

Gebruikersnaam

Dit veld is verplicht

Nested fieldset

Gebruikersnaam

Dit veld is verplicht

Voorbeeld invoerveld met knop

Voorbeeld input met knop

Checkboxes

Lorem ipsum dolor set amet

Checkbox label test met een lange naam. Lorem ipsum dolor set amet

Lorem ipsum dolor set amet

Dit veld is verplicht

verplicht selectievak

Uitgeschakeld selectievak

Selectievaklijst

Optie 1

Optie 2

Optie 3

Checkbox label test met een lange naam. Lorem ipsum dolor set amet

Radio selectieknoppen

Radio buttons

Lorem ipsum dolor set amet

Dit veld is verplicht

verplicht keuzeveld

Uitgeschakeld keuzevak

Radio selectielijst

Optie 1

Optie 2

Optie 3

Radio label test met een lange naam. Lorem ipsum dolor set amet

Kleur selectieveld

Selecteer de gewenste kleur

Velden met validatie

Gebruikersnaam

Toelichting: Gebruikersnaam mag alleen alfanumerieke tekens (letters A-Z, cijfers 0-9) bevatten, met uitzondering van onderstrepingstekens.

Wachtwoord

Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, 1 kleineletter en 1 cijfer.

Voorbeeld text input

Meldingen

Voorbeeld invoerveld foutmelding

Foutmelding: Lorem ipsum dolor set amet

Voorbeeld invoerveld waarschuwing

Waarschuwing: Lorem ipsum dolor set amet

Voorbeeld invoerveld toelichting

Toelichting: Lorem ipsum dolor set amet

Lorem ipsum dolor set amet

Foutmelding: Lorem ipsum dolor set amet

Dit veld is verplicht

verplicht selectievak

Foutmelding: Lorem ipsum dolor set amet

Select

Single select

Dit veld is verplicht

Disabled single select

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.

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

Links and buttons

Input with link

Link within form test

Gegroepeerde knoppen test

Gegroepeerde radioknoppen en selectievakken

Multiple choice radioknoppen en selectievakken test Dit veld is verplicht

Optie 1

Optie 2

Optie 3

Lorem ipsum

Optie 1

Optie 2

Optie 3

Nested example

Lorem ipsum

Optie 1

Optie 2

Optie 3

Lorem ipsum

Optie 1

Optie 2

Optie 3

Gegroepeerde radioknoppen en selectievakken

Multiple choice radioknoppen en selectievakken test kolommen

Dit veld is verplicht

Enkele optie

Dit veld is verplicht

Optie 1

Optie 2

Optie 3

Optie 1

Optie 2

Optie 3

With grouped-choice-list class

Optie 1

Optie 2

Optie 3

Nested example

Lorem ipsum

Optie 1

Optie 2

Optie 3

With grouped-choice-list class

Optie 1

Optie 2

Optie 3

Lorem ipsum

Optie 1

Optie 2

Optie 3

With grouped-choice-list class

Optie 1

Optie 2

Optie 3

Alternatieve weergave select

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

Alternatieve weergave select in kolommen

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

Formulier met ingeklapte hulpteksten

Toelichting: Lorem ipsum dolor set amet

Waarschuwing: Lorem ipsum dolor set amet

Foutmelding: Lorem ipsum dolor set amet

Bevestiging: Lorem ipsum dolor set amet

Toelichting:

Lorem ipsum dolor set amet

Waarschuwing:

Lorem ipsum dolor set amet

Foutmelding:

Lorem ipsum dolor set amet

Consectetur adepicing elit.

Bevestiging:

Lorem ipsum dolor set amet

Loren ipsum dolor set amet
Loren ipsum dolor set amet

Voorbeeld text input Voorbeeld tekstveld

Checkbox label test met een lange naam. Lorem ipsum dolor set amet.

Voorbeeld invoerveld foutmelding

Foutmelding: Lorem ipsum dolor set amet

Voorbeeld invoerveld met reguliere toelichting

Toelichting: Lorem ipsum dolor set amet.

Voorbeeld invoerveld waarschuwing

Waarschuwing: Lorem ipsum dolor set amet

Voorbeeld tekstveld met reguliere toelichting

Toelichting: Lorem ipsum dolor set amet.

Voorbeeld invoerveld met ingeklapte toelichting

Lorem ipsum dolor set amet.

Voorbeeld tekstveld met reguliere toelichting

Toelichting: Lorem ipsum dolor set amet.

Voorbeeld select met reguliere toelichting

Toelichting: Lorem ipsum dolor set amet.

Voorbeeld select met ingeklapte toelichting

Toelichting: Lorem ipsum dolor set amet.

Voorbeeld select (alternatieve weergave) met reguliere toelichting

Toelichting: Lorem ipsum dolor set amet.

Voorbeeld select (alternatieve weergave) met ingeklapte toelichting

Toelichting: Lorem ipsum dolor set amet.

Radio-selectielijst met reguliere toelichting

Toelichting: Lorem ipsum dolor set amet.

Optie 1

Optie 2

Radio-selectielijst met ingeklapte toelichting

Optie 1

Optie 2

Toelichting: Lorem ipsum dolor set amet.

Radio-selectielijst met ingeklapte toelichtingen bij individuele inputs

Optie 1

Lorem ipsum dolor set amet.

Optie 2

Toelichting: Lorem ipsum dolor set amet.

Formulier met ingeklapte hulpteksten in kolommen

Toelichting: Lorem ipsum dolor set amet

Waarschuwing: Lorem ipsum dolor set amet

Foutmelding: Lorem ipsum dolor set amet

Bevestiging: Lorem ipsum dolor set amet

Toelichting:

Lorem ipsum dolor set amet

Waarschuwing:

Lorem ipsum dolor set amet

Foutmelding:

Lorem ipsum dolor set amet

Consectetur adepicing elit.

Bevestiging:

Lorem ipsum dolor set amet

Loren ipsum dolor set amet
Loren ipsum dolor set amet

Voorbeeld text input

Voorbeeld tekstveld

Checkbox label test met een lange naam. Lorem ipsum dolor set amet.

Voorbeeld invoerveld foutmelding

Foutmelding: Lorem ipsum dolor set amet

Voorbeeld invoerveld met reguliere toelichting

Toelichting: Lorem ipsum dolor set amet.

Voorbeeld invoerveld waarschuwing

Waarschuwing: Lorem ipsum dolor set amet

Voorbeeld tekstveld met reguliere toelichting

Toelichting: Lorem ipsum dolor set amet.

Voorbeeld invoerveld met ingeklapte toelichting

Toelichting: Lorem ipsum dolor set amet.

Voorbeeld tekstveld met reguliere toelichting

Toelichting: Lorem ipsum dolor set amet.

Voorbeeld selectielijst met reguliere toelichting

Toelichting: Lorem ipsum dolor set amet.

Voorbeeld selectielijst met ingeklapte toelichting

Toelichting: Lorem ipsum dolor set amet.

Voorbeeld selectielijst (alternatieve weergave) met reguliere toelichting

Toelichting: Lorem ipsum dolor set amet.

Voorbeeld selectielijst (alternatieve weergave) met ingeklapte toelichting

Lorem ipsum dolor set amet.

Radio-selectielijst met reguliere toelichting

Toelichting: Lorem ipsum dolor set amet.

Optie 1

Optie 2

Radio-selectielijst met ingeklapte toelichting

Optie 1

Optie 2

Toelichting:

Lorem ipsum dolor set amet.

Radio-selectielijst met ingeklapte toelichtingen bij individuele inputs

Optie 1

Toelichting: Lorem ipsum dolor set amet.

Optie 2

Toelichting: Lorem ipsum dolor set amet.

Formulier binnen Hero-sectie

Lorem ipsum dolor set

Formulier op een regel

Gegroepeerde knoppen

Link

Formulier binnen tabellen

Tabelvoorbeeld met selectievak:
	Table header heading	Action
	Ipsum

Tabelvoorbeeld met gegroepeerde elementen:
Lorem	Table header heading	Action
Lorem	Ipsum