कैसे बनाया जाता है: लॉगिन फॉर्म

कैसे लॉगिन फॉर्म बनाया जाता है

पहला कदम - HTML जोड़ें:

कंटेनर में एक चित्र जोड़ें और प्रत्येक फील्ड को इनपुट कंट्रोल (और समान टैग) जोड़ें। <form> एलीमेंट के द्वारा उन्हें आवरण करके प्रविष्टि को हस्ताक्षर करें।

हमारे PHP शिक्षा अधिक जानकारी के लिए प्रविष्टि जानकारी को कैसे हस्ताक्षर किया जाता है के बारे में जाएं।

<form action="action_page.php" method="post">
  <div class="imgcontainer">
    <img src="img_avatar2.png" alt="Avatar" class="avatar">
  </div>
  <div class="container">
    <label for="uname"><b>उपयोगकर्ता नाम</b></label>
    <input type="text" placeholder="उपयोगकर्ता नाम भरें" name="uname" required>
    <label for="psw"><b>पासवर्ड</b></label>
    <input type="password" placeholder="पासवर्ड भरें" name="psw" required>
    <button type="submit">लॉगिन</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> मुझे याद रखें
    </label>
  </div>
  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">पासवर्ड भूल गए? <a href="#">पासवर्ड लाओ?</a></span>
  </div>
</form>

दूसरा कदम - CSS जोड़ें:

/* 有边框的表单 */
form {
  border: 3px solid #f1f1f1;
}
/* 全宽输入框 */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
/* 为所有按钮设置样式 */
button {
  background-color: #04AA6D;
  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: #f44336;
}
/* इस कंटेनर के भीतर प्रोफाइल चित्र को केंद्रित करें */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}
/* प्रोफाइल चित्र */
img.avatar {
  width: 40%;
  border-radius: 50%;
}
/* कंटेनर में आंतरिक घाटी जोड़ें */
.container {
  padding: 16px;
}
/* "Forgot password" टेक्स्ट */
span.psw {
  float: right;
  padding-top: 16px;
}
/* अति-सूक्ष्म स्क्रीन पर span और रद्द बटन के शैली को बदलें */
@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}

आप खुद आयात करें

मॉडल लॉगिन फॉर्म कैसे बनाएं

पहला कदम - HTML जोड़ें:

<!-- 打开模式登录表单的按钮 -->
<button onclick="document.getElementById('id01').style.display='block'">Login</button>
<!-- 模态 -->
<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'"
class="close" title="Close Modal">×</span>
  <!-- 模态内容 -->
  <form class="modal-content animate" action="/action_page.php">
    <div class="imgcontainer">
      <img src="img_avatar2.png" alt="Avatar" class="avatar">
    </div>
    <div class="container">
      <label for="uname"><b>उपयोगकर्ता नाम</b></label>
      <input type="text" placeholder="उपयोगकर्ता नाम भरें" name="uname" required>
      <label for="psw"><b>पासवर्ड</b></label>
      <input type="password" placeholder="पासवर्ड भरें" name="psw" required>
      <button type="submit">लॉगिन</button>
      <label>
        <input type="checkbox" checked="checked" name="remember"> मुझे याद रखें
      </label>
    </div>
    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">रद्द करें</button>
      <span class="psw">पासवर्ड भूल गए? <a href="#">पासवर्ड लाओ?</a></span>
    </div>
  </form>
</div>

दूसरा कदम - CSS जोड़ें:

/* मॉडल (पृष्ठभूमि) */
.modal {
  display: none; /* डिफ़ॉल्ट रूप से छुपा हुआ है */
  position: fixed; /* जगह बनाए रखें */
  z-index: 1; /* शीर्ष पर रखें */
  left: 0;
  top: 0;
  width: 100%; /* पूरा चौड़ाई */
  height: 100%; /* पूरी ऊंचाई */
  overflow: auto; /* ज़रूरत पड़े तो रोल चालू करें */
  background-color: rgb(0,0,0); /* पिछला रंग */
  background-color: rgba(0,0,0,0.4); /* काला रंग की पारदर्शिता */
  padding-top: 60px;
}
/* मोडल सामग्री/फ़ेक्स */
.modal-content {
  background-color: #fefefe;
  margin: 5px auto; /* शीर्ष 15% और केंद्रित */
  border: 1px solid #888;
  width: 80%; /* स्क्रीन आकार के अनुसार थोड़ा अधिक या कम हो सकता है */
}
/* बंद बटन */
.close {
  /* इसे मोडल के बाहर के उच्च-दायाँ कोने में स्थापित करें */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}
/* हॉवर पर बंद बटन */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}
/* आकार फ़ेक्स करने के लिए */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}

सूचना:आप इसके अलावा JavaScript कोड का उपयोग करके मोडल फ़ेक्स के बाहर के किसी क्षेत्र पर क्लिक करके मोडल फ़ेक्स बंद कर सकते हैं (केवल "x" या "cancel" बटन का उपयोग करने के बजाय):

<script>
// मोडल प्राप्त करें
var modal = document.getElementById('id01');
// जब उपयोगकर्ता मोडल के बाहर के किसी स्थान पर क्लिक करता है तो इसे बंद करें 
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

आप खुद आयात करें

संबंधित पृष्ठ

तूरी:HTML फॉर्म

तूरी:CSS फॉर्म