ईमेल और पासवर्ड के साथ HTML साइनअप फ़ॉर्म

1152 nazairerichard6

संपादक में खोलें Video अपना कोड प्रकाशित करें

ईमेल और पासवर्ड के साथ HTML साइनअप फ़ॉर्म

अनुशंसित

30 August 2025

CSS एनिमेशन: प्रगति बार और ड्रॉप्स

18 December 2025

एक्वापार्क IO अनब्लॉक्ड गेम का HTML कोड

9 July 2025

रंग चयनकर्ता के साथ नियॉन ग्लास संदर्भ मेनू

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;
}

अनुशंसित

CSS एनिमेशन: प्रगति बार और ड्रॉप्स

एक्वापार्क IO अनब्लॉक्ड गेम का HTML कोड

रंग चयनकर्ता के साथ नियॉन ग्लास संदर्भ मेनू

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS