WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Écran de connexion avancé
1107
cleanarray216
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
17 May 2025
site web moderne
26 January 2025
Un code de Redllowge
23 August 2025
Page de connexion HTML CSS avec conception d'empreintes digitales
HTML
Copy
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ekran Logowania</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="login-container"> <h1>Logowanie</h1> <form id="login-form"> <div class="input-group"> <label for="username">Nazwa użytkownika:</label> <input type="text" id="username" name="username" required> </div> <div class="input-group"> <label for="password">Hasło:</label> <input type="password" id="password" name="password" required> </div> <button type="submit">Zaloguj się</button> <p id="error-message"></p> </form> </div> <script src="script.js"></script> </body> </html>
CSS
Copy
body { font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .login-container { background-color: #ffffff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; width: 300px; } h1 { margin-bottom: 20px; text-align: center; } .input-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; } button { width: 100%; padding: 10px; background-color: #007bff; color: #ffffff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; } button:hover { background-color: #0056b3; }
JS
Copy
document.getElementById('login-form').addEventListener('submit', function(event) { event.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; // Tutaj możesz dodać logikę do obsługi logowania, np. wysyłanie danych do serwera console.log('Zalogowano użytkownika:', username); });
