Voorbeeld login-pagina
Voorbeeld van een mogelijke opzet voor een login-pagina.
Aandachtspunten:
- Dit voorbeeld maakt gebruik van de onderstaande elementen. Zie de detail-pagina's voor meer informatie:
Voorbeelden:
Visueel voorbeeld:
Rijksoverheid
Log in
html-voorbeeld:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Lorem ipsum</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="static/css/style.css" rel="stylesheet">
<link href="static/img/favicon.ico" rel="shortcut icon">
<script defer src="static/js/sidemenu.js"></script>
</head>
<header>
<a href="#main-content" class="button focus-only">Ga direct naar inhoud</a>
<a href="" class="ro-logo">
<img src="static/img/ro-logo.svg" alt="Logo Rijksoverheid">
Rijksoverheid
</a>
<nav aria-label="Hoofdnavigatie">
<div>
<ul>
<li ><a href="" aria-current="page">Hoofdpagina</a></li>
<li><a href="">Ipsum</a></li>
<li><a href="">Dolor</a></li>
</ul>
</div>
</nav>
</header>
<main id="main-content" tabindex="-1">
<section class="layout-authentication">
<div>
<h1>Log in</h1>
<form class="help">
<fieldset>
<legend>Login-gegevens:</legend>
<label for="username">Gebruikersnaam</label>
<div>
<input
id="username"
name="username"
placeholder="Gebruikersnaam"
type="text">
</div>
<label for="password">Wachtwoord</label>
<div>
<input
id="password"
name="achtwoord"
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
placeholder="wachtwoord"
type="text"
aria-describedby="password-message">
<p
class="explanation"
data-open-label="Toelichting bij het veld: Voorbeeld text input"
data-close-label="Sluit toelichting bij het veld: Voorbeeld text input"
id="password-message"
><span>Toelichting:</span> Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, 1 kleineletter en 1 cijfer.</p>
</div>
</fieldset>
<button type="submit">Inloggen</button>
</form>
</div>
</section>
</main>
<footer>
<div>
<span>De Rijksoverheid. Voor Nederland</span>
</div>
</footer>
</html>