WEBLEB
Home
AI Editor
Chat
Login
Pro
English
English
Français
Español
Welcome Back!!!
19
0
Forms
TacoGamer
Follow
0
Remix
Open In Editor
Fullscreen
Discuss
Publish Your Code
0
HTML
Copy
<!-- A login form --> <form class="login" id="loginForm"> <h2>Welcome back 👋</h2> <input type="email" id="email" placeholder="Email" required> <input type="password" id="password" placeholder="Password" required> <button type="submit">Log in</button> <p id="message"></p> </form>
CSS
Copy
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #0f172a; font-family: system-ui, sans-serif; } .login { width: 300px; padding: 30px; border-radius: 16px; background: #1e293b; color: white; display: flex; flex-direction: column; gap: 12px; } .login input { padding: 12px; border-radius: 8px; border: 1px solid #334155; background: #0f172a; color: white; } .login button { padding: 12px; border: none; border-radius: 8px; background: #10b3a4; color: white; font-weight: bold; cursor: pointer; }
JS
Copy
document.getElementById("loginForm").addEventListener("submit", function (e) { e.preventDefault(); // stop the page from reloading var email = document.getElementById("email").value; document.getElementById("message").textContent = "Logged in as " + email + " ✅"; console.log("Login attempt:", email); });
Comments
0
Log in to join the discussion
…
