Auto complete in HTML formulieren: sneller en gebruiksvriendelijker invullen

Inhoudsopgave

Auto complete in HTML formulieren: sneller en gebruiksvriendelijker invullen

Formulieren zijn vaak het punt waarop bezoekers afhaken of juist converteren. Denk aan het invullen van een contactformulier, het plaatsen van een bestelling of het registreren voor een nieuwsbrief. Hoe sneller en eenvoudiger een gebruiker een formulier kan invullen, hoe groter de kans dat hij het ook daadwerkelijk afrondt. Een belangrijk hulpmiddel daarbij is het attribuut autocomplete in HTML. Hiermee geef je de browser aanwijzingen om velden automatisch aan te vullen met eerder ingevoerde gegevens. Dat bespaart tijd en verkleint de kans op fouten. In dit artikel leer je wat autocomplete is, hoe je het correct toepast en hoe je formulieren hierdoor gebruiksvriendelijker en toegankelijker maakt.

Wat is autocomplete?

Autocomplete is een functie waarbij de browser gegevens van de gebruiker onthoudt, zoals naam, adres, e-mailadres en telefoonnummer, en deze automatisch kan invullen in formulieren. Als je in een nieuw formulier dezelfde soort velden tegenkomt, stelt de browser voor om de gegevens automatisch aan te vullen. Dit maakt het invullen veel sneller en minder foutgevoelig.

Waarom is autocomplete belangrijk?

Tijdbesparing: gebruikers hoeven niet steeds dezelfde gegevens opnieuw in te vullen.
Minder fouten: doordat gegevens automatisch worden ingevuld, wordt het risico op tikfouten kleiner.
Hogere conversie: een sneller en makkelijker formulier vergroot de kans dat gebruikers het afronden.
Toegankelijkheid: autocomplete helpt ook mensen met motorische beperkingen of moeite met typen.
Mobiel gebruiksgemak: op kleine schermen is het intypen van gegevens lastiger, dus hier levert autocomplete veel voordeel op.

Hoe werkt autocomplete technisch?

Het attribuut autocomplete kan toegepast worden op een heel formulier of op individuele velden.

Op het formulierniveau:

Op veldniveau:

Browsers herkennen standaardwaarden voor autocomplete, zoals name, email, tel, address-line1, postal-code enzovoort.

Waarden voor autocomplete

Er zijn veel mogelijke waarden voor autocomplete, afhankelijk van welk soort gegevens je wilt verzamelen. Hier volgt een overzicht van de meest gebruikte.

Persoonlijke informatie

name → volledige naam
given-name → voornaam
family-name → achternaam
nickname → bijnaam
email → e-mailadres
username → gebruikersnaam
new-password of current-password → wachtwoorden

Adresgegevens

street-address → volledig adres
address-line1, address-line2, address-line3 → adresregels
postal-code → postcode
country of country-name → land
address-level1 → provincie of staat
address-level2 → plaats of stad

Contactgegevens

tel → telefoonnummer
tel-country-code → landcode
tel-national → nationaal telefoonnummer
organization → bedrijfsnaam

Betaalgegevens

cc-name → naam op de creditcard
cc-number → kaartnummer
cc-exp → verloopdatum
cc-csc → beveiligingscode
cc-type → type kaart (Visa, Mastercard, enz.)

Overige

bday → geboortedatum
bday-day, bday-month, bday-year → afzonderlijke datumonderdelen
sex → geslacht
url → persoonlijke website
language → voorkeurstaal

Voorbeeld van een formulier met autocomplete

Een compleet formulier kan er als volgt uitzien:

<form autocomplete="on">

<label for="voornaam">Voornaam</label>

<input type="text" id="voornaam" name="voornaam" autocomplete="given-name">

<label for=“achternaam”>Achternaam</label>
<input type=“text” id=“achternaam” name=“achternaam” autocomplete=“family-name”>

<label for=“email”>E-mailadres</label>
<input type=“email” id=“email” name=“email” autocomplete=“email”>

<label for=“tel”>Telefoonnummer</label>
<input type=“tel” id=“tel” name=“tel” autocomplete=“tel”>

<label for=“adres”>Straat en huisnummer</label>
<input type=“text” id=“adres” name=“adres” autocomplete=“address-line1”>

<label for=“postcode”>Postcode</label>
<input type=“text” id=“postcode” name=“postcode” autocomplete=“postal-code”>

<label for=“plaats”>Plaats</label>
<input type=“text” id=“plaats” name=“plaats” autocomplete=“address-level2”>

<button type=“submit”>Versturen</button>
</form>

Met deze instellingen kan de browser vrijwel alle velden automatisch invullen op basis van eerder ingevoerde gegevens.

Autocomplete uitschakelen

Soms wil je niet dat de browser gegevens onthoudt. Bijvoorbeeld bij gevoelige velden of unieke eenmalige codes. Dan gebruik je:

Let wel op: het uitschakelen van autocomplete kan de gebruikerservaring negatief beïnvloeden. Gebruik dit dus alleen als het echt nodig is.

Autocomplete en veiligheid

Sommige webbouwers zijn terughoudend met autocomplete omdat het gegevens opslaat in de browser. In de meeste gevallen is dit echter veilig, zolang de website gebruikmaakt van HTTPS. De gegevens worden lokaal in de browser bewaard en niet gedeeld met derden zonder toestemming van de gebruiker.

Voor wachtwoorden gelden aparte instellingen. Bij inlogformulieren is het verstandig autocomplete="current-password" te gebruiken, zodat wachtwoordmanagers correct werken. Voor registratiepagina’s gebruik je autocomplete="new-password".

Toegankelijkheid en autocomplete

Autocomplete helpt niet alleen bij snelheid, maar ook bij toegankelijkheid. Mensen met motorische beperkingen hoeven minder te typen en schermlezers kunnen de velden beter interpreteren omdat ze expliciet aangeven welk type informatie verwacht wordt.

Het gebruik van autocomplete maakt een formulier dus beter bruikbaar voor een breed publiek.

Veelgemaakte fouten bij autocomplete

Het attribuut helemaal weglaten, waardoor browsers moeten gokken wat een veld betekent.
Verkeerde waarden gebruiken, bijvoorbeeld autocomplete="naam" in plaats van given-name.
Autocomplete uitschakelen op onschuldige velden zoals naam en e-mail.
Alleen placeholders gebruiken zonder labels, wat de toegankelijkheid verslechtert.
Wachtwoorden niet goed markeren, waardoor gebruikers problemen krijgen met password managers.

Tips voor optimaal gebruik van autocomplete

Gebruik altijd de juiste autocomplete-waarden uit de standaardlijst.
Zet autocomplete="on" op formulieren tenzij er een goede reden is om dit uit te schakelen.
Combineer autocomplete met duidelijke labels en foutmeldingen.
Test je formulier op verschillende browsers en apparaten.
Controleer hoe wachtwoordmanagers omgaan met je formulier.

Autocomplete in HTML-formulieren is een eenvoudige maar krachtige manier om de gebruiksvriendelijkheid en conversie van je website te verbeteren. Met slechts een paar extra attributen maak je het bezoekers een stuk makkelijker om gegevens in te vullen en vergroot je de kans dat formulieren volledig en foutloos worden verzonden.