نمادها

شما اینجا هستید

آموزش تصویری ساخت فرم ورود

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

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

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

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

برای ساخت فرم ابتدا کد های زیر را به 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>

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

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

اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

اولین کسی باشید که رای میدهید


این مجموعه فایل rar است که برای باز کردن آن نیاز به نرم افزار Winrar می باشد

دانلود آموزش تصویری ساخت فرم ورود و سورس کد ها : نوع فایل:rar/video/code حجم فایل:52.75 مگابایت

بعد از اکسترکت (extract) کردن فایل ها آن را با یک پلیر تصویری ببینید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.