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

1016 nazairerichard6

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

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

अनुशंसित

19 October 2024

एनिमेटेड HTML और CSS इनपुट

24 August 2025

सरल HTML पंजीकरण फ़ॉर्म उदाहरण

18 October 2025

बटन के साथ मूल HTML टेम्पलेट (स्पेनिश)

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

अनुशंसित

एनिमेटेड HTML और CSS इनपुट

सरल HTML पंजीकरण फ़ॉर्म उदाहरण

बटन के साथ मूल HTML टेम्पलेट (स्पेनिश)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS