Automatisch invullen in je aanvraagformulier controleren

Je controleert drie dingen: komt de juiste waarde in het juiste veld, wordt die waarde door je eigen validatie aanvaard, en blijft voor de bezoeker duidelijk wat er gevraagd wordt. Je test niet of een bepaalde browser autofill aanbiedt. Dat hangt af van instellingen en opgeslagen gegevens die jij niet beheert. Autofill is een gemak en geen garantie, dus je formulier moet ook zonder werken.

Als vertrekpunt bevat de cursus over formulieren van web.dev een onderdeel over autofill en het autocomplete-attribuut, naast onderdelen over testen en toegankelijkheid. De samenvatting die wij hier gebruiken noemt dat onderdeel, maar geeft niet de volledige lijst toegelaten waarden. Lees die dus na in de actuele HTML-documentatie voordat je waarden invoert of aanpast.

Maak een apart browserprofiel aan, los van je dagelijkse profiel, en sla daar uitsluitend fictieve gegevens in op: voornaam, achternaam, een reserveadres zoals test@example.be, straat met huisnummer, postcode, gemeente en land. Gebruik nooit echte klantgegevens.

Kies bewust gegevens die vaak misgaan: een samengestelde achternaam, een huisnummer met "bus", een postcode van vier cijfers en een gemeente met accent of koppelteken. Test minstens twee browsers, op desktop en op een smartphone. Test daarnaast één keer zonder autofill, zodat je ziet dat de handmatige route volledig werkt.

1. Open het formulier in het testprofiel en inspecteer per veld het type-attribuut, de naam, de id, de autocomplete-waarde en het gekoppelde label.
2. Controleer dat elk veld een zichtbaar label heeft dat aan het veld gekoppeld is, en niet alleen een placeholder die verdwijnt zodra je typt.
3. Controleer de veldtypes: een e-mailveld als type email, een telefoonveld als type tel, vrije tekst als text. Gebruik geen type number voor postcode of telefoon, want voorloopnullen en een plusteken kunnen dan sneuvelen.
4. Controleer dat de autocomplete-waarde past bij wat je echt vraagt. Vraag je het gegeven van een collega of contactpersoon, dan hoort het veld niet de gegevens van de bezoeker zelf te claimen.
5. Laat de browser autofill uitvoeren en noteer per veld: juist ingevuld, leeg of verkeerd.
6. Verstuur het formulier en controleer of je eigen validatie de waarden aanvaardt en of de ontvangen aanvraag (mail of CRM) dezelfde waarden bevat.
7. Herhaal op mobiel en in een tweede browser en vergelijk de noteringen.

Ingevulde waarden lopen door dezelfde validatie als getypte waarden. De MDN-uitleg over formuliervalidatie beschrijft validatie aan de clientzijde als een eerste controle waarmee bezoekers fouten meteen kunnen herstellen. Dezelfde bron benadrukt dat controle op de server nodig blijft, omdat clientvalidatie makkelijk te omzeilen is. Voor jouw test betekent dat: een geweigerde autofill-waarde is vaak een te strenge regel, maar een aanvaarde waarde bewijst niet dat de server ze ook correct verwerkt.

Voor labels en formuleropbouw is er de W3C-handleiding over toegankelijke formulieren. Die raadt aan elk veld met een label te benoemen, gerelateerde velden te groeperen en enkel te vragen wat nodig is om de aanvraag af te handelen. De bron gaat niet over autofill; onze redactionele aanname is dat elk extra veld ook een extra plek is waar autofill kan mislopen, wat je met je eigen test kunt nagaan. Schrap daarom velden die jouw opvolging niet gebruikt, en controleer of verborgen of extra velden niet onbedoeld gevuld worden.

Test na elke aanpassing opnieuw met hetzelfde testprofiel, zodat je vergelijkt wat vergelijkbaar is. Geef de ontwikkelaar of beheerder een overdracht die uit invoer en verwachte controles bestaat. Een fictief voorbeeld:

• Invoer: voornaam "Test", achternaam "Voorbeeld-Janssens", e-mail test@example.be, straat "Teststraat 12 bus 3", postcode 9000, gemeente "Gent".
• Verwacht: elke waarde staat in het veld met dezelfde betekenis, het busnummer wordt aanvaard, de postcode blijft vier cijfers, de foutmelding verschijnt enkel bij een echt ongeldige waarde.
• Vastleggen: welke browsers en apparaten je testte, welke velden afweken en welke wijziging je doorvoerde.

Wil je daarnaast zien welke publieke signalen je website rond formulieren en opvolging toont, dan kun je die bekijken via Marketing Scan. Een publieke scan beoordeelt alleen wat zichtbaar is en vervangt je eigen test met autofill niet.