Anmeldeformular

Teil des Abschnitts JavaScript in Aktion der HTML-Journey von Coddy. Lektion 25 von 27.

Aufgabe

Einfach

Erstelle ein Anmeldeformular, das Anmeldedaten validiert.

Wir haben ein Anmeldeformular mit Feldern für Benutzername und Passwort. Der Benutzername ist mit "admin" vorausgefüllt. Deine Aufgabe besteht darin, das Passwort zu validieren, wenn auf die Anmeldeschaltfläche geklickt wird.

Schritte:

In JavaScript:
- Erstelle Variablen für das Passworteingabefeld, die Anmeldeschaltfläche und das Nachrichtenelement
- Füge der Anmeldeschaltfläche einen Click-Event-Listener hinzu
Wenn auf die Anmeldeschaltfläche geklickt wird:
- Prüfe, ob das Passwort "admin123" entspricht
- Wenn es korrekt ist, zeige: "Logged in successfully!" und setze die Nachrichtenklasse auf "success"
- Wenn es nicht korrekt ist, zeige: "Invalid password" und setze die Nachrichtenklasse auf "error"

Probier es selbst

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