Pour commencer

Accédez aux outils et aux éléments de base qui permettent de concevoir et de mettre au point des expériences cohérentes et accessibles.

Développer Conception

Formulaire de connexion

Comment créer un formulaire de connexion.

Conseils

Utilisez ce formulaire de connexion lorsque les utilisateurs doivent se connecter à un compte.

À faire

  • Toujours fournir un lien d'oubli le mot de passe
  • Si les utilisateurs se connectent avec un nom d'utilisateur, fournir toujours un lien d'oubli de nom d'utilisateur

À ne pas faire

  • Si les utilisateurs se connectent en utilisant leur adresse courriel, ne pas étiqueter le champ "nom d'utilisateur"

Connectez-vous à votre compte

Si vous n'en avez pas encore, vous pouvez créer un compte.

Rester connecté

HTML

	<h2>Connectez-vous à votre compte</h2>
	<p>
		Si vous n'en avez pas encore, vous pouvez <a href="#">créer un compte</a>.
	</p>
	<div class="row">
		<div class="col col-lg-6">
			<form>
				<label for="email">Adresse courriel</label>
				<input type="email" id="email" name="email" placeholder="email@exemple.com">
	
				<label for="password">Mot de passe</label>
				<input type="password" id="password" name="password">
	
				<fieldset class="gnb-checkboxes">
					<legend class="visually-hidden">Rester connecté</legend>
					<div class="pair">
						<input type="checkbox" name="default" id="default">
						<label for="default">Se souvenir de moi</label>
					</div>
				</fieldset>
	
				<button type="submit" class="btn-primary">Se connecter</button>
			</form>
			<hr />
			<ul>
				<li><a href="#">Mot de passe oublié ?</a></li>
			</ul>
		</div>
	</div>