آموزش طراحی فرم لاگین با 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 امتیاز)

نظرات در “آموزش طراحی فرم لاگین با HTML و CSS”

Mani میگوید:
سلام
می خواستم این رو به دیتابیس وصل کنم
چطوری میتونم اینو به دیتابیس اتصال دهم ؟
آیا باید اینو به PhP کانکشن وصل ولی چطوری چه کدی می خواد

در
پاسخ
- پشتیبانی میگوید:
  درود بر شما، این موضوع به صورت کامل در دوره جادوی وردپرس | پلاگین نویسی وردپرس آموزش داده شده است.
  
  در
  پاسخ
sadra میگوید:
مال من تو لپتاب خراب میشه مثل گوشی میشه چه کدی رو اشتباه زدم

در
پاسخ
- پشتیبانی میگوید:
  کدهای بخش ریسپانسیو را به درستی وارد نکرده‌اید.
  
  در
  پاسخ
محمد زمانی میگوید:
سلام بزرگوار خیلی ممنون از آموزشتون اما من ایده ای جذابتر دارم در رابطه با ساخت فرم لاگین وقتی ما به سایتی می ریم یه ثبت نام کنید و ورود رو داره همین آموزش و فرم لاگین اون صفحه عکس رو به ثبت نام تبدیل کنید با استایلی زیبا مثلا بااستفاده از یک دکمه به صفحه ورود و از دکمه دیگر به صفحه ثبت نام در سایت دسترسی پیده کرد البته این نظر بنده هستش🙏🙏

در
پاسخ