Formulaire de connexion

Fait partie de la section JavaScript in Action du Journey HTML de Coddy — leçon 25 sur 27.

Défi

Facile

Créez un formulaire de connexion qui valide les identifiants.

Nous avons un formulaire de connexion avec des champs pour le nom d'utilisateur et le mot de passe. Le nom d'utilisateur est pré-rempli avec "admin". Votre tâche consiste à valider le mot de passe lorsque le bouton de connexion est cliqué.

Étapes :

En JavaScript :
- Créez des variables pour l'entrée du mot de passe, le bouton de connexion et l'élément de message
- Ajoutez un écouteur d'événement de clic au bouton de connexion
Lorsque le bouton de connexion est cliqué :
- Vérifiez si le mot de passe est égal à "admin123"
- Si c'est correct, affichez : "Logged in successfully!" et définissez la classe du message sur "success"
- Si c'est incorrect, affichez : "Invalid password" et définissez la classe du message sur "error"

Essayez vous-même

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