MACRO NEPAL
SIMPLE LOGIN FORM IN HTML CSS AND JAVASCRIPT
awiskar acharya
September 26, 2025
7:55 am

Introduction

This code is a simple login form built using HTML, CSS, and JavaScript. It demonstrates the basic functionality of a login system, where the user enters a username and password to access the system. If the entered credentials are correct, the login is marked as successful; otherwise, an error message is displayed. This project is useful for beginners to understand how forms, styling, and simple validation work together in a web page.

Code Explanation

  1. HTML Structure
    • The <!DOCTYPE html> declares the document type as HTML5.
    • Inside <body>, a login container holds a form with two fields:
      • Username (<input type="text">)
      • Password (<input type="password">)
    • A Login button triggers the handleLogin() function when clicked.
    • An error message (<p> with id error-message) is shown if credentials are invalid.
  2. CSS Styling
    • body uses flexbox to center the login form both vertically and horizontally.
    • .login-container is styled with padding, rounded corners, and a shadow to make it look like a card.
    • Inputs and buttons are styled with hover effects and focus highlights for better user interaction.
    • .error is styled in red and hidden by default, only appearing when login fails.
  3. JavaScript Functionality
    • handleLogin() gets values from the username and password fields.
    • It checks if the username is "admin" and the password is "password123".
    • If correct → shows a success alert.
    • If incorrect → displays the error message by changing its display style.

Features of This Login Form

  1. User-friendly interface with a simple and clean design.
  2. Responsive layout using flexbox for better display on different screen sizes.
  3. Basic form validation to check if the entered credentials match predefined values.
  4. Error handling that displays a clear message when login fails.
  5. Interactive styling with input focus and button hover effects.
  6. Lightweight implementation using only HTML, CSS, and JavaScript.
  7. Introduces the concept of authentication, although not secure for real applications.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Login Form</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
}
.login-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 300px;
}
.login-container h2 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
.form-group input:focus {
outline: none;
border-color: #1877f2;
}
button {
width: 100%;
padding: 10px;
background-color: #1877f2;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #166fe5;
}
.error {
color: red;
font-size: 14px;
text-align: center;
margin-top: 10px;
display: none;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password" required>
</div>
<button onclick="handleLogin()">Login</button>
<p class="error" id="error-message">Invalid username or password</p>
</div>
<script>
function handleLogin() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const errorMessage = document.getElementById('error-message');
// Simple validation (for demo purposes)
if (username === "admin" && password === "password123") {
alert("Login successful!");
errorMessage.style.display = 'none';
} else {
errorMessage.style.display = 'block';
}
}
</script>
</body>
</html>

Modern HTML Login Forms – Overlay, Card Designs & UI Styles (Related to HTML Forms)

Gradient Overlay Fullscreen Login Form:
This login form uses gradient overlays across the full screen to create a colorful and modern background. It improves visual appeal while keeping the login section clear and focused.
Read more: https://macronepal.com/blog/gradient-overlay-fullscreen-overlay-login-form/

Animated Fade-In Overlay Login Form:
This form uses smooth fade-in animations when the page loads. It enhances user experience by making the login interface feel dynamic and interactive.
Read more: https://macronepal.com/blog/animated-fade-in-overlay-fullscreen-overlay-login-form/

Light Glass Look Fullscreen Login Form:
A soft glass-style UI with light transparency and blur effects. It creates a clean, elegant login interface with a modern aesthetic.
Read more: https://macronepal.com/blog/light-glass-look-fullscreen-overlay-login-form/

Dark Blur Overlay Fullscreen Login Form:
This design uses a dark blurred background overlay, helping the login form stand out while giving a professional and modern dark UI feel.
Read more: https://macronepal.com/blog/dark-blur-overlay-fullscreen-overlay-login-form/

Floating Card Login Form (HTML, CSS, JS):
A floating card-style login form that appears elevated above the background using shadows and positioning effects for a 3D-like look.
Read more: https://macronepal.com/aws/floating-card-login-form-in-html-css-and-javascript/

Gradient Card Login Form (HTML, CSS, JS):
This login form uses gradient backgrounds inside a card layout, making the interface visually attractive and modern.
Read more: https://macronepal.com/blog/gradient-card-login-form-in-html-css-and-javascript/

Image Background Card Login Form (HTML, CSS, JS):
A card-style login form placed over an image background, combining visual storytelling with functional login design.
Read more: https://macronepal.com/blog/image-background-card-login-form-in-html-css-and-javascript/

Split Card Login Form (HTML, CSS, JS):
This design splits the login card into two sections, often with an image on one side and form fields on the other, creating a balanced layout.
Read more: https://macronepal.com/aws/split-card-login-form-in-html-css-and-javascript/

Glow Neon Card Login Form (HTML, CSS, JS):
A futuristic login form using neon glow effects around the card, giving it a cyber-style appearance suitable for modern UI themes.
Read more: https://macronepal.com/blog/glow-neon-card-login-form-in-html-css-and-javascript/

Neumorphic Card Login Form (HTML, CSS, JS):
This design uses soft shadows and highlights to create a realistic 3D “pressed” effect, known as neumorphism.
Read more: https://macronepal.com/blog/neumorphic-card-login-form-in-html-css-and-javascript/

Glassmorphic Card Login Form (HTML, CSS, JS):
A glass-like transparent card design with blur effects, widely used in modern web UI for clean and elegant interfaces.
Read more: https://macronepal.com/blog/glassmorphic-card-login-form-in-html-css-and-javascript/

Simple Card Style Login Form (HTML, CSS, JS):
A basic card-based login form with minimal design, focusing on usability and clean layout without extra effects.
Read more: https://macronepal.com/blog/simple-card-style-login-form-in-html-css-and-javascript/

Simple Login Form (HTML, CSS, JS):
A straightforward login form with essential fields like username and password, built using basic HTML, CSS, and JavaScript for easy implementation.
Read more: https://macronepal.com/blog/simple-login-form-in-html-css-and-javascript/

Category : LOGIN FORM

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper