Formulaire d'inscription HTML avec e-mail et mot de passe

1,276 nazairerichard6

Ouvrir dans l'éditeur Publiez votre code

Formulaire d'inscription HTML avec e-mail et mot de passe

Recommandé

10 December 2025

Code source JavaScript du jeu Snake sur Canvas HTML

14 December 2025

Chargez et jouez en ligne au jeu Zelda N64

17 November 2025

Animation de cœur explosif cliquable

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Connexion</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 </head>
<body>
<div class="login-form">
  <div class="text">
    Connexion membre
  </div>
  <form id="signupForm" enctype="multipart/form-data">
    <input 
    type="hidden"
    name="x-sheetmonkey-insert-worksheet"
    value="NEW"
    />
    <div class="field">
      <div class="fas fa-user"></div>
      <input type="text" name="NAME" placeholder="NAME" required>
    </div>
    <div class="field">
      <div class="fas fa-envelope"></div>
      <input type="email" name="Email" placeholder="Email" required>
    </div>
    <div class="field">
        <div class="fas fa-phone"></div>
        <input type="number" name="PHONE_NUMBER" placeholder="Phone Number" required>
      </div>
    <div class="field">
      <div class="fas fa-lock"></div>
      <input type="password" name="PASSWORD" placeholder="Password" required>
    </div>
    <div class="field">
        <div class="fas fa-lock"></div>
        <input type="password" name="confirm_password" placeholder="Confirm Password" required>
      </div>
    <button type="submit">SIGNUP</button>
    <div class="link">
      Are you a member?
      <a href="service.html">Login now</a>
      <p style="color: red;">Please you'll be charge for Agent portal</p>
    </div>
  </form>
</div>
 </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  height: 100vh;
  text-align: center;
  align-items: center;
  justify-content: center;
 
}
.login-form {
  position: relative;
  width: 370px;
  height: auto;
  background: #1b1b1b;
  padding: 40px 35px 60px;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: inset 0 0 1px #272727;
}
.text {
  font-size: 30px;
  color: #c7c7c7;
  font-weight: 600;
  letter-spacing: 2px;
}
form {
  margin-top: 40px;
}
form .field {
  margin-top: 20px;
  display: flex;
}
.field .fas {
  height: 50px;
  width: 60px;
  color: #868686;
  font-size: 20px;
  line-height: 50px;
  border: 1px solid #444;
  border-right: none;
  border-radius: 5px 0 0 5px;
  background: linear-gradient(#333, #222);
}
.field input,
form button {
  height: 50px;
  width: 100%;
  outline: none;
  font-size: 19px;
  color: #868686;
  padding: 0 15px;
  border-radius: 0 5px 5px 0;
  border: 1px solid #444;
  caret-color: #339933;
  background: linear-gradient(#333, #222);
}
input:focus {
  color: #339933;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 255, 0, 0.1);
  background: linear-gradient(#333933, #222922);
  animation: glow 0.8s ease-out infinite alternate;
}
@keyframes glow {
  0% {
    border-color: #339933;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.1);
  }
  100% {
    border-color: #6f6;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.6),
      inset 0 0 10px rgba(0, 255, 0, 0.4);
  }
}
button {
  margin-top: 30px;
  border-radius: 5px !important;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
}
button:hover {
  color: #339933;
  border: 1px solid #339933;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.3), 0 0 10px rgba(0, 255, 0, 0.2),
    0 0 15px rgba(0, 255, 0, 0.1), 0 2px 0 black;
}
.link {
  margin-top: 25px;
  color: #868686;
}
.link a {
  color: #339933;
  text-decoration: none;
}
.link a:hover {
  text-decoration: underline;
}