كيفية تصميم شاشة تسجيل دخول ( login form ) html and css
سوف نتعرف على كيفيه تصميم نموذج تسجيل دخول (login form)وكمان هنتعرف على إزاى تبدأ تصميم صح
webPrey | سوف نتعرف على كيفيه تصميم نموذج تسجيل دخول (login form )وكمان هنتعرف على إزاى تبدأ تصميم صح من غير عشوائية وبنظام سليم خليكم معانا.
محتويات المقال
المقدمة .
كيف نعد للتصميم.
ملف ال Html.
ملف ال Css.
الخلاصة ( هات من الأخر).
هنتعلم مع بعض فى هذا المقال كيفية تصميم نموذج تسجيل دخول ( login form ) بلغتى Html And Css وسوف نتعرف على التصميم خطوة خطوة وهنبدأ مع بعض وحدة وحدة وكمان الكود هيكون متوفر للى حابب يتعلم منة؟طبعأ علشان تشتغل وتكتب أكواد لازم يكون عندك برنامج لتحرير النصوص مثل Notepad ولكن هذا البرنامج لا يوجد بة أى إمكانيات تساعدك أثناء التكويد.
إشتغل على برنامج Visual Studio Code ولو مش عندك حملة من على الإنترنت .
او ممكن تحمله من الموقع الرسمى من هنا
مميزات Visual Studio Code
- برنامج سهل وبسيط.
- بيساعدك على كتابة الكود.
- لو نسيت خاصية وفاكر أول كام حرف منها بيكملهالك ( بيظهرلك مجموعه من الإقتراحات ).
- بيعمل خط أحمر تحت الكلمة اللى فيها خطأ.
- بينسق الكود ويخلية منظم بحيث يسهل قراءتة.
- ومميزات تانية كتير.
كيف نعد للتصميم
كيف نبدأ عملية الإعداد للتصميم
فية أكثر من طريقة لتبدأ عملية التصميم الصحيحة .
الطريقه الأولى
- إنك تعمل فولدر وتسمية بأسم المشروع وليكن سميتة form.
- داخلة الفولدر دة هتحط الملفات والملحقات اللى هستخدمها فى التصميم بتاعك.
- ودى طريقة عشوائية جداُ وهتسببلك توهان ولغبطة خصوصاً لو إنتة شغال على مشروع كبير.
الطريقه الثانية
- إنك تعمل فولدر وتسمية بنفس إسم المشروع مثلاً سميتة form.
- داخلة أعمل folder للصور ,وأعمل folder لملفات ال Css بمعنى أصح أخصص لكل حاجة فولدر خاص بيها.
- دة هيخلى شغلك مرتب أكتر ومش هتتلغبط ولا هتوه فى حاجة وهيخلى شغلك إحترافى أكتر.
لية الطريقه الاولى عشوائشة؟
لأن ملفات ال Css والصور وملف ال Html يكونوا فى نفس الفولدر مما يسبب لغبطة وتوهان للمطور خصوصاُ لو المشروع كبير.سواءً إتبعت الطريق الأولى أو الثانية بعد عمل الفولدر الخاص بالمشروع وملفات التصميم هنتوجة لبرنامج Visual Studio Code ومن قائمة File هنختار Open Folder وتفتح فولدر المشروع بتاعك علية ونبدأ التصميم.
ملف ال Html
وهنا هنكتب كود ال Html للفورم ( html login form ).إسم ملف ال Html هو form .html لو حابب تغير الأسم براحتك .
الكود
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<link rel="stylesheet" href="style/style.css">
<!--make elements normal and no problem in deferent browsers-->
<link rel="stylesheet" href="css/normalize.css">
<!-- font awestom library-->
<link rel="stylesheet" href="css/all.min.css">
<style>
</style>
</head>
<body>
<form class="form">
<img src="images/mo1.png" alt="form image">
<h3>login</h3>
<input type="text" placeholder="User Name">
<input type="password" placeholder="Enter Password">
<button>login</button>
<p>forget password ?</p>
</form>
</body>
</html>
ملف ال Css
وهنا هنكتب كود ال css للفورم (css login form).ملف ال Css يحتوى على التنسيقات والألوان الخاصة بالتصميم .
إسم ملف ال Css هو style.css لو حابب تغير الأسم براحتك .
ملاحظة !
ملف ال css موجود داخل فولدر أسمة style .الكود
::placeholder {
color: white;
}
body {
font-family: sans-serif;
padding: 0;
margin: 0;
background: url(../images/s7.jpg);
background-size: cover;
}
.form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
height: 420px;
background: rgb(0 0 0 / 35%);
border-radius: 15px;
box-sizing: border-box;
}
.form img {
width: 100px;
height: 100px;
position: absolute;
top: -50px;
left: 118px;
border-radius: 50%;
}
.form h3 {
text-align: center;
color: white;
margin-top: 80px;
font-size: 32px;
}
.form input {
border: navajowhite;
width: 291px;
outline: none;
overflow: hidden;
height: 34px;
margin: 0 auto 30px 25px;
border-bottom: 3px solid #0e8fdd;
background-color: transparent;
color: white;
}
.form button {
font-size: 18px;
border: none;
position: absolute;
top: 76%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 34px;
background-color: #0e8fdd;
border-radius: 15px;
color: white;
cursor: pointer;
}
.form p {
position: absolute;
bottom: 6px;
color: white;
font-size: 20px;
left: 32px;
cursor: pointer;
}
شكل الفولدرات يكون كالتالى
الخلاصة ( هات من الأخر)
- تصميم نموذج تسجيل دخول ( login form ) بسيط جداً وسهل .
- عرفنا إزاى نبدأ التصميم صح وإزاى ننظم شغلنا علشان منتلغبطش خصوصاُ لو كان المشروع كبير.
- وإتعرفنا على كود ال Html وكود ال Css .
- وطبعاُ أوعى تنسي الصور اللى هتستخدمها فى التصميم .
ملاحظات هامة
سوف تحتاج صورتين فى التصميم صوره فوق ال form وصورة خلفية للشاشة .لازم تسمى الملفات بنفس الأسماء اللى قولتلك عليها سواء كان ملف ال Html أو ال Css أو الصورة علشان التصميم يشتغل معاك من غير مشاكل .
أو ممكن تغير فيهم براحتك بس دة إذا كنت فاهم إنتة بتعمل إى.
ولو عايز الصور المستخدمة فى التصميم تابعنا على حسابنا على فيس بوك من هنا وابعت مسج هنبعتلك .
وكدة نكون إنتهينا من موضوعنا اليوم أتمنى لو الموضوع أعجبك تدعمنا بلايك ومتابعة والسلام عليكم ورحمة الله وبركاتة .
وكدة نكون إنتهينا من موضوعنا اليوم أتمنى لو الموضوع أعجبك تدعمنا بلايك ومتابعة والسلام عليكم ورحمة الله وبركاتة .
