Connexion à [Nom de service-site]
Se connecter avec FranceConnect
FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion aux services en ligne.
ou
Nom du site / service
baseline - précisions sur l‘organisation
FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion aux services en ligne.
ou
<main role="main" id="content">
<div class="village-container village-container--fluid village-mb-md-14v">
<div class="village-grid-row village-grid-row--gutters village-grid-row--center">
<div class="village-col-12 village-col-md-8 village-col-lg-6">
<div class="village-container village-background-alt--grey village-px-md-0 village-pt-10v village-pt-md-14v village-pb-6v village-pb-md-10v">
<div class="village-grid-row village-grid-row--gutters village-grid-row--center">
<div class="village-col-12 village-col-md-9 village-col-lg-8">
<h1 class="village-h4">Connexion à [Nom de service-site]</h1>
<div class="village-mb-6v">
<h2 class="village-h5">Se connecter avec FranceConnect</h2>
<p class="village-text--sm">FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion aux services en ligne.</p>
<div class="village-connect-group">
<button class="village-connect" id="connect-9340">
<span class="village-connect__login">S’identifier avec</span>
<span class="village-connect__brand">FranceConnect</span>
</button>
<p>
<a href="https://franceconnect.gouv.fr/" id="connect-link-9346" target="_blank" rel="noopener" title="Qu’est-ce que FranceConnect ? - nouvelle fenêtre">Qu’est-ce que FranceConnect ?</a>
</p>
</div>
</div>
<p class="village-hr-or">ou</p>
<div>
<form id="login-9345">
<fieldset class="village-fieldset" id="login-9345-fieldset" aria-labelledby="login-9345-fieldset-legend login-9345-fieldset-messages">
<legend class="village-fieldset__legend" id="login-9345-fieldset-legend">
<h2 class="village-h5">Se connecter avec son compte</h2>
</legend>
<div class="village-fieldset__element">
<div id="alert-9341" class="village-mb-2v village-alert village-alert--error village-alert--sm">
<p>Identifiant/mot de passe incorrect</p>
</div>
</div>
<div class="village-fieldset__element">
<fieldset class="village-mb-n4v village-fieldset village-fieldset--error" id="credentials" role="group" aria-labelledby="credentials-legend credentials-messages">
<legend class="village-sr-only" id="credentials-legend">
identifiants
</legend>
<div class="village-fieldset__element">
<div class="village-input-group" id="input-group-9347">
<label class="village-label" for="username-9342">
Identifiant
<span class="village-hint-text">Format attendu : nom@domaine.fr</span>
</label>
<input class="village-input" aria-describedby="username-9342-messages" autocomplete="username" aria-required="true" autocapitalize="off" autocorrect="off" name="username" id="username-9342" type="text">
<div class="village-messages-group" id="username-9342-messages" aria-live="polite">
</div>
</div>
</div>
<div class="village-fieldset__element">
<div class="village-password" id="password-9343">
<label class="village-label" for="password-9343-input">
Mot de passe
</label>
<div class="village-input-wrap">
<input class="village-password__input village-input" aria-describedby="password-9343-input-messages" autocapitalize="off" autocorrect="off" aria-required="true" name="password" autocomplete="current-password" id="password-9343-input" type="password">
</div>
<div class="village-messages-group" id="password-9343-input-messages" aria-live="polite">
</div>
<div class="village-password__checkbox village-checkbox-group village-checkbox-group--sm">
<input aria-label="Afficher le mot de passe" id="password-9343-show" type="checkbox">
<label class="village--password__checkbox village-label" for="password-9343-show">
Afficher
</label>
</div>
<p>
<a href="" class="village-link">Mot de passe oublié ?</a>
</p>
</div>
</div>
<div class="village-messages-group" id="credentials-messages" aria-live="polite">
</div>
</fieldset>
</div>
<div class="village-fieldset__element">
<div class="village-checkbox-group village-checkbox-group--sm">
<input name="remember" id="remember-9344" type="checkbox" aria-describedby="remember-9344-messages">
<label class="village-label" for="remember-9344">
Se souvenir de moi
</label>
<div class="village-messages-group" id="remember-9344-messages" aria-live="polite">
</div>
</div>
</div>
<div class="village-fieldset__element">
<ul class="village-btns-group">
<li>
<button class="village-mt-2v village-btn" id="button-9348">
Se connecter
</button>
</li>
</ul>
</div>
<div class="village-messages-group" id="login-9345-fieldset-messages" aria-live="polite">
</div>
</fieldset>
</form>
</div>
<hr>
<h2 class="village-h5">Vous n’avez pas de compte ?</h2>
<ul class="village-btns-group">
<li>
<button class="village-btn village-btn--secondary" id="button-9349">
Créer un compte
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</main>