Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
Chapô — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.
Étape suivante : Renseigner une identité
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="fr-container fr-mt-8v fr-mt-md-14v fr-mb-2v fr-mb-md-8v">
<div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<h1 class="fr-h2">Création de compte sur [Nom de service-site]</h1>
<p class="fr-text--lead">Chapô — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p>
</div>
</div>
</div>
<div class="fr-container fr-container--fluid fr-mb-md-14v">
<div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-container fr-background-alt--grey fr-px-md-0 fr-pt-10v fr-pt-md-14v fr-pb-6v fr-pb-md-10v">
<div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-9">
<div class="fr-stepper">
<h2 class="fr-stepper__title">
Choisir un identifiant
<span class="fr-stepper__state">Étape 1 sur 3</span>
</h2>
<div class="fr-stepper__steps" data-fr-current-step="1" data-fr-steps="3"></div>
<p class="fr-stepper__details">
<span class="fr-text--bold">Étape suivante :</span> Renseigner une identité
</p>
</div>
<hr>
<div class="fr-mb-6v">
<h3 class="fr-h5">Se créer un compte avec FranceConnect</h3>
<p class="fr-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="fr-connect-group">
<button class="fr-connect" id="connect-10059">
<span class="fr-connect__login">S’identifier avec</span>
<span class="fr-connect__brand">FranceConnect</span>
</button>
<p>
<a href="https://franceconnect.gouv.fr/" id="connect-link-10068" target="_blank" rel="noopener" title="Qu’est-ce que FranceConnect ? - nouvelle fenêtre">Qu’est-ce que FranceConnect ?</a>
</p>
</div>
</div>
<p class="fr-hr-or">ou</p>
<div>
<form class="fr-mb-0" id="login-10064">
<fieldset class="fr-mb-0 fr-fieldset" id="login-10064-fieldset" aria-labelledby="login-10064-fieldset-legend login-10064-fieldset-messages">
<legend class="fr-fieldset__legend" id="login-10064-fieldset-legend">
<h3 class="fr-h5">Se créer un compte en choisissant un identifiant</h3>
</legend>
<div class="fr-fieldset__element">
<p class="fr-text--sm">Description — Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="fr-fieldset__element">
<p class="fr-hint-text">Sauf mention contraire, tous les champs sont obligatoires.</p>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-10069">
<label class="fr-label" for="username-10060">
Identifiant
<span class="fr-hint-text">Format attendu : nom@domaine.fr</span>
</label>
<input class="fr-input" autocapitalize="off" autocorrect="off" aria-describedby="username-10060-messages" name="username" id="username-10060" type="text">
<div class="fr-messages-group" id="username-10060-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-password" id="password-10061">
<label class="fr-label" for="password-10061-input">
Mot de passe
</label>
<div class="fr-input-wrap">
<input class="fr-password__input fr-input fr-password__input fr-input" autocapitalize="off" autocorrect="off" aria-describedby="password-10061-input-messages" aria-required="true" name="password" autocomplete="new-password" id="password-10061-input" type="password">
</div>
<div class="fr-messages-group" id="password-10061-input-messages" aria-live="polite">
<p class="fr-message" id="password-10061-input-message">Votre mot de passe doit contenir :</p>
<p class="fr-message fr-message--info" id="password-10061-input-message-info">12 caractères minimum</p>
<p class="fr-message fr-message--info" id="password-10061-input-message-info-1">1 caractère spécial minimum</p>
<p class="fr-message fr-message--info" id="password-10061-input-message-info-2">1 chiffre minimum</p>
</div>
<div class="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm">
<input aria-label="Afficher le mot de passe" id="password-10061-show" type="checkbox">
<label class="fr--password__checkbox fr-label" for="password-10061-show">
Afficher
</label>
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="checkbox-cnil" id="checkbox-cnil-10062" type="checkbox" aria-describedby="checkbox-cnil-10062-messages">
<label class="fr-label" for="checkbox-cnil-10062">
Mention CNIL — Lorem ipsum dolor sit amet, consectetur adipicing est
</label>
<div class="fr-messages-group" id="checkbox-cnil-10062-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="checkbox-cnil" id="checkbox-cnil-10063" type="checkbox" aria-describedby="checkbox-cnil-10063-messages">
<label class="fr-label" for="checkbox-cnil-10063">
Mention CNIL — Lorem ipsum dolor sit amet, consectetur adipicing est
</label>
<div class="fr-messages-group" id="checkbox-cnil-10063-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<ul class="fr-mt-2v fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-sm fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-sm">
<li>
<button class="fr-btn" id="button-10070" type="submit">
Valider
</button>
</li>
</ul>
</div>
<div class="fr-messages-group" id="login-10064-fieldset-messages" aria-live="polite">
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>