طريقة انشاء login form كمراجعة للدروس السابقة

طريقة انشاء login form

نموذج تسجيل الدخول (Login Form) هو واجهة مستخدم تُستخدم للسماح للأشخاص بالدخول إلى نظام أو تطبيق عبر إدخال بيانات اعتماد مثل اسم المستخدم وكلمة المرور. يتكون عادةً من:

حقول الإدخال: حقل لاسم المستخدم وحقل لكلمة المرور.
زر تسجيل الدخول: زر يُستخدم لتقديم البيانات المدخلة.
خيارات إضافية: رابط لتسجيل مستخدم جديد (إن كان التطبيق يدعم ذلك) و رابط لاستعادة كلمة المرور في حال نسيانها.

يهدف نموذج تسجيل الدخول إلى ضمان أمان الوصول إلى المعلومات والوظائف المحمية.

إليك نموذج بسيط لتصميم نموذج تسجيل دخول باستخدام HTML وCSS. يمكنك نسخه ولصقه في ملف HTML جديد:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نموذج تسجيل دخول</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        .login-container h2 {
            text-align: center;
        }
        .login-container input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .login-container button {
            width: 100%;
            padding: 10px;
            background-color: #5cb85c;
            border: none;
            border-radius: 4px;
            color: white;
            font-size: 16px;
        }
        .login-container button:hover {
            background-color: #4cae4c;
        }
    </style>
</head>
<body>

<div class="login-container">
    <h2>تسجيل دخول</h2>
    <form>
        <input type="text" placeholder="اسم المستخدم" required>
        <input type="password" placeholder="كلمة المرور" required>
        <button type="submit">تسجيل دخول</button>
    </form>
</div>

</body>
</html>

HTML: يحتوي على هيكل نموذج تسجيل الدخول مع حقول لإدخال اسم المستخدم وكلمة المرور.
CSS: يضيف أسلوبًا للنموذج لجعله أكثر جاذبية.

كيف يمكن إضافة التحقق من صحة بيانات تسجيل الدخول؟

