Biểu mẫu đăng nhập

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 25 trên 27.

Thử thách

Dễ

Tạo biểu mẫu đăng nhập để xác thực thông tin đăng nhập.

Chúng ta có biểu mẫu đăng nhập với các trường tên người dùng và mật khẩu. Tên người dùng được điền sẵn là "admin". Nhiệm vụ của bạn là xác thực mật khẩu khi nhấn nút đăng nhập.

Các bước:

Trong JavaScript:
- Tạo các biến cho trường nhập mật khẩu, nút đăng nhập và phần tử thông báo
- Thêm trình lắng nghe sự kiện nhấp vào nút đăng nhập
Khi nhấn nút đăng nhập:
- Kiểm tra xem mật khẩu có bằng "admin123" không
- Nếu đúng, hiển thị: "Logged in successfully!" và đặt lớp của thông báo thành "success"
- Nếu không đúng, hiển thị: "Invalid password" và đặt lớp của thông báo thành "error"

Tự làm thử

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