Een inlogformulier maken dat de best practices volgt

Gebruik browserfuncties voor meerdere platforms om inlogformulieren te maken die beveiligd, toegankelijk en gebruiksvriendelijk zijn.

Als gebruikers ooit moeten inloggen op je site, is een goed ontwerp van het inlogformulier essentieel. Dit geldt vooral voor mensen met een slechte verbinding, op mobiel, die haast hebben of gestrest zijn. Slecht ontworpen inlogformulieren hebben hoge bouncepercentages. Elke bounce kan een verloren klant en een ontevreden gebruiker betekenen, niet alleen een gemiste inlogmogelijkheid.

Hoe wordt dit geïmplementeerd

Hieronder staan de belangrijkste richtlijnen voor het maken van succesvolle inlogformulieren.

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, autocomplete en inputmode

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.

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.

Invoer van gebruikersnaam en e-mailadres bevat ID's, geen tekst. Voeg spellcheck="false" toe zodat de browser deze niet herschrijft naar iets dat niet overeenkomt met het account. autocorrect en autocapitalize staan altijd uit voor input type="email", maar zijn vereist voor gebruikersnamen die geen e-mailadres zijn.

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 een duidelijk, herkenbaar label. Gebruik bijvoorbeeld Inloggen in plaats van Doorgaan of Indienen.

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.

Inlogvoortgang tonen

Gebruik voor elke stap van het inlogproces paginakoppen en beschrijvende knopwaarden die duidelijk maken wat er nu moet worden gedaan en wat de volgende stap is.

Gebruik het kenmerk enterkeyhint voor formulierinvoer om het label van de Enter-toets op het mobiele toetsenbord in te stellen. Gebruik bijvoorbeeld enterkeyhint="previous" en enterkeyhint="next" in een formulier met meerdere pagina's, enterkeyhint="done" voor de laatste invoer in het formulier en enterkeyhint="search" voor een zoekinvoer.

Zorgen dat gebruikers inloggegevens niet opnieuw hoeven in te voeren

Zorg dat u de juiste autocomplete-waarden toevoegt aan inlogformulieren.

Zo kunnen browsers gebruikers helpen door inloggegevens beveiligd op te slaan en formuliergegevens correct in te vullen. Zonder automatisch aanvullen is de kans groter dat gebruikers hun inloggegevens fysiek bewaren of onveilig opslaan op hun apparaat.

Valideer zorgvuldig

Valideer gegevensinvoer zowel in realtime als voordat het formulier wordt ingediend. Gebruik type="email" voor e-mailinvoer. De browser valideert de indeling automatisch. Voeg het kenmerk required toe aan verplichte velden om te voorkomen dat er lege formulieren worden ingediend.

Plaats de inlogfunctie in een eigen <form>-element

Gebruik altijd het element <form> als je gebruikers gegevens laat invoeren.

Plaats invoer niet in een <div> en verwerk de invoergegevens alleen met JavaScript. Het is over het algemeen beter om een <form>-element te gebruiken. Hierdoor is je site toegankelijk voor schermlezers en andere ondersteunende apparaten, worden verschillende ingebouwde browserfuncties mogelijk, wordt het makkelijker om een eenvoudige functionele inlogfunctie te maken voor oudere browsers en kan de site nog steeds werken als JavaScript mislukt.

Gebruik geen dubbele invoer

Sommige sites dwingen gebruikers om e-mailadressen of wachtwoorden 2 keer in te voeren. Dit kan het aantal fouten voor een paar gebruikers verminderen, maar zorgt voor extra werk voor alle gebruikers en verhoogt het beëindigingspercentage. Het is ook niet logisch om 2 keer om een wachtwoord te vragen als browsers e-mailadressen automatisch invullen of sterke wachtwoorden voorstellen. Het is beter om gebruikers hun e-mailadres te laten bevestigen (dat moet je sowieso doen) en het ze makkelijk te maken hun wachtwoord te resetten als dat nodig is.

Wachtwoorden privé houden, maar gebruikers de mogelijkheid geven ze te bekijken als ze dat willen

Wachtwoordinvoer moet type="password" hebben om de wachtwoordtekst te verbergen en de browser te laten weten dat de invoer voor wachtwoorden is. (Browsers gebruiken verschillende technieken om invoerrollen te begrijpen en te beslissen of ze aanbieden om wachtwoorden op te slaan.)

Voeg een schakelaar Wachtwoord tonen toe zodat gebruikers de tekst kunnen controleren die ze hebben ingevoerd. Vergeet ook niet een link Wachtwoord vergeten toe te voegen.

Geef mobiele gebruikers het juiste toetsenbord

Gebruik <input type="email"> om mobiele gebruikers een geschikt toetsenbord te geven en eenvoudige ingebouwde e-mailadresvalidatie door de browser aan te zetten. Er is geen JavaScript vereist.