لإضافة التحقق من صحة بيانات تسجيل الدخول، يمكنك استخدام JavaScript للتحقق من المدخلات قبل إرسال النموذج. إليك كيفية تعديل النموذج السابق لإضافة التحقق من صحة البيانات:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نموذج تسجيل دخول</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        .login-container h2 {
            text-align: center;
        }
        .login-container input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .login-container button {
            width: 100%;
            padding: 10px;
            background-color: #5cb85c;
            border: none;
            border-radius: 4px;
            color: white;
            font-size: 16px;
        }
        .login-container button:hover {
            background-color: #4cae4c;
        }
        .error {
            color: red;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="login-container">
    <h2>تسجيل دخول</h2>
    <form id="loginForm">
        <input type="text" id="username" placeholder="اسم المستخدم" required>
        <input type="password" id="password" placeholder="كلمة المرور" required>
        <div class="error" id="error-message"></div>
        <button type="submit">تسجيل دخول</button>
    </form>
</div>

<script>
    document.getElementById('loginForm').addEventListener('submit', function(event) {
        event.preventDefault(); // منع إرسال النموذج
        
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const errorMessage = document.getElementById('error-message');

        // تحقق من صحة البيانات
        if (username === '' || password === '') {
            errorMessage.textContent = 'يرجى ملء جميع الحقول.';
        } else if (username.length < 3) {
            errorMessage.textContent = 'اسم المستخدم يجب أن يكون 3 أحرف أو أكثر.';
        } else if (password.length < 6) {
            errorMessage.textContent = 'كلمة المرور يجب أن تكون 6 أحرف أو أكثر.';
        } else {
            errorMessage.textContent = '';
            // هنا يمكنك إضافة الكود لإرسال البيانات إلى الخادم
            alert('تم تسجيل الدخول بنجاح!');
        }
    });
</script>

</body>
</html>

تم إضافة كود للتحقق من صحة البيانات عند تقديم النموذج. إذا كانت المدخلات غير صحيحة، يتم عرض رسالة خطأ.

التعرض لرسائل الخطأ: تم إضافة عنصر <div> لعرض رسائل الخطأ تحت حقول الإدخال.

عند تقديم النموذج، يتم منع الإرسال الافتراضي.
يتم التحقق من صحة المدخلات: إذا كان أحد الحقول فارغًا أو كانت الشروط الأخرى غير مستوفاة، تظهر رسالة خطأ.
إذا كانت جميع المدخلات صحيحة، يمكنك متابعة عملية تسجيل الدخول، مثل إرسال البيانات إلى الخادم.

كيف يمكن إضافة التحقق من صحة البريد الإلكتروني؟

لإضافة التحقق من صحة البريد الإلكتروني في نموذج تسجيل الدخول، يمكنك تعديل النموذج ليشمل حقلًا للبريد الإلكتروني واستخدام تعبيرات منتظمة (Regular Expressions) للتحقق من صيغة البريد. إليك كيف يمكنك فعل ذلك:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نموذج تسجيل دخول</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        .login-container h2 {
            text-align: center;
        }
        .login-container input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .login-container button {
            width: 100%;
            padding: 10px;
            background-color: #5cb85c;
            border: none;
            border-radius: 4px;
            color: white;
            font-size: 16px;
        }
        .login-container button:hover {
            background-color: #4cae4c;
        }
        .error {
            color: red;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="login-container">
    <h2>تسجيل دخول</h2>
    <form id="loginForm">نموذج تسجيل الدخول (Login Form) هو واجهة مستخدم تُستخدم للسماح للأشخاص بالدخول إلى نظام أو تطبيق عبر إدخال بيانات اعتماد مثل اسم المستخدم وكلمة المرور. يتكون عادةً من:
        <input type="email" id="email" placeholder="البريد الإلكتروني" required>
        <input type="text" id="username" placeholder="اسم المستخدم" required>
        <input type="password" id="password" placeholder="كلمة المرور" required>
        <div class="error" id="error-message"></div>
        <button type="submit">تسجيل دخول</button>
    </form>
</div>

<script>
    document.getElementById('loginForm').addEventListener('submit', function(event) {
        event.preventDefault(); // منع إرسال النموذج
        
        const email = document.getElementById('email').value;
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const errorMessage = document.getElementById('error-message');

        // تحقق من صحة البيانات
        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // تعبير منتظم للتحقق من البريد الإلكتروني

        if (email === '' || username === '' || password === '') {
            errorMessage.textContent = 'يرجى ملء جميع الحقول.';
        } else if (!emailPattern.test(email)) {
            errorMessage.textContent = 'يرجى إدخال بريد إلكتروني صحيح.';
        } else if (username.length < 3) {
            errorMessage.textContent = 'اسم المستخدم يجب أن يكون 3 أحرف أو أكثر.';
        } else if (password.length < 6) {
            errorMessage.textContent = 'كلمة المرور يجب أن تكون 6 أحرف أو أكثر.';
        } else {
            errorMessage.textContent = '';
            // هنا يمكنك إضافة الكود لإرسال البيانات إلى الخادم
            alert('تم تسجيل الدخول بنجاح!');
        }
    });
</script>

</body>
</html>

حقل البريد الإلكتروني: تم إضافة حقل جديد للبريد الإلكتروني باستخدام <input type="email">.

التحقق من صحة البريد الإلكتروني: تم إضافة تعبير منتظم للتحقق من صحة البريد الإلكتروني في JavaScript.

الرسالة: تم تعديل رسائل الخطأ لتشمل التحقق من البريد الإلكتروني.

عند تقديم النموذج، يتحقق البرنامج النصي من صحة البريد الإلكتروني وفقًا للتعبير المنتظم.
إذا كان البريد الإلكتروني غير صالح، تظهر رسالة خطأ مخصصة.
باقي الحقول يتم التحقق منها كما هو موضح سابقًا.

نسور التقنية Nusur Tech

طريقة انشاء login form كمراجعة للدروس السابقة