Labels en Veldgroepering: De Basis van Duidelijke Formulieren
Ontdek hoe je labels correct plaatst en velden logisch groepeert zodat gebruikers jouw formulier sneller invullen.
Postcode, Huisnummer en Telefoon: Nederlandse Invoerconventies
Nederlandse adressen hebben hun eigen patroon. We laten zien hoe je deze velden correct formatteert en valideert, inclusief mobiele toetsenbordoptimalisatie.
Waarom adresvelden lastig zijn
Veel webwinkels en diensten slaan het af. Ze kopiëren gewoon een internationaal formulier en hopen het werkt. Maar Nederlandse adressen zijn anders. We hebben postcodes met letters en nummers, huisnummers die soms heel lang zijn, en telefoonnummers met eigen conventies.
Het gaat niet alleen om validatie. Het gaat om gebruikerservaring. Als je iemand vraagt “postcode en huisnummer”, moet je weten hoe Nederlanders dit typen. Wat betekent “toevoeging”? Hoe ziet een geldig Nederlands mobiel nummer eruit? We’ve tested dit met honderden gebruikers — en de fouten zijn systematisch.
Het postcode veld: 4 nummers + 2 letters
Nederlandse postcodes volgen een vast patroon. Altijd vier cijfers, dan twee letters. Dus 1234 AB, niet 1234AB en niet 1234 A B. Het eerste getal mag nooit 0 zijn.
Juist: 1011 PA, 9711 DH, 3571 RD
Fout: 01011 PA, 1011PA, 1011 p a
In je formulier moet je dit veld dus beperken tot 6 karakters. Minstens 4 nummers, daarna 2 letters. Best zet je meteen een voorbeeld neer: “bijv. 1234 AB”. Don’t make users guess.
Op mobiel: zet het toetsenbord op “numeric” totdat ze de eerste 4 getallen hebben ingetypt. Dan switch je naar het normale toetsenbord voor de letters. Dit heet “inputmode”. Je schrijft het zo in HTML:
inputmode="numeric"
en later wissel je naar
inputmode="text"
na input. Of beter: gebruik een masked input library die dit voor je doet.
Huisnummer + toevoeging: twee aparte velden
Dit is waar veel formulieren fout gaan. Ze zetten postcode en huisnummer in één veld. Fout. Ze zetten huisnummer en toevoeging in één veld. Ook fout.
Hier’s het patroon: Een huisnummer kan zijn “1”, “123”, of “1-A” (met koppelteken). Een toevoeging kan zijn “A”, “I”, of “1A”. Het verschil? Huisnummer is verplicht. Toevoeging is optioneel. Ze’re separate.
Beste structuur:
Veld 1: “Huisnummer” (verplicht, max 5 karakters)
Veld 2: “Toevoeging” (optioneel, max 3 karakters)
Veel bedrijven proberen dit in één veld te doen. Dan zeggen ze “bijv. 123 A”. Gebruikers typen “123A” en je validatie breekt. Of erger: je accepteert het, maar je database slaat het verkeerd op. Scheiding is cleaner. Helpt ook bij adresvalidatie APIs — die hebben postcodehuisnummer en toevoeging meestal als aparte parameters.
Gerelateerde artikelen
Telefoonnummers: mobiel vs vast
Nederlandse nummers hebben formats. Mobiel begint met 06. Vast begint meestal met 0 gevolgd door regionaal netnummer (01, 02, 010, 020, etc.). Alle nummers hebben tien cijfers.
In formulieren zeg je niet “telefoon”, zeg je “Mobiel” of “Telefoonnummer”. Why? Omdat veel bedrijven beide willen, maar mobiel is meestal verplicht. Zet ze in aparte velden als beide nodig zijn.
Wat je moet weten:
- Valideer dat het 10 cijfers is (geen spaties of streepjes in je validatie — strip ze eruit)
-
Op mobiel: gebruik
inputmode="tel"zodat gebruikers het numpad krijgen - Sta alle formaten toe: 0612345678, 06 12 34 56 78, 06-12-34-56-78. Strip alles en valideer
- Internationale nummers? Zet ze in een ander veld. Het is lastig genoeg met Nederlands
Mobiele toetsenbordoptimalisatie
Dit is waar veel designers het missen. Je inputmode bepaalt welk toetsenbord verschijnt. Voor postcode en huisnummer wil je numeric. Voor telefoonnummer wil je tel (anders kunnen gebruikers geen plus-teken invoeren voor internationale nummers — hoewel je dat waarschijnlijk toch niet wilt).
Hier’s het verschil:
inputmode="numeric"
geeft alleen nummers (0-9).
inputmode="tel"
geeft nummers plus +, -, *, #. Voor Nederlandse nummers zonder plus? Numeric is fijn, maar tel is ook okee.
Test dit zelf. Open een site op je telefoon. Zie je het toetsenbord? Goed. Ziet het er logisch uit? Nog beter. Moeten gebruikers switchen tussen numpad en letters? Slecht. Dat’s waar je moet optimaliseren. Gebruik masked input fields (libraries als IMask of InputMask) die de formattering for je doen. Gebruiker voelt alleen getallen in, maar het wordt automatisch opgemaakt als je wilt.
Praktische implementatie: de stappenplan
1
Zet drie aparte velden neer
Postcode (verplicht), Huisnummer (verplicht), Toevoeging (optioneel). Niet één veld. Drie.
2
Zet de juiste inputmode neer
Postcode: numeric (4 digits, dan tekst). Huisnummer: numeric. Toevoeging: text.
3
Valideer aan de kant van de client
JavaScript checks de patronen realtime. Postcode: 4 nummers + 2 letters, eerste nummer niet 0. Huisnummer: 1-5 karakters, nummers optioneel met letter.
4
Valideer ook aan de server
Never trust client-side validation. Server must check everything again. Plus: call an address validation API (like 4Postcode.nl) to verify the address exists.
5
Zet duidelijke foutmeldingen neer
Niet “Invalid format”. Zeg “Postcode moet 4 nummers + 2 letters zijn, bijv. 1234 AB”.
Samengevat: wat je onthoudt
Nederlandse adressen aren’t complicated. Ze’re just different. Postcode is altijd 4 nummers + 2 letters. Huisnummer en toevoeging zijn apart. Telefoon is 10 cijfers. Op mobiel gebruik je het juiste toetsenbord (numeric, tel). Valideer beide kanten. En zeg users exact wat je wilt.
Do this right, en je conversion rate goes up. Users don’t get frustrated. Adressen worden correct opgeslagen. Everybody wins. It’s not rocket science — it’s just paying attention to the local details.
Disclaimer
Dit artikel is informationeel. Hoewel we gestreefd hebben naar accuratesse, kunnen adresformaten en validatieregels veranderen. Voor productie-implementaties raden we aan een gevalideerde address API te gebruiken (zoals PostcodeAPI, 4Postcode.nl, of Google Places). Dit artikel geeft algemene richtlijnen — jouw specifieke requirements kunnen verschillen. Test altijd grondige met echte gebruikers voordat je live gaat.