登录表单

本课属于 Coddy HTML 学习旅程的“JavaScript 实战”单元。第 25 课，共 27 课。

挑战

简单

创建一个用于验证登录凭据的登录表单。

我们有一个包含用户名和密码字段的登录表单。用户名预先填写为 "admin"。你的任务是在点击登录按钮时验证密码。

步骤：

在 JavaScript 中：
- 为密码输入框、登录按钮和消息元素创建变量
- 为登录按钮添加点击事件监听器
点击登录按钮时：
- 检查密码是否等于 "admin123"
- 如果正确，显示："Logged in successfully!"，并将消息类设置为 "success"
- 如果不正确，显示："Invalid password"，并将消息类设置为 "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>