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

arash میگوید:
سلام و خسته نباشید خدمت استاد عزیز استاد زمانی که در فایل اچ دی ام ال سی اس اس رو لینک کردیم که استایل ها اعمال بشن و در سی اس اس تغییرات رو اعمال میکنیم و فقط استایل های قرارگیری اعمال میشن ولی اضافه کردن رنگ عمل نمیکنه دلیلش چیه مثلا background-color رنگش اعمال نمیشه همون قسمت آبی کم رنگ فرم لاگینی که درست میکنید اعمال نمیشه صفحه هم لایو سروره هر تغییری بدم نشون میده

در
برای پاسخ دادن وارد شوید
- پشتیبانی میگوید:
  سلام! مشکلی که شما با اعمال تغییرات در CSS در فایل HTML دارید، ممکن است به چند دلیل باشد. این موارد را برای رفع مشکل باید یکی یکی بررسی کنید:
  
  اطمینان حاصل کنید که نام کلاس یا شناسه مورد نظر در فایل CSS درست باشد: ابتدا باید بررسی کنید که نام کلاس یا شناسه‌ای که در فایل HTML به عنوان `class` یا `id` به کار برده‌اید، با نام کلاس یا شناسه معادل در فایل CSS مطابقت داشته باشد.
  
  اطمینان حاصل کنید که CSS به درستی لود شده باشد: اطمینان حاصل شود که فایل CSS به درستی در فایل HTML لود شده باشد. برای اطمینان از این موضوع، مطمئن شوید که مسیر (path) به فایل CSS درست باشد و همچنین برای هر تغییر در فایل CSS، مرورگر را بازنشانی کنید تا تغییرات اعمال شوند.
  
  اشتباه در نوشتار CSS: ممکن است در نوشتن ویژگی‌های CSS دچار اشتباه شده باشید. برای مثال، اگر می‌خواهید رنگ پس‌زمینه (background-color) تغییر کند، مطمئن شوید که نام ویژگی را به درستی نوشته باشید و از سینتکس صحیح CSS استفاده کنید.
  
  ارث‌بری در CSS: گاهی اوقات، تغییرات در CSS بر اساس ارث‌بری از ویژگی‌های پدری (parent) تعیین می‌شود. اگر در CSS ارث‌بری استفاده شده باشد، ممکن است تغییرات شما تنها برای برخی از موارد اعمال شوند و برای دیگر موارد اعمال نشوند.
  
  اطمینان حاصل کنید که تغییرات به درستی ذخیره شده باشند: اگر تغییرات در فایل CSS اعمال شده اما به درستی ذخیره نشده باشند، تغییرات نمایش داده نخواهند شد. مطمئن شوید که تغییرات ذخیره شده و فایل CSS به روز شده باشد.
  
  اگر با بررسی این موارد مشکل هنوز حل نشده باشد، ممکن است نیاز به بررسی کد HTML و CSS خودتان داشته باشید تا دلیل این مشکل را بیابید. همچنین ممکن است کد JavaScript یا سرور نیز تغییرات را تحت تأثیر قرار دهد، پس باید آنها را نیز بررسی کنید.
  
  در
  برای پاسخ دادن وارد شوید
Mani میگوید:
سلام
می خواستم این رو به دیتابیس وصل کنم
چطوری میتونم اینو به دیتابیس اتصال دهم ؟
آیا باید اینو به PhP کانکشن وصل ولی چطوری چه کدی می خواد

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

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

در
برای پاسخ دادن وارد شوید

دیدگاهتان را بنویسید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.