Maak een formulier waarmee gebruikers zo makkelijk mogelijk adresgegevens kunnen invoeren op desktops en mobiele apparaten. Zorg dat het formulier optimaal gebruikmaakt van ingebouwde browserfuncties voor automatisch invullen, validatie en beperkingen voor gegevensinvoer.
Hoe wordt dit geïmplementeerd
Hieronder staan de belangrijkste richtlijnen voor het maken van goede adresformulieren.
Gebruik betekenisvolle, geldige HTML
Maak optimaal gebruik van de elementen en kenmerken die zijn ontworpen om formulieren te maken:
<form>,<input>,<label>en<button>type,autocompleteeninputmode
Deze maken ingebouwde browserfunctionaliteit mogelijk, verbeteren de toegankelijkheid en voegen betekenis toe aan de opmaak.
Gebruik het element <label> om formuliervelden te labelen voor gegevensinvoer
Gebruik een <label> om een <input>, <select> of <textarea> te labelen. Koppel een label aan een invoer door het kenmerk for van het label dezelfde waarde te geven als de id van de invoer.
HTML-kenmerken optimaal gebruiken
Maak het gebruikers makkelijk om gegevens in te voeren door het juiste kenmerk <type> van het element <input> te gebruiken om het juiste toetsenbord op mobiele apparaten te bieden en eenvoudige ingebouwde validatie door de browser mogelijk te maken.
Gebruik altijd type="email" voor e-mailadressen en type="tel" voor telefoonnummers.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Elk <input>-, <select>- en <textarea>-element MOET een geschikt autocomplete-kenmerk hebben om de toegankelijkheid te verbeteren en te voorkomen dat gebruikers gegevens opnieuw moeten invoeren.
Knoppen nuttig maken
Gebruik <button> voor knoppen. Je kunt ook <input type="submit"> gebruiken, maar gebruik geen div of een ander willekeurig element dat als knop fungeert. Knopelementen bieden toegankelijk gedrag, ingebouwde functionaliteit voor het indienen van formulieren en kunnen makkelijk worden opgemaakt.
Geef elke verzendknop van een formulier een waarde die aangeeft wat de knop doet. Gebruik voor elke stap naar de betaling een beschrijvende call-to-action die de voortgang toont en de volgende stap duidelijk maakt. Label de verzendknop op uw formulier voor het bezorgadres bijvoorbeeld met Doorgaan naar betaling in plaats van Doorgaan of Opslaan.
Gebruik waar mogelijk één invoerveld voor de naam
Sta je gebruikers toe hun naam in te voeren via één invoerveld, tenzij je een goede reden hebt om voornamen, achternamen, titels of andere naamdelen afzonderlijk op te slaan. Als je één invoerveld voor de naam gebruikt, zijn formulieren minder complex, kun je knippen en plakken en is automatisch invullen makkelijker.
Internationale namen toestaan. Gebruik voor validatie geen reguliere expressies die alleen overeenkomen met Latijnse tekens. Alleen Latijns sluit gebruikers uit met namen of adressen die tekens bevatten die niet in het Latijnse alfabet voorkomen. Sta in plaats daarvan Unicode-letterovereenkomsten toe en zorg dat je backend Unicode beveiligd ondersteunt als zowel invoer als uitvoer. Unicode in reguliere expressies wordt goed ondersteund door moderne browsers.
Sta verschillende adresindelingen toe
Houd er bij het maken van een adresformulier rekening mee dat er verschillende adresnotaties zijn, zelfs binnen één land. Doe geen aannames over 'normale' adressen.
Gebruik indien mogelijk één <textarea>-element voor het adres.
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
Dit is de meest flexibele optie voor verschillende lokale en internationale adresnotaties.
Als je datamodel afzonderlijke adresregels vereist, gebruik je één <input> per regel met de tokens address-line1, address-line2 (en, indien nodig, address-line3) autocomplete, zodat automatisch invullen nog steeds werkt. Splits het adres niet op in invoervelden zonder deze tokens en maak alleen de eerste regel verplicht.
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
Voorkomen dat gebruikers per ongeluk gegevensvelden missen
Voeg het kenmerk required toe aan verplichte velden.
<input type="text" id="city" name="city" autocomplete="address-level2" required>
Reservestrategieën
Automatisch invullen is een progressive enhancement. In browsers die automatisch invullen niet ondersteunen, moeten gebruikers hun adresgegevens handmatig invoeren. De semantische HTML-beperkingen (zoals type, inputmode en required) werken nog steeds naar behoren als standaard formuliervalidatie.