Als je een telefoonnummer moet gebruiken in plaats van een e-mailadres, zet <input type="tel"> een telefoontoetsenblok aan op mobiele apparaten. Je kunt ook het kenmerk inputmode gebruiken waar nodig: inputmode="numeric" is ideaal voor pincodes.

Voorkomen dat het mobiele toetsenbord de knop Inloggen blokkeert

Als je niet oppast, kunnen mobiele toetsenborden je formulier bedekken of, erger nog, de knop Inloggen gedeeltelijk blokkeren. Gebruikers geven misschien op voordat ze beseffen wat er is gebeurd.

Vermijd dit waar mogelijk door alleen de invoervelden voor e-mailadres (of telefoonnummer) en wachtwoord en de knop Inloggen bovenaan de inlogpagina te tonen. Plaats andere content eronder.

Gebruikers helpen te voorkomen dat ze gegevens opnieuw moeten invoeren

Je kunt browsers helpen gegevens correct op te slaan en invoer automatisch in te vullen, zodat gebruikers niet hoeven te onthouden dat ze e-mail- en wachtwoordwaarden moeten invoeren. Dit is vooral belangrijk op mobiele apparaten en cruciaal voor e-mailinvoer, die hoge beëindigingspercentages heeft. Dit bestaat uit 2 delen:

1. Met de kenmerken autocomplete, name, id en type begrijpen browsers de rol van invoer beter, zodat ze gegevens kunnen opslaan die later kunnen worden gebruikt voor automatisch invullen. Als je wilt dat gegevens worden opgeslagen voor automatisch invullen, vereisen moderne browsers ook dat invoer een stabiele name- of id-waarde heeft (niet willekeurig gegenereerd bij elke keer dat de pagina wordt geladen of de site wordt geïmplementeerd) en dat deze zich in een <form>-element met een submit-knop bevindt.
2. Met het kenmerk autocomplete kunnen browsers invoer automatisch invullen met opgeslagen gegevens.

Gebruik voor e-mailinvoer autocomplete="username", omdat username wordt herkend door wachtwoordmanagers in moderne browsers, ook al moet je type="email" gebruiken en wil je misschien id="email" en name="email" gebruiken. Gebruik voor wachtwoordinvoer de juiste autocomplete-waarde, zodat browsers onderscheid kunnen maken tussen nieuwe en huidige wachtwoorden.

Gebruik autocomplete="current-password" voor een bestaand wachtwoord

VERPLICHT: Gebruik autocomplete="current-password" voor de wachtwoordinvoer in een inlogformulier. Hiermee geef je aan de browser door dat je het huidige wachtwoord wilt gebruiken dat de browser voor de site heeft opgeslagen.

Voor een inlogformulier:

<input type="password" autocomplete="current-password" id="current-password" …>

De browser toestaan een sterk wachtwoord voor te stellen

Moderne browsers gebruiken heuristiek om te bepalen wanneer de UI van de wachtwoordmanager moet worden getoond en een sterk wachtwoord moet worden voorgesteld.

Dankzij ingebouwde wachtwoordgenerators in browsers hoeven gebruikers en ontwikkelaars niet te bedenken wat een sterk wachtwoord is. Omdat browsers wachtwoorden beveiligd kunnen opslaan en ze automatisch kunnen invullen als dat nodig is, hoeven gebruikers geen wachtwoorden te onthouden of in te voeren. Als je gebruikers aanmoedigt om de ingebouwde wachtwoordgenerators van browsers te gebruiken, is de kans groter dat ze een uniek, sterk wachtwoord op je site gebruiken en is de kans kleiner dat ze een wachtwoord hergebruiken dat ergens anders kan worden gehackt.

Voorkomen dat gebruikers per ongeluk invoer missen

VERPLICHT: Voeg het kenmerk required toe aan de velden voor e-mailadres en wachtwoord. Moderne browsers vragen automatisch om ontbrekende gegevens en stellen de focus daarop in.

<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>

Plakken van wachtwoorden toestaan

Sommige sites staan niet toe dat tekst in wachtwoordinvoervelden wordt geplakt.

Als je het plakken van wachtwoorden niet toestaat, irriteer je gebruikers en moedig je ze aan om wachtwoorden te gebruiken die makkelijk te onthouden zijn (en dus makkelijker te kraken zijn). Volgens organisaties zoals het National Cyber Security Centre in het Verenigd Koninkrijk kan dit de beveiliging zelfs verminderen. Gebruikers merken pas dat plakken niet is toegestaan nadat ze hebben geprobeerd hun wachtwoord te plakken. Als je het plakken van wachtwoorden niet toestaat, voorkom je dus geen kwetsbaarheden op het klembord.

Reservestrategieën

Automatisch invullen is een progressive enhancement. In browsers die automatisch invullen niet ondersteunen, moeten gebruikers hun inloggegevens handmatig invoeren. De semantische HTML-beperkingen (zoals type, inputmode en required) werken nog steeds naar behoren om gebruikersinvoer te valideren en de juiste virtuele toetsenborden te bieden.