Giriş Formu

Coddy'nin HTML Journey'sinin JavaScript Eylemde bölümünün bir parçası. Ders 25 / 27.

Görev

Kolay

Kimlik bilgilerini doğrulayan bir Giriş Formu oluşturun.

Kullanıcı adı ve şifre alanları olan bir giriş formumuz var. Kullanıcı adı "admin" olarak önceden doldurulmuştur. Göreviniz, giriş düğmesine tıklandığında şifreyi doğrulamaktır.

Adımlar:

JavaScript'te:
- Şifre girişi, giriş düğmesi ve mesaj öğesi için değişkenler oluşturun
- Giriş düğmesine bir tıklama olayı dinleyicisi ekleyin
Giriş düğmesine tıklandığında:
- Şifrenin "admin123" değerine eşit olup olmadığını kontrol edin
- Doğruysa "Logged in successfully!" mesajını gösterin ve mesaj sınıfını "success" olarak ayarlayın
- Yanlışsa "Invalid password" mesajını gösterin ve mesaj sınıfını "error" olarak ayarlayın

Kendin dene

<!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>