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

95 nazairerichard6

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

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

अनुशंसित

29 June 2025

HTML ड्रॉपडाउन मेनू कोड स्निपेट

9 May 2024

दिन और रात का लाइटहाउस चित्रण

23 August 2024

व्याख्याता एमपी3 और एचटीएमएल सीएसएस और जेएस

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 ड्रॉपडाउन मेनू कोड स्निपेट

दिन और रात का लाइटहाउस चित्रण

व्याख्याता एमपी3 और एचटीएमएल सीएसएस और जेएस

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS