مدرس دوره

مدرس دوره

نبی عبدی

مدت زمان ویدیو

زمان ویدیو

33:22 دقیقه

دیگر جلسات دوره

برو به دیگر جلسات

آموزش HTML و CSS

دانلود ویدیو

برای دانلود ویدیو

وارد شوید

آموزش طراحی فرم لاگین با HTML و CSS

آخرین بروزرسانی در تاریخ : 20, مرداد, 1401

در این ویدیو از سری ویدیوهای آموزش HTML و CSS می خواهیم اولین مینی پروژه را انجام دهیم، در این آموزش از صفر تا صد نحوه طراحی یک فرم ورود به سایت یا همان طراحی فرم لاگین توسط زبان های HTML و CSS را یاد خواهید گرفت. همچنین اگر می‌‌خواهید ویدیو را با کیفیت بالاتر ببینید به این لینک از کانال یوتیوب وبکیما مراجعه کنید.

دقت کنید که از این فرم لاگین نمی توانید در سایت وردپرسی خود استفاده کنید و برای استفاده از این فرم در سایت های وردپرسی باید بتوانید آن را با کدهای PHP و توابع وردپرس داینامیک کنید و آن را به یک افزونه وردپرس تبدیل کنید. اگر نمی‌دانید وردپرس چیست، مقاله وردپرس چیست را مطالعه کنید.

کدهای HTML فرم لاگین

در زیر می توانید کدهای html این فرم لاگین را مشاهده کنید، دقت کنید که تا حد امکان از این کدها برای پیدا کردن اشتباهات خود استفاده کنید و آن ها را کپی و پیس نکنید! چون در واقع با این کار هیچی یاد نمی‌گیرید! حالا از ما گفتن بود!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webkima Login Form</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="login__form">
        <div class="login__form__img">
          <img
            src="https://images.unsplash.com/photo-1655890938539-7257cdd5ea34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
            alt=""
          />
        </div>
        <div class="login__form__right">
          <h1>Sign In</h1>
          <form action="">
            <label for="input-email">Enter Email</label>
            <input type="email" id="input-email" />
            <label for="input-pass">Enter Password</label>
            <input type="password" id="input-pass" />
            <button class="login-btn">Login</button>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

کدهای CSS فرم ورود به سایت

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #b6d3ff;
  font-family: sans-serif;
}
.container {
  max-width: 1280px;
}
.login__form {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
  min-height: 80vh;
}
.login__form__img img {
  width: 100%;
  height: 30vh;
  object-fit: cover;
}
.login__form__right {
  padding: 2rem;
}
.login__form__right h1 {
  margin-bottom: 2rem;
}
.login__form__right form input,
.login__form__right form button {
  width: 100%;
  margin-bottom: 1rem;
  border: 2px solid #cdd9ea;
  padding: 0.6rem;
  border-radius: 5px;
  outline: none;
}
.login__form__right form input:focus {
  border: 2px solid rgb(62, 125, 251);
  box-shadow: 0 0 0px 2px rgba(62, 125, 251, 0.2);
}
.login__form__right form label {
  color: #989b9f;
  font-size: 0.8rem;
}
.login__form__right form button {
  background-color: rgb(62, 125, 251);
  border: none;
  color: #fff;
  font-size: 1rem;
  margin-top: 1rem;
  padding: 0.7rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.login__form__right form button:hover {
  background-color: rgb(23, 81, 197);
}

@media screen and (min-width: 768px) {
  .login__form {
    display: flex;
    flex-direction: row;
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
  }
  .login__form__right {
    padding: 5rem;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .login__form__img {
    width: 50%;
  }
  .login__form__img img {
    height: 90vh;
    width: 100%;
    display: block;
  }
}

جمع بندی

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

همچنین اگر نیاز به آموزش خاصی دارید در بخش کامنت ها عنوان کنید تا بتوانیم آموزش‌های مورد نیاز شما عزیزان را نیز تولید و منتشر کنیم.

3.7/5 - (4 امتیاز)

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

نشانی ایمیل شما منتشر نخواهد شد.

تا 90 درصد تخفیف روی تمامی دوره‌های سایت 😍 به مدت محدود...برو به جشنواره
+