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.
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-mb-6v">
<h2 class="fr-h5">Se créer un compte avec FranceConnect</h2>
<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-10261">
<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-10270" 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-10266">
<fieldset class="fr-mb-0 fr-fieldset" id="login-10266-fieldset" aria-labelledby="login-10266-fieldset-legend login-10266-fieldset-messages">
<legend class="fr-fieldset__legend" id="login-10266-fieldset-legend">
<h2 class="fr-h5">Se créer un compte en choisissant un identifiant</h2>
</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-10271">
<label class="fr-label" for="username-10262">
Identifiant
<span class="fr-hint-text">Format attendu : nom@domaine.fr</span>
</label>
<input class="fr-input" autocapitalize="off" autocorrect="off" aria-describedby="username-10262-messages" name="username" id="username-10262" type="text">
<div class="fr-messages-group" id="username-10262-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-password" id="password-10263">
<label class="fr-label" for="password-10263-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-10263-input-messages" aria-required="true" name="password" autocomplete="new-password" id="password-10263-input" type="password">
</div>
<div class="fr-messages-group" id="password-10263-input-messages" aria-live="polite">
<p class="fr-message" id="password-10263-input-message">Votre mot de passe doit contenir :</p>
<p class="fr-message fr-message--info" id="password-10263-input-message-info">12 caractères minimum</p>
<p class="fr-message fr-message--info" id="password-10263-input-message-info-1">1 caractère spécial minimum</p>
<p class="fr-message fr-message--info" id="password-10263-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-10263-show" type="checkbox">
<label class="fr--password__checkbox fr-label" for="password-10263-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-10264" type="checkbox" aria-describedby="checkbox-cnil-10264-messages">
<label class="fr-label" for="checkbox-cnil-10264">
Mention CNIL — Lorem ipsum dolor sit amet, consectetur adipicing est
</label>
<div class="fr-messages-group" id="checkbox-cnil-10264-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-10265" type="checkbox" aria-describedby="checkbox-cnil-10265-messages">
<label class="fr-label" for="checkbox-cnil-10265">
Mention CNIL — Lorem ipsum dolor sit amet, consectetur adipicing est
</label>
<div class="fr-messages-group" id="checkbox-cnil-10265-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 id="button-10272" type="submit" class="fr-btn">Valider</button>
</li>
</ul>
</div>
<div class="fr-messages-group" id="login-10266-fieldset-messages" aria-live="polite">
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>