Modèle HTML/CSS de formulaire de connexion et d'inscription

915 oliaa

Ouvrir dans l'éditeur Video Publiez votre code

Modèle HTML/CSS de formulaire de connexion et d'inscription

Recommandé

16 September 2025

Exemple d'animation de formes CSS

18 December 2025

Code source HTML5 du jeu Bloodmoney

14 October 2023

Formulaire de connexion

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Login / Sign Up</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, sans-serif;
    }
    body {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #1e3c72, #2a5298);
    }

.container {
      width: 360px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 12px 25px rgba(0,0,0,0.25);
      overflow: hidden;
      animation: fadeIn 0.6s ease;
    }

.tabs {
      display: flex;
      cursor: pointer;
    }
    .tabs button {
      flex: 1;
      padding: 14px;
      border: none;
      background: #f0f0f0;
      font-size: 16px;
      font-weight: 600;
      transition: background 0.3s ease;
    }
    .tabs button.active {
      background: #2a5298;
      color: #fff;
    }

.form {
      padding: 24px;
      display: none;
      animation: slide 0.4s ease;
    }
    .form.active { display: block; }

.form h2 {
      margin-bottom: 18px;
      color: #2a5298;
      font-size: 22px;
      text-align: center;
    }

.input-group {
      margin-bottom: 16px;
    }
    .input-group label {
      font-size: 14px;
      color: #333;
      display: block;
      margin-bottom: 6px;
    }
    .input-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #bbb;
      border-radius: 8px;
      font-size: 15px;
    }

.form button {
      width: 100%;
      padding: 12px;
      background: #2a5298;
      color: #fff;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    .form button:hover {
      background: #1e3c72;
    }

.extra {
      margin-top: 12px;
      text-align: center;
      font-size: 13px;
      color: #555;
    }
    .extra a {
      color: #2a5298;
      text-decoration: none;
      font-weight: 500;
    }

@keyframes fadeIn {
      from { opacity: 0; transform: scale(0.9);}
      to { opacity: 1; transform: scale(1);}
    }
    @keyframes slide {
      from { opacity: 0; transform: translateY(12px);}
      to { opacity: 1; transform: translateY(0);}
    }
  </style>
</head>
<body>

<div class="container">
    <div class="tabs">
      <button class="tab active" onclick="showForm('login')">Login</button>
      <button class="tab" onclick="showForm('signup')">Sign Up</button>
    </div>

<form class="form active" id="login">
      <h2>Welcome Back</h2>
      <div class="input-group">
        <label>Email</label>
        <input type="email" placeholder="Enter your email" required>
      </div>
      <div class="input-group">
        <label>Password</label>
        <input type="password" placeholder="Enter your password" required>
      </div>
      <button type="submit">Login</button>
      <div class="extra">
        <a href="#">Forgot Password?</a>
      </div>
    </form>

<form class="form" id="signup">
      <h2>Create Account</h2>
      <div class="input-group">
        <label>Username</label>
        <input type="text" placeholder="Choose a username" required>
      </div>
      <div class="input-group">
        <label>Email</label>
        <input type="email" placeholder="Enter your email" required>
      </div>
      <div class="input-group">
        <label>Password</label>
        <input type="password" placeholder="Create a password" required>
      </div>
      <button type="submit">Sign Up</button>
    </form>
  </div>

document.getElementById(formId).classList.add('active');
    event.target.classList.add('active');
  }
</script>

</body>
</html>

CSS

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Poppins", system-ui, sans-serif;
}

/* Background with gradient + glow */
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  overflow: hidden;
}

/* Decorative glowing orbs */
body::before, body::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
}
body::before {
  width: 400px;
  height: 400px;
  top: -100px;
  left: -100px;
  background: rgba(0, 212, 255, 0.6);
}
body::after {
  width: 400px;
  height: 400px;
  bottom: -120px;
  right: -100px;
  background: rgba(255, 0, 180, 0.5);
}

/* Container (glass effect) */
.container {
  width: 380px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding-bottom: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 1;
  overflow: hidden;
  animation: fadeIn 0.8s ease;
}

/* Tabs */
.tabs {
  display: flex;
}
.tabs button {
  flex: 1;
  padding: 14px;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  transition: all 0.3s ease;
  cursor: pointer;
}
.tabs button.active {
  color: #fff;
  background: linear-gradient(90deg, #00d4ff, #ff00b4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 17px;
}

/* Forms */
.form {
  padding: 24px;
  display: none;
  animation: slide 0.4s ease;
}
.form.active { display: block; }

.form h2 {
  margin-bottom: 18px;
  font-size: 24px;
  text-align: center;
  background: linear-gradient(90deg, #00d4ff, #ff00b4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Input groups */
.input-group {
  margin-bottom: 18px;
}
.input-group label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  display: block;
  margin-bottom: 6px;
}
.input-group input {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  outline: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.input-group input:focus {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
}

/* Buttons */
.form button {
  width: 100%;
  padding: 12px;
  background: linear-gradient(90deg, #00d4ff, #ff00b4);
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.form button:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.7),
              0 0 30px rgba(255, 0, 180, 0.6);
}

/* Extra links */
.extra {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.extra a {
  color: #00d4ff;
  text-decoration: none;
  font-weight: 500;
}
.extra a:hover {
  text-decoration: underline;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9);}
  to { opacity: 1; transform: scale(1);}
}
@keyframes slide {
  from { opacity: 0; transform: translateY(15px);}
  to { opacity: 1; transform: translateY(0);}
}

Recommandé

Exemple d'animation de formes CSS

Code source HTML5 du jeu Bloodmoney

Formulaire de connexion

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS