Formulieren Op deze pagina staan alle verschillende formuliercombinaties. Beschikbare tests: Datumvelden 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 Annuleren 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 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 Lorem ipsum dolor set amet Lorem ipsum dolor set amet Lorem ipsum dolor set amet Lorem ipsum dolor set amet Lorem ipsum dolor set amet Lorem ipsum dolor set amet Foutmelding Lorem ipsum Dit veld is verplicht 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 Optie 1 Optie 2 Optie 3 Verplichte selectielijst Dit veld is verplicht --Please choose an option-- Optie 1 Optie 2 Optie 3 Uitgeschakelde selectielijst Optie 1 Optie 2 Optie 3 Selectielijst met voorgeselecteerde optie Optie 1 Optie 2 Voorgeselecteerd Selectielijst met foutmelding Foutmelding: Lorem ipsum dolor set amet Optie 1 Optie 2 Optie 3 Selectielijst met toelichting Toelichting: Lorem ipsum dolor set amet Optie 1 Optie 2 Optie 3 Selectielijst met waarschuwing Waarschuwing: Lorem ipsum dolor set amet Optie 1 Optie 2 Optie 3 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. Optie 1 Optie 2 Optie 3 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. Optie 1 Optie 2 Optie 3 Optie 4 Optie 5 Optie 6 Gegroepeerde opties Bal Wiel Knikker Aambeeld Eiffeltoren Dinosaurus Link within form test Button 1 Button 2 Gegroepeerde knoppen test Button 1 Button 2 Verzend 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 Annuleren 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 Optie 1 Optie 2 Optie 3 Single select Dit veld is verplicht --Please choose an option-- Optie 1 Optie 2 Optie 3 Disabled single select Optie 1 Optie 2 Optie 3 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. Optie 1 Optie 2 Optie 3 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. Optie 1 Optie 2 Optie 3 Optie 4 Optie 5 Optie 6 Gegroepeerde opties Bal Wiel Knikker Aambeeld Eiffeltoren Dinosaurus Input with link Link within form test Test button Link within form test Button 1 Button 2 Gegroepeerde knoppen test Button 1 Button 2 Verzend 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 Reset 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 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 Optie 1 Optie 2 Optie 3 Verplichte selectielijst Dit veld is verplicht --Please choose an option-- Optie 1 Optie 2 Optie 3 Uitgeschakelde selectielijst Optie 1 Optie 2 Optie 3 Selectielijst met voorgeselecteerde optie Optie 1 Optie 2 Voorgeselecteerd Gegroepeerde opties Bal Wiel Knikker Aambeeld Eiffeltoren Dinosaurus Test button Link within form test Button 1 Button 2 Gegroepeerde knoppen test Button 1 Button 2 Verzend 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 Reset 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 1 Optie 2 Optie 2 Optie 3 Optie 3 Checkbox label test met een lange naam. Lorem ipsum dolor set amet 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 Optie 1 Optie 2 Optie 3 Single select Dit veld is verplicht --Please choose an option-- Optie 1 Optie 2 Optie 3 Disabled single select Optie 1 Optie 2 Optie 3 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. Optie 1 Optie 2 Optie 3 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. Optie 1 Optie 2 Optie 3 Optie 4 Optie 5 Optie 6 Gegroepeerde opties Bal Wiel Knikker Aambeeld Eiffeltoren Dinosaurus Links and buttons Input with link Link within form test Test button Button 1 Button 2 Gegroepeerde knoppen test Verzend 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 Optie 1 Optie 2 Optie 3 Verplichte selectielijst Dit veld is verplicht --Please choose an option-- Optie 1 Optie 2 Optie 3 Uitgeschakelde selectielijst Optie 1 Optie 2 Optie 3 Selectielijst met voorgeselecteerde optie Optie 1 Optie 2 Voorgeselecteerd 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. Optie 1 Optie 2 Optie 3 Optie 4 Optie 5 Optie 6 Gegroepeerde opties Bal Wiel Knikker Aambeeld Eiffeltoren Dinosaurus Verzend Alternatieve weergave select in kolommen Selectielijst Optie 1 Optie 2 Optie 3 Verplichte selectielijst Dit veld is verplicht --Please choose an option-- Optie 1 Optie 2 Optie 3 Uitgeschakelde selectielijst Optie 1 Optie 2 Optie 3 Selectielijst met voorgeselecteerde optie Optie 1 Optie 2 Voorgeselecteerd 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. Optie 1 Optie 2 Optie 3 Optie 4 Optie 5 Optie 6 Gegroepeerde opties Bal Wiel Knikker Aambeeld Eiffeltoren Dinosaurus Verzend 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. Optie 1 Optie 2 Optie 3 Voorbeeld select met ingeklapte toelichting Optie 1 Optie 2 Optie 3 Toelichting: Lorem ipsum dolor set amet. Voorbeeld select (alternatieve weergave) met reguliere toelichting Toelichting: Lorem ipsum dolor set amet. Optie 1 Optie 2 Optie 3 Voorbeeld select (alternatieve weergave) met ingeklapte toelichting Optie 1 Optie 2 Optie 3 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. Verzend 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. Optie 1 Optie 2 Optie 3 Voorbeeld selectielijst met ingeklapte toelichting Optie 1 Optie 2 Optie 3 Toelichting: Lorem ipsum dolor set amet. Voorbeeld selectielijst (alternatieve weergave) met reguliere toelichting Toelichting: Lorem ipsum dolor set amet. Optie 1 Optie 2 Optie 3 Voorbeeld selectielijst (alternatieve weergave) met ingeklapte toelichting Optie 1 Optie 2 Optie 3 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. Annuleer Verzend Formulier binnen Hero-sectie Lorem ipsum dolor set Lorem ipsum Dolor sit amet Consectetur Zoeken Formulier op een regel Haal gegevens op Gegroepeerde knoppen Button Link button in inline Formulier binnen tabellen Tabelvoorbeeld met selectievak: Table header heading Action Ipsum Tabelvoorbeeld met gegroepeerde elementen: Lorem Table header heading Action Lorem Ipsum Home Terug naar het hoofdmenu
Formulier binnen tabellen Tabelvoorbeeld met selectievak: Table header heading Action Ipsum Tabelvoorbeeld met gegroepeerde elementen: Lorem Table header heading Action Lorem Ipsum Home