Very Simple HTML AJAX Login Page (Free Download!)

Welcome to a tutorial on how to create a simple HTML AJAX login page. Sick of all the complicated login pages, templates, and libraries? Here is a simple one made with vanilla HTML, CSS, and Javascript. Just plug-and-play this page, do up the server-side login script, and all done – Read on for more!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

TABLE OF CONTENTS

 

 

 

QUICK ADVICE FOR THE ABSOLUTE BEGINNERS

 

QUICKSTART

1. Edit login.js:
   • Set the server-side login script to your own fetch("SERVER-LOGIN-SCRIPT").
   • Set where to redirect on a valid login location.href = "MY-HOME-PAGE".
2. Captain Obvious – Complete your own server-side login sequence. Also, AJAX will only work with http://, not file://.

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

PART 1) HTML LOGIN FORM

<form id="login-form" onsubmit="return login()">
  <h1>LOGIN</h1>
  <input type="email" placeholder="Email" name="email" required>
  <input type="password" placeholder="Password" name="password" required>
  <input type="submit" value="Sign In">
</form>

This shouldn’t be too difficult to understand – Just a simple HTML form with email and password <input> fields. Also, Captain Obvious, take note that we will be using Javascript onsubmit="return login()" to handle the login.

 

 

PART 2) CSS COSMETICS

#login-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #fafafa;
  border: 1px solid #d5d5d5;
}
#login-form h1 { margin: 0 0 20px 0; }
#login-form input {
  width: 100%;
  padding: 10px;
}
#login-form input[type=email], #login-form input[type=password] {
  border: 1px solid #ededed;
  margin-bottom: 10px;
}
#login-form input[type=submit] {
  margin-top: 10px;
  border: 0;
  color: #fff;
  background: #5b77bd;
  cursor: pointer;
}
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

Well, these are just some cosmetics to make the login form look better. Feel free to change it to fit your own project theme.

 

 

PART 3) JAVASCRIPT AJAX LOGIN

function login () {
  // (A) GET EMAIL + PASSWORD
  var data = new FormData(document.getElementById("login-form"));
 
  // (B) AJAX REQUEST
  fetch("dummy.php", { method:"POST", body:data })
  .then(res => res.text())
  .then(txt => {
    if (txt == "OK") { location.href = "home.html"; }
    else { alert(txt); }
  });
  return false;
}

Some beginners may freak out looking at Javascript, but keep calm and look carefully. This is actually very straightforward.

1. First, we collect the email and password from the HTML login form.
2. Then, make the AJAX request to the server side (to verify the user name and password).
   • Remember to set the server-side script fetch("SERVER-SCRIPT").
   • Also, where to redirect on successful login – location.href = "PAGE.HTML";

 

 

 

SO… HOW ABOUT THE SERVER SIDE?

<?php
// (A) USER & PASSWORD SHOULD BE KEPT SAFELY IN A DATABASE...
$user = [
  "name" => "Jon Doe",
  "email" => "jon@doe.com",
  "password" => "12345"
];

// (B) CHECK USER & PASSWORD
$pass = $_POST["email"] == $user["email"];
if ($pass) { $pass = $_POST["password"] == $user["password"]; }
 
// (C) START SESSION IF VALID USER
if ($pass) {
  session_start();
  $_SESSION["user"] = [
    "name" => $user["name"],
    "email" => $user["email"]
  ];
}
 
// (D) RESPOND TO AJAX
echo $pass ? "OK" : "Invalid user or password";
 
/* (E) PROTECT ALL YOUR PAGES
* session_start();
* if (!is_array(user)) { header("location: http://site.com/login.html"); }
*/
 
/* (F) TO LOGOFF
 * unset($_SESSION["user"]);
 */

Yes, this dummy login script works, but here’s the thing – There are many different server-side languages and databases.

• PHP, ASP, Python, NodeJS, etc…
• MySQL, Mongodb, MSSQL, etc…

I can’t walk through every single one, and this is just an example dummy PHP server-side login handler. At least follow up with the “PHP login without a database” below if you want something fast and easy.

 

LINKS & REFERENCES

• Client-Side Form Validation – MDN
• Beginner’s AJAX tutorial – Code Boxx
• Login with a PHP MYSQL – Code Boxx
• PHP login without database tutorial – Code Boxx