Conseils
Ce formulaire est destiné aux applications ou sites web où les utilisateurs doivent créer un compte.
À faire
- Toujours montrer aux utilisateurs les exigences du mot de passe
- Demander uniquement les informations nécessaires
À ne pas faire
- Si l'courriel sert de nom d'utilisateur, toujours étiqueter le champ email (sur le formulaire de création de compte et de connexion) pour éviter la confusion
- Utiliser des formulaires de création de compte pour recueillir des données supplémentaires sur vos utilisateurs
Vous aurez besoin de gnb-password-validation-1.0.0.js pour afficher la validation du mot de passe en ligne.
Créez votre compte
HTML
<h2 class="margin-bottom-md">Créez votre compte</h2>
<div class="row">
<div class="col-sm-8 col-md-6">
<form>
<label for="first-name">Prénom</label>
<input type="text" id="first-name" name="first-name" />
<label for="last-name">Nom de famille</label>
<input type="text" id="last-name" name="last-name" />
<label for="email">Courriel</label>
<input type="email" id="email" name="email" />
<label for="gnb-validate-password">Mot de passe</label>
<input type="password" id="gnb-validate-password" name="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Doit contenir au moins un chiffre et une lettre majuscule et minuscule, et au moins 8 caractères ou plus"
required>
<div class="gnb-form-helper-text" id="message">
<p>Votre mot de passe doit contenir :</p>
<ul class="icon-list list-md">
<li id="number" class="dont">un chiffre</li>
<li id="capital" class="dont">une lettre majuscule</li>
<li id="length" class="dont">au moins 8 caractères</li>
</ul>
</div>
<fieldset class="gnb-checkboxes fieldset-container">
<legend class="sr-only">Consentement opt-in</legend>
<div class="single-option">
<input type="checkbox" name="accept" id="accept-terms">
<label for="accept-terms">J'accepte et je suis d'accord avec les conditions d'utilisation.</label>
</div>
</fieldset>
<button type="submit" class="btn-primary">Créer un compte</button>
</form>
</div>
</div>