هیچ محصولی در سبد خرید نیست.
مدرس دوره
نبی عبدی
زمان ویدیو
33:22 دقیقه
برو به دیگر جلسات
برای دانلود ویدیو
آموزش طراحی فرم لاگین با HTML و CSS
در این ویدیو از سری ویدیوهای آموزش 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;
}
}
جمع بندی
در انتها امیدواریم که این ویدیو مورد پسند شما قرار گرفته باشد، هر سوالی در رابطه با این جلسه دارید در بخش کامنت‌های همین جلسه ارسال کنید تا در سریع ترین زمان ممکن پاسخ گوی سوالات شما عزیزان باشیم.
همچنین اگر نیاز به آموزش خاصی دارید در بخش کامنت ها عنوان کنید تا بتوانیم آموزش‌های مورد نیاز شما عزیزان را نیز تولید و منتشر کنیم.
سلام بزرگوار خیلی ممنون از آموزشتون اما من ایده ای جذابتر دارم در رابطه با ساخت فرم لاگین وقتی ما به سایتی می ریم یه ثبت نام کنید و ورود رو داره همین آموزش و فرم لاگین اون صفحه عکس رو به ثبت نام تبدیل کنید با استایلی زیبا مثلا بااستفاده از یک دکمه به صفحه ورود و از دکمه دیگر به صفحه ثبت نام در سایت دسترسی پیده کرد البته این نظر بنده هستش🙏🙏