WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Advanced login screen
1583
cleanarray216
Open In Editor
Publish Your Code
Recommended
22 November 2025
Cyberpunk Login Form HTML Template
26 February 2024
HTML CSS Login Form
21 July 2025
HTML TV Screen with YouTube Embed & Effects
HTML
Copy
Ekran Logowania
Logowanie
Nazwa użytkownika:
Hasło:
Zaloguj się
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); });