شما در حال مشاهده
جلسه 1 هستید

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

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

جلسه 1
اسلایدر کارت وبلاگ متحرک با HTML و CSS

اسلایدر کارت وبلاگ متحرک با HTML و CSS

جلسه 2
آموزش ساخت ساعت دیجیتال در جاوا اسکریپت

آموزش ساخت ساعت دیجیتال در جاوا اسکریپت

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

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

جلسه 4
ساخت منوی بازشو در HTML CSS و جاوا اسکریپت

ساخت منوی بازشو در HTML CSS و جاوا اسکریپت

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

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

جلسه 6
ساخت دکمه سوئیچ یا Toggle Button در جاوا اسکریپت

ساخت دکمه سوئیچ یا Toggle Button در جاوا اسکریپت

جلسه 7
ساخت باکس جستجو یا سرچ بار در جاوا اسکریپت

ساخت باکس جستجو یا سرچ بار در جاوا اسکریپت

جلسه 8
ساخت انیمیشن کلیک روی دکمه در جاوا اسکریپت

ساخت انیمیشن کلیک روی دکمه در جاوا اسکریپت

جلسه 9
پروفایل کارت با تغییر رنگ تم در جاوا اسکریپت

پروفایل کارت با تغییر رنگ تم در جاوا اسکریپت

جلسه 10
آموزش ساخت لندینگ پیج با HTML و CSS و جاوا اسکریپت

آموزش ساخت لندینگ پیج با HTML و CSS و جاوا اسکریپت

جلسه 11
افکت هاور دکمه با استفاده از HTML و CSS (دکمه انیمیشنی)

افکت هاور دکمه با استفاده از HTML و CSS (دکمه انیمیشنی)

جلسه 12
آموزش ویدیویی ساخت اکولایزر حرفه ای با HTML & CSS

آموزش ویدیویی ساخت اکولایزر حرفه ای با HTML & CSS

جلسه 13
ساخت امواج SVG | افزودن CSS Waves به سایت (آموزش ویدیویی)

ساخت امواج SVG | افزودن CSS Waves به سایت (آموزش ویدیویی)

جلسه 14
آموزش ساخت هاور 3 بعدی برای دکمه ها با HTML و CSS

آموزش ساخت هاور 3 بعدی برای دکمه ها با HTML و CSS

جلسه 15
آموزش ویدیویی ساخت UI کارت پروفایل کاربری با HTML & CSS

آموزش ویدیویی ساخت UI کارت پروفایل کاربری با HTML & CSS

جلسه 16
ویدیوی آموزش ساخت ۴ افکت هاور آیکون تنها با HTML & CSS

ویدیوی آموزش ساخت ۴ افکت هاور آیکون تنها با HTML & CSS

جلسه 17
آموزش ساخت فرم ورود به سایت با افکت های زیبا با HTML و CSS

آموزش ساخت فرم ورود به سایت با افکت های زیبا با HTML و CSS

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

آموزش ساخت انیمیشن حرکت موس با جاوا اسکریپت

جلسه 19
آموزش ساخت هاور آیکون انیمیشنی با html و css (ساخت تولتیپ)

آموزش ساخت هاور آیکون انیمیشنی با html و css (ساخت تولتیپ)

جلسه 20
آموزش ساخت باکس اطلاعات تماس با HTML و CSS (با هاور زیبا)

آموزش ساخت باکس اطلاعات تماس با HTML و CSS (با هاور زیبا)

جلسه 21
آموزش ساخت فرم ثبت نام با html و css (فرم ثبت‌نام در سایت)

آموزش ساخت فرم ثبت نام با html و css (فرم ثبت‌نام در سایت)

جلسه 22
آموزش طراحی هاور تصویر با HTML و CSS 🤩طراحی های خلاقانه

آموزش طراحی هاور تصویر با HTML و CSS 🤩طراحی های خلاقانه

جلسه 23
طراحی یک صفحه ساده وبسایت با HTML و CSS ✅برای مبتدیان

طراحی یک صفحه ساده وبسایت با HTML و CSS ✅برای مبتدیان

جلسه 24
طراحی صفحه تماس با ما ریسپانسیو با استفاده از HTML و CSS

طراحی صفحه تماس با ما ریسپانسیو با استفاده از HTML و CSS

جلسه 25
آموزش طراحی فرم لوگین با HTML و CSS 🤩 طراحی های خلاقانه فرانت اند

آموزش طراحی فرم لوگین با HTML و CSS 🤩 طراحی های خلاقانه فرانت اند

جلسه 26
آموزش ساخت باکس قیمت گذاری با HTML و CSS

آموزش ساخت باکس قیمت گذاری با HTML و CSS

جلسه 27

مدرس دوره

نبی عبدی

زمان ویدیو

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 امتیاز)

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

  1. Mani میگوید:

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

  2. sadra میگوید:

    مال من تو لپتاب خراب میشه مثل گوشی میشه چه کدی رو اشتباه زدم

    • پشتیبانی میگوید:

      کدهای بخش ریسپانسیو را به درستی وارد نکرده‌اید.

  3. محمد زمانی میگوید:

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

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

لطفا آدرس صحیح ایمیل خود را وارد کنید چون هر زمان پاسخ کامنت شما داده شود از طریق ایمیل به شما اطلاع داده می شود.

جشنواره بزرگ فروش ... تا 67 درصد تخفیف روی تمامی دوره‌ها ...تخفیف‌تو بگیر!
+
آموزش‌های ویدیویی جدید در یوتیوب