Formulir Login

Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 25 dari 27.

Tantangan

Mudah

Buat Formulir Login yang memvalidasi kredensial.

Kita memiliki formulir login dengan kolom nama pengguna dan kata sandi. Nama pengguna sudah terisi dengan "admin". Tugasmu adalah memvalidasi kata sandi saat tombol login diklik.

Langkah-langkah:

Dalam JavaScript:
- Buat variabel untuk input kata sandi, tombol login, dan elemen pesan
- Tambahkan event listener klik pada tombol login
Saat tombol login diklik:
- Periksa apakah kata sandi sama dengan "admin123"
- Jika benar, tampilkan: "Logged in successfully!" dan atur class pesan menjadi "success"
- Jika salah, tampilkan: "Invalid password" dan atur class pesan menjadi "error"

Coba sendiri

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