کیسے بنائیں: درج نامی فورم

کیسے درج نامی فورم بنائیں

پہلا قدم - ایچ تی ایم ایل اضافہ کریں:

انٹرپوٹ کو ہینڈل کرنے کے لئے <form> علامت استعمال کریں۔ آپ کو اپنے پی ایچ پی درس میں مزید معلومات مل سکتی ہیں۔

پس ہر کس فیلڈ کو انٹرپوٹ کنٹرولر کا اضافہ کریں (اور مناسب لبل کا اضافہ کریں):

<form action="action_page.php" style="border:1px solid #ccc">
  <div class="container">
    <h1>ثبت نام کریں</h1>
    <p>اس فرم کو پورا کریں تاکہ حساب خلق کریں.</p>
    <hr>
    <label for="email"><b>ای میل</b></label>
    <input type="text" placeholder="ای میل درج کریں" name="email" required>
    <label for="psw"><b>پاسورڈ</b></label>
    <input type="password" placeholder="پاسورڈ درج کریں" name="psw" required>
    <label for="psw-repeat"><b>پس مند کا پاسورڈ دوبارہ درج کریں</b></label>
    <input type="password" placeholder="پس مند کا پاسورڈ دوبارہ درج کریں" name="psw-repeat" required>
    <label>
    <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px">Remember me
    </label>
    <p>حساب خلق کرنے سے آپ ہماری <a href="#" style="color:dodgerblue">شرائط و پرائیویسی</a> پر اتفاق کرتے ہیں.</p>
    <div class="clearfix">
      <button type="button" class="cancelbtn">Cancel</button>
      <button type="submit" class="signupbtn">Sign Up</button>
    </div>
  </div>
</form>

第二步 - 添加 CSS：

* {box-sizing: border-box}
/* پورا چوڑائی کا انٹرپوٹ فیلڈ */
  input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* Set style for all buttons */
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
button:hover {
  opacity:1;
}
/* Set additional style for cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}
/* منسوخ اور درج نامی بٹن کو بروئی کریں اور مساوی فضا اضافہ کریں */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}
/* کانٹینر علامت کو اندرون فریم کریں */
.container {
  padding: 16px;
}
/* رول آؤٹ کو ختم کریں */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* بائیں بولیا میں منسوخ کی بٹن اور رجسٹریشن بٹن کا انداز بدلنا */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
    width: 100%;
  }
}

آزمایش کنید

کیسے مودل درج نامی فورم بنائیں

پہلا قدم - ایچ تی ایم ایل اضافہ کریں:

انٹرپوٹ کو ہینڈل کرنے کے لئے <form> علامت استعمال کریں۔ آپ کو اپنے پی ایچ پی درس میں مزید معلومات مل سکتی ہیں۔

پس ہر کس فیلڈ کو انٹرپوٹ کنٹرولر کا اضافہ کریں (اور مناسب لبل کا اضافہ کریں):

<!-- Button to open the modal -->
<button onclick="document.getElementById('id01').style.display='block'">Sign Up</button>
<!-- The Modal (contains the Sign Up form) -->
<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">times;</span>
  <form class="modal-content" action="/action_page.php">
    <div class="container">
      <h1>ثبت نام کریں</h1>
      <p>اس فرم کو پورا کریں تاکہ حساب خلق کریں.</p>
      <hr>
      <label for="email"><b>ای میل</b></label>
      <input type="text" placeholder="ای میل درج کریں" name="email" required>
      <label for="psw"><b>پاسورڈ</b></label>
      <input type="password" placeholder="پاسورڈ درج کریں" name="psw" required>
      <label for="psw-repeat"><b>پس مند کا پاسورڈ دوبارہ درج کریں</b></label>
      <input type="password" placeholder="پس مند کا پاسورڈ دوبارہ درج کریں" name="psw-repeat" required>
      <label>
        <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> خاطر رکھیں
      </label>
      <p>حساب خلق کرنے سے آپ ہماری <a href="#" style="color:dodgerblue">شرائط و پرائیویسی</a> پر اتفاق کرتے ہیں.</p>
      <div class="clearfix">
        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">منسوخ کریں</button>
        <button type="submit" class="signup">Register</button>
      </div>
    </div>
  </form>
</div>

第二步 - 添加 CSS：

* {box-sizing: border-box}
/* Full-width input fields */
  input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}
/* Add background color when input box gets focus */
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
/* Set style for all buttons */
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
button:hover {
  opacity:1;
}
/* Set additional style for cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}
/* Make cancel and register buttons float and set equal width */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}
/* Add padding to the container element */
.container {
  padding: 16px;
}
/* Model (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #474e5d;
  padding-top: 50px;
}
/* ماڈل کا مواد/درجہ */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* آپریشن سے 5%，بنیاد سے 15% اور مرکز میں */
  border: 1px solid #888;
  width: 80%; /* ممکن ہے کہ اس سے زیادہ یا کم، باتیل اسکرین کی سائز کے مطابق */
}
/* افقی لائن کا انداز سیٹ کرنا */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* بند کی بٹن (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}
.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}
/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* بائیں بولیا میں منسوخ کی بٹن اور رجسٹریشن بٹن کا انداز بدلنا */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
    width: 100%;
  }
}

نکات:آپ اس سے بھی استفادہ کرسکتے ہیں، جو اس جاوا اسکریپٹ کو استعمال کرکے کسی بھی ماڈل کی داخلی علاقے کے باہر کی پائیداری پر ماڈل کو بند کردیگا (کامروا یا ان کلئیک کیا جائے یا نہ کیا جائے):

<script>
// ماڈل حاصل کرنا
var modal = document.getElementById('id01');
// جب بکریس کسی بجای ماڈل تکمیل کرتا ہے، اس کو بند کردیگا
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

آزمایش کنید

آموزش شخصی

صفحات مرتبطفرم HTML

صفحات مرتبطفرم CSS