Posted inFront-End Web Design

Simple Login Form Using HTML, CSS, and JavaScript

July 11, 2025Posted inFront-End, Web Design
Simple Login Form Using HTML, CSS, and JavaScript

Login forms are one of the most common parts of any website. Whether it’s an admin panel, dashboard, or a member area — we need a login form to authenticate users. So, in this article, we’ll create a simple and clean login form using HTML, CSS, and JavaScript with basic validation. No backend required — just pure frontend logic to help you understand the basics.

🧱 Step 1: Basic HTML Structure

Let’s start with the HTML part. This will create the layout of the login form with username and password fields.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Login Form</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="login-container">
    <h2>Login</h2>
    <form id="loginForm">
      <input type="text" id="username" placeholder="Username" required />
      <input type="password" id="password" placeholder="Password" required />
      <button type="submit">Login</button>
      <p id="error-msg"></p>
    </form>
  </div>
  <script src="script.js"></script>
</body>
</html>

🎨 Step 2: Add CSS for Styling

Now we’ll write some CSS to make the form look nice and user-friendly.

/* style.css */
body {
  background: #f2f2f2;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-container {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  width: 300px;
  text-align: center;
}

.login-container h2 {
  margin-bottom: 20px;
}

.login-container input {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.login-container button {
  width: 100%;
  padding: 10px;
  background-color: #28a745;
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.login-container button:hover {
  background-color: #218838;
}

#error-msg {
  color: red;
  font-size: 14px;
  margin-top: 10px;
}

🧠 Step 3: Add JavaScript for Basic Validation

Now let’s add some JavaScript to check if the username and password are correct (just for demo purposes).

// script.js
document.getElementById("loginForm").addEventListener("submit", function (e) {
  e.preventDefault();

  const username = document.getElementById("username").value.trim();
  const password = document.getElementById("password").value.trim();
  const errorMsg = document.getElementById("error-msg");

  // Dummy login credentials
  if (username === "admin" && password === "123456") {
    errorMsg.style.color = "green";
    errorMsg.textContent = "Login successful!";
    // Redirect or do something after login
  } else {
    errorMsg.textContent = "Invalid username or password.";
  }
});

✅ Final Words

This is a basic login form with just HTML, CSS, and JavaScript — no backend, no database, just simple code to help you learn how things work. You can improve this by:

  • Connecting it with PHP or Node.js
  • Storing users in a database
  • Adding sessions or localStorage
  • Making it mobile responsive

📚 Related Post

👉 Asynchronous JavaScript: Promises, Async/Await, and Callbacks — Learn how to handle asynchronous login requests in real-world apps.

Last updated on July 12, 2025