سلام برنامه | HiProgram

سلام برنامه در خدمت شماست با آموزش تصویری ساخت فرم ورود

آموزش تصویری ساخت فرم ورود مناسب برای سایت هایی است که نمی خواهند فرم در صفحه اصلی قرار گیرد

فرمی که امروز آموزش می دهیم به صورت مودال است و در صفحه مجزا باز می شود

همچنین این فرم با تمام مرورگر ها و صفحه نمایش ها همخوانی دارد

برای ساخت فرم ابتدا کد های زیر را به body خود اضافه کنید

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">ورود</button>

<div id="id01" class="modal">
  <form class="modal-content animate" action="/action_page.php">
    <div class="imgcontainer">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
      <img src="Logo.png" alt="Avatar" class="avatar">
    </div>
    <div class="container">
      <label><b>نام و نام کاربری</b></label>
      <input type="text" placeholder="نام کاربری خود را وارد کنید" name="uname" required>

      <label><b>رمز ورود</b></label>
      <input type="password" placeholder="رمز خود را وارد کنید" name="psw" required>
        
      <button type="submit">ورود</button>
      <input type="checkbox" checked="checked"> مرا به خاطر بسپار
    </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>
    <div class="clear"></div>
  </form>
</div>

سپس برای جلوه و استایل دهی کد های زیر را به css خود اضافه کنید

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;
}
.clear{clear:both;}
button {
    background-color: #4CAF50;
    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;
    float:left;
}
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}
img.avatar {
    width: 200px;
    border-radius: 50%;
	height:200px;
}
.container {
    padding: 16px;
}
span.psw {
    float: right;
    padding-top: 16px;
}
.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: 0% auto 15% auto; 
    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)}
}
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
     
    }
}

و در نهایت برای اجرای فرم کد های جاوااسکریپت زیر را به انتهای کد های خود فرم اضافه کنید

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

همچنین می توانید برای مشاهده جزئیات بیشتر ویدیو آموزش را دریافت کنید

ویدیو آموزش در باکس دانلود زیر همین پست موجود است