نموذج تسجيل الدخول

جزء من قسم JavaScript in Action في رحلة HTML على Coddy. الدرس 25 من 27.

التحدي

سهل

قم بإنشاء نموذج تسجيل دخول (Login Form) يتحقق من بيانات الاعتماد.

لدينا نموذج تسجيل دخول يحتوي على حقول لاسم المستخدم وكلمة المرور. اسم المستخدم مملوء مسبقاً بـ "admin". مهمتك هي التحقق من صحة كلمة المرور عند النقر على زر تسجيل الدخول.

الخطوات:

في JavaScript:
- قم بإنشاء متغيرات لعنصر إدخال كلمة المرور، وزر تسجيل الدخول، وعنصر الرسالة
- أضف مستمع حدث النقر (click event listener) إلى زر تسجيل الدخول
عند النقر على زر تسجيل الدخول:
- تحقق مما إذا كانت كلمة المرور تساوي "admin123"
- إذا كانت صحيحة، اعرض: "Logged in successfully!" وقم بتعيين فئة (class) الرسالة إلى "success"
- إذا كانت غير صحيحة، اعرض: "Invalid password" وقم بتعيين فئة (class) الرسالة إلى "error"

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form id="loginForm">
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" id="username" value="admin" readonly>
            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" placeholder="Enter password">
            </div>
            <button type="button" id="loginBtn">Login</button>
            <p id="loginMsg"></p>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>