كيفية أنشاء نموزج تسجيل الدخول بستخدام HTML و CSS
في هذه المقالة ، ستتعلم كيفية إنشاء نموذج تسجيل الدخول باستخدام HTML و CSS فقط. في وقت سابق من هذه المدونة ، قمت بمشاركة نموذجين بسيطين لتسجيل الدخول ، ولكن هنا في هذه المدونة ، سأقوم بإنشاء نموذج تسجيل دخول رائع.
نموذج تسجيل الدخول هو أهم جزء في أي موقع. يتم استخدامه لتحديد هوية المستخدم ومنحه حق الوصول إلى المناطق المحظورة في الموقع. يمكن إنشاء هذا النوع من النموذج باستخدام HTML و CSS. هاتان لغتان مختلفتان تستخدمان لتصميم الويب. يمكن أن يكون رمز HTML الخاص بنموذج تسجيل الدخول بسيطًا جدًا أو يمكن أن يكون معقدًا اعتمادًا على ما تريده أن يفعله. هناك طرق عديدة لإنشاء نموذج تسجيل الدخول. نموذج تسجيل دخول بسيط وسهل التخصيص باستخدام HTML و CSS.
يمكن إنشاء نموذج تسجيل الدخول باستخدام كود HTML و CSS. سيتم وضع رمز نموذج تسجيل الدخول في علامة مستند HTML ، وسيتضمن زر تسجيل الدخول مع نص يقول تسجيل الدخول أو تسجيل الدخول. ستساعدك هذه المقالة في إنشاء نموذج تسجيل الدخول باستخدام HTML CSS. يمكنك استخدام هذا الرمز لأي مشروع خاص بك.
نموذج تسجيل الدخول هو نموذج يستخدم لمصادقة المستخدم. عادة ما توجد على الصفحة الرئيسية لموقع الويب. سيتضمن نموذج تسجيل الدخول عادةً حقولاً لإدخال اسم المستخدم وكلمة المرور. في بعض الحالات ، قد يشتمل أيضًا على حقول أخرى مثل عنوان البريد الإلكتروني أو معلومات الاتصال الأخرى ، والتي تكون اختيارية لتسجيل الدخول. سيحتوي نموذج تسجيل الدخول النموذجي أيضًا على زرين: أحدهما لإرسال البيانات والآخر للإلغاء أو العودة إلى صفحة سابقة.
كل موقع لديه نموذج تسجيل الدخول. إنه أول ما يراه المستخدم عند زيارته لموقع الويب الخاص بك. من المهم أن يكون لديك نموذج تسجيل دخول جيد المظهر ، لأنه يمكن أن يؤدي إلى إنشاء موقعك أو تعطيله. نموذج تسجيل الدخول هو نموذج يُستخدم لإنشاء حساب على موقع ويب. هناك العديد من الطرق المختلفة لإنشاء نموذج تسجيل دخول ، لكن معظمها يتطلب بعض المعرفة بالترميز. سنشرح لك في هذه المقالة كيفية إنشاء نموذج تسجيل دخول جميل باستخدام HTML و CSS.
ملحوظه يمكنك استخدام الرمز من خلال نسخ الرمز ولصقه في ملف تيكست على الكمبيوتر وقم بحفظ الملف بصيغة index.html
ومن ثم افتح الملف وقم بالتعديل عليه وزيد من خبرتك.
مصدر الرمز
إذا أعجبك نموذج تسجيل الدخول هذا ، فلا تتردد في استخدامه في مشروعك. انسخ الرمز بالنقر فوق الزر "نسخ" الموضح أدناه.
أولاً ، عليك إنشاء ملفين. أحدهما هو HTML والآخر هو CSS. بعد إنشاء الملفات ، الصق الكود المقدم أدناه.
كود HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cool Login form | By Code Info</title>
<link rel="stylesheet" href="style.css">
<!-- Font Awesome Cdn Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<h1>Hello Again!</h1>
<p>Welcome back you've <br> been missed!</p>
<form>
<input type="text" placeholder="Enter username">
<input type="password" placeholder="Password">
<p class="recover">
<a href="#">Recover Password</a>
</p>
</form>
<button>Sign in</button>
<p class="or">
----- or continue with -----
</p>
<div class="icons">
<i class="fab fa-google"></i>
<i class="fab fa-github"></i>
<i class="fab fa-facebook"></i>
</div>
<div class="not-member">
Not a member? <a href="#">Register Now</a>
</div>
</div>
</body>
</html>
آمل أن تكون قد أحببت هذا المقتطف. إذا كان الأمر كذلك ، فالرجاء مشاركة المدونة ومتابعتنا في ملفات تعريف الوسائط الاجتماعية الخاصة بنا والبقاء على اتصال بهذه المدونة. شكرا لزيارتك.
تعليقات
إرسال تعليق