Login form HTML code and Customisation

जैसा की आप सभी लोग जानते है बहुत सारी ऐसी वेबसाइट है जिस पर हमें सबसे पहले Sign Up करना होता है फिर हम अपना Login ID और Password Create करते है फिर जब हम दुबारा उस वेबसाइट पर जाते तब हमें अपने Login ID और Password के द्वारा उस वेबसाइट पर Login होना होता है जिससे हम उस वेबसाइट के सारे फीचर को Use कर पाते है या उसमे उपस्थित डाटा का अवलोकन कर पाते है उस Login वाले पेज या जहाँ Login ID और Password डालते है उसे हम Login Form बोलते है यदि आप भी जानना चाहते है की उस Login Form को HTML और CSS के माध्यम से कैसे बनाया जाता है तो आप हमारे इस आर्टिकल को पूरा पढ़े इस आर्टिकल में Login Form का Project Code एवं Demo उपलब्ध है जिससे आप Login Form को बहुत ही आसानी से बना सकते है

Login Form Demo

Login Form Script Code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color:#fff;

}
form {border: 13px solid #f1f1f1;}

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 10px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: red;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: red;
}

.container {
  padding: 16px;
 
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}
</style>
</head>
<body>

<center><h2>Login Form</h2></center>

<div class="container">
    <label for="uname"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

<label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>
        
    <button type="submit">Login</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
  </div>

<div class="container" style="background-color:#f1f1f152">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>

</body>
</html>

Login Form Customisation

Login Form को हम CSS के माध्यम से बहुत ही आसानी से Customise कर सकते है जो इसके कुछ मुख्य Customisation है उसके बारे में हम जानते है

Login Form Body background Customisation

सबसे पहले हम जानेंगे Login Form के Body के background के बारे में,Login Form के Background के कलर को Change करने के लिए हमें body वाले Section में जो background-color लिखा हुआ है इसके बाद वाले कलर कोड (#ffc107) अपने पसंद के कलर कोड के साथ Replace करना है

Input Area का Customisation

दुसरा हमारा है Login Form के Input Area का Customisation, इसके लिए हमें input[type=text], input[type=password] वाले सेक्शन में संशोधन करना है

width: 100%; (Login Form के input area को छोटा या बड़ा कर सकते है)

padding: 12px 20px; (Login Form के input area के Size को कम या ज्यादा कर सकते है)

margin: 10px 0; (Login Form के input area के बीच Space को बढ़ा सकते है )

border: 1px solid #ccc; (Login Form के input area के बॉर्डर की Size एवं कलर को change कर सकते है )

Button Customisation

अब हमर तीसरा Section है जिसमे हम Login Form के button का Customisation करना है

background-color: #04AA6D;(Login Form के Button के कलर को बदल सकते है)

color: white;(Login Form के Button पर लिखे गए शब्द के कलर को बदल सकते है)

padding: 14px 20px;(Login Form के Button के Size को कम या ज्यादा कर सकते है)

margin: 8px 0;(Login Form और Button के बीच Space को कम या ज्यादा कर सकते है)

width: 100%;(Login Form के Button को छोटा या बड़ा कर सकते है)

इसी तरह से हम .cancelbtn { वाले सेक्शन में Cencel बटन एवं span.psw { वाले सेक्शन में Forget Password वाले आप्शन को customise कर सकते है

Post Name: Login form HTML code and Customisation

Login Form Customisation

Login Form Body background Customisation

Input Area का Customisation

Button Customisation

About Us

Follow Us

Contact form

Post Name: Login form HTML code and Customisation

Login Form Customisation

Login Form Body background Customisation

Input Area का Customisation

Button Customisation

You may like these posts

Contact form