Formulaire de connexion et d'inscription en écran partagé (HTML, CSS et JS)

10 0 Icônes sociales appbudu Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Formulaire de connexion et d'inscription en écran partagé (HTML, CSS et JS)

Recommandé

31 October 2025

Portfolio de développeur : Services de conception et de développement web

31 August 2026

Mario Builder 64

14 October 2023

Mini-jeu de mémoire

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>saber – Connexion</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="shell">
  <aside class="side">
    <p class="brand">saber</p>
    <p class="pitch">Un seul compte pour tout retrouver, où que vous soyez.</p>
  </aside>
  <main class="main">
    <div class="tabs" id="tabs" role="tablist">
      <button type="button" id="tab-login" role="tab" aria-selected="true">Connexion</button>
      <button type="button" id="tab-register" role="tab" aria-selected="false">Créer un compte</button>
    </div>

<section id="view-login">
      <h1>Connexion</h1>
      <p class="sub">Content de vous revoir.</p>
      <form id="login-form" novalidate>
        <label for="l-email">E-mail</label>
        <input id="l-email" type="email" autocomplete="email">
        <span class="error" id="l-email-err"></span>
        <label for="l-password">Mot de passe</label>
        <div class="pw"><input id="l-password" type="password" autocomplete="current-password"><button type="button">Afficher</button></div>
        <span class="error" id="l-password-err"></span>
        <button type="submit">Se connecter</button>
        <p id="l-msg" class="msg" role="alert"></p>
      </form>
    </section>

<section id="view-register" hidden>
      <h1>Créer un compte</h1>
      <p class="sub">Inscrivez-vous en quelques secondes.</p>
      <form id="register-form" novalidate>
        <label for="r-nom">Nom</label>
        <input id="r-nom" type="text" autocomplete="name">
        <span class="error" id="r-nom-err"></span>
        <label for="r-email">E-mail</label>
        <input id="r-email" type="email" autocomplete="email">
        <span class="error" id="r-email-err"></span>
        <label for="r-password">Mot de passe</label>
        <div class="pw"><input id="r-password" type="password" autocomplete="new-password"><button type="button">Afficher</button></div>
        <span class="error" id="r-password-err"></span>
        <label for="r-password2">Confirmer le mot de passe</label>
        <input id="r-password2" type="password" autocomplete="new-password">
        <span class="error" id="r-password2-err"></span>
        <button type="submit">Créer mon compte</button>
        <p id="r-msg" class="msg" role="alert"></p>
      </form>
    </section>

<section id="view-home" hidden>
      <h1 id="welcome">Bonjour !</h1>
      <p class="sub">Connecté avec <strong id="user-email"></strong>.</p>
      <button id="logout" type="button">Se déconnecter</button>
    </section>
  </main>
</div>
<script src="script.js"></script>
</body>
</html>

CSS

:root{--ink:#1b1530;--plum:#3a2a6b;--lilac:#f3f0fa;--coral:#ff5d73;--coral-d:#e0435b;--muted:#6f6888;--line:#cfc8e4;--err:#c0213a}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--lilac);color:var(--ink);font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif}
.shell{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:880px;min-height:560px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 20px 50px rgba(58,42,107,.18)}
.side{position:relative;padding:44px 38px;background:var(--plum);color:#fff;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.side::before,.side::after{content:"";position:absolute;border-radius:50%}
.side::before{width:260px;height:260px;right:-90px;bottom:-70px;background:var(--coral);opacity:.9}
.side::after{width:150px;height:150px;right:70px;bottom:120px;border:22px solid rgba(255,255,255,.14)}
.brand{margin:0;font-size:2.6rem;font-weight:800;letter-spacing:-1px}
.pitch{position:relative;z-index:1;max-width:260px;font-size:1.15rem;line-height:1.5}
.main{padding:44px 42px;display:flex;flex-direction:column;justify-content:center}
.tabs{display:flex;gap:24px;margin-bottom:26px}
.tabs button{width:auto;margin:0;padding:0 0 6px;background:none;border:0;border-bottom:3px solid transparent;border-radius:0;color:var(--muted);font-size:1rem;font-weight:700;cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--coral)}
.tabs button:hover{background:none;color:var(--ink)}
h1{margin:0 0 4px;font-size:1.7rem}
.sub{margin:0 0 6px;color:var(--muted)}
label{display:block;margin:16px 0 2px;font-size:.85rem;font-weight:700;color:var(--plum)}
input{width:100%;padding:9px 2px;border:0;border-bottom:2px solid var(--line);border-radius:0;font-size:1rem;color:var(--ink);background:transparent}
input:focus{outline:0;border-bottom-color:var(--coral)}
input.invalid{border-bottom-color:var(--err)}
button:focus-visible{outline:3px solid #b9a8f0;outline-offset:2px}
.error{display:block;min-height:1.1em;margin-top:3px;color:var(--err);font-size:.8rem}
.msg{margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:.9rem;display:none}
.msg.err{display:block;background:#fde8ec;color:var(--err)}
.msg.ok{display:block;background:#e9e4f8;color:var(--plum)}
form>button[type=submit],#logout{width:100%;margin-top:22px;padding:13px;border:0;border-radius:999px;background:var(--coral);color:#fff;font-size:1rem;font-weight:700;cursor:pointer}
form>button[type=submit]:hover,#logout:hover{background:var(--coral-d)}
.pw{position:relative}
.pw button{position:absolute;right:0;top:6px;width:auto;margin:0;padding:4px 8px;border:0;border-radius:6px;background:none;color:var(--plum);font-size:.8rem;font-weight:700;cursor:pointer}
.pw button:hover{background:var(--lilac)}
[hidden]{display:none!important}
@media(max-width:700px){.shell{grid-template-columns:1fr}.side{padding:26px;min-height:150px}.side::before{width:150px;height:150px}.side::after{display:none}.brand{font-size:2rem}.pitch{font-size:1rem}.main{padding:30px 24px}}

function show(view){
  ['login','register','home'].forEach(v=>$('#view-'+v).hidden=v!==view);
  $('#tabs').hidden=view==='home';
  $('#tab-login').setAttribute('aria-selected',view==='login');
  $('#tab-register').setAttribute('aria-selected',view==='register');
  if(view==='home'){const s=read('session');$('#welcome').textContent='Bonjour '+s.nom+' !';$('#user-email').textContent=s.email}
}
$('#tab-login').onclick=()=>show('login');
$('#tab-register').onclick=()=>show('register');

document.querySelectorAll('.pw button').forEach(b=>b.addEventListener('click',()=>{
  const i=b.parentElement.querySelector('input');
  i.type=i.type==='password'?'text':'password';
  b.textContent=i.type==='password'?'Afficher':'Masquer';
}));

$('#register-form').addEventListener('submit',async e=>{
  e.preventDefault();
  const nom=$('#r-nom').value.trim(),email=$('#r-email').value.trim().toLowerCase();
  const pw=$('#r-password').value,pw2=$('#r-password2').value;
  const ok=[
    setErr('r-nom',nom.length<2?'Entrez votre nom (2 caractères minimum).':''),
    setErr('r-email',emailOk(email)?'':'Entrez une adresse e-mail valide.'),
    setErr('r-password',pw.length<8?'8 caractères minimum.':''),
    setErr('r-password2',pw!==pw2?'Les mots de passe ne correspondent pas.':'')
  ].every(Boolean);
  if(!ok)return;
  const users=read('users')||[];
  if(users.some(u=>u.email===email))return banner('r-msg','Un compte existe déjà avec cet e-mail. Connectez-vous.','err');
  users.push({nom,email,hash:await hash(pw)});
  write('users',users);
  e.target.reset();
  $('#l-email').value=email;
  show('login');
  banner('l-msg','Compte créé. Vous pouvez vous connecter.','ok');
});

$('#login-form').addEventListener('submit',async e=>{
  e.preventDefault();
  const email=$('#l-email').value.trim().toLowerCase(),pw=$('#l-password').value;
  const ok=[setErr('l-email',emailOk(email)?'':'Entrez une adresse e-mail valide.'),
            setErr('l-password',pw?'':'Entrez votre mot de passe.')].every(Boolean);
  if(!ok)return;
  const user=(read('users')||[]).find(u=>u.email===email);
  if(!user||user.hash!==await hash(pw))return banner('l-msg','E-mail ou mot de passe incorrect.','err');
  write('session',{nom:user.nom,email:user.email});
  e.target.reset();$('#l-msg').className='msg';
  show('home');
});

$('#logout').onclick=()=>{localStorage.removeItem('session');show('login')};
show(read('session')?'home':'login');

Comments 0

…