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

Download & Notes Login Page Useful Bits & Links
The End

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK ADVICE FOR THE ABSOLUTE BEGINNERS

A full login mechanism involves:

  1. An HTML login page.
  2. A database or file to hold the list of users and passwords.
  3. A server-side script to verify the user and password.
  4. Protecting each and every page on the website, controls for login and logout.

This post only covers the HTML login page. If you want a “fully working system”, try this PHP login without a database tutorial. Otherwise, I will highly recommend hiring a freelancer for those who are unwilling to follow up with all the basics – Web development is not something that can be learned overnight.

 

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.

 

THE LOGIN PAGE

All right, for you guys who want to further customize the login page, here are some more details.

 

PART 1) HTML LOGIN FORM

login.html
<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.css
#login-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #fafafa;
  border: 1px solid #ccc;
}
#login-form h1 {
  margin: 0 0 20px 0;
}
#login-form input {
  width: 100%;
  margin: 0 0 20px 0;
  padding: 10px;
}
#login-form input[type=submit] {
  border: 0;
  padding: 15px;
  background: #5b77bd;
  color: #fff;
  cursor: pointer;
}
* {
  font-family: arial, 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

login.js
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) => { return 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";

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

SO… HOW ABOUT THE SERVER-SIDE?

dummy.php
<?php
// (A) USER & PASSWORD SHOULD BE KEPT SAFELY IN A DATABASE...
$user = [
  "name" => "John Doe",
  "email" => "john@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

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

3 thoughts on “Very Simple HTML AJAX Login Page (Free Download!)”

  1. You say “Very simple”, but you make the classic thechie mistake of assuming that people must know what things like “Set the server-side script xhr.open(“POST”, “SERVER-SCRIPT”), and what to do on server response xhr.onload = function () { … }. ” mean. People who do know don’t need this page; people who don’t, need a lot more explanation.

    1. https://code-boxx.com/faq/#nolike

      Dear toxic troll, did you see “zero coding knowledge required” anywhere? Or did you make the classic mistake of assumption? Is your sense of self-entitlement so twisted that you have to blame someone else for your unwillingness to follow up with your own lack of technical knowledge?

      Good luck with whatever you are trying to do, and good riddance.

      1. Touche. Someone obviously didn’t bother to Google “AJAX tutorial” nor spend 10 mins reading one. Another clueless noob who thought “I can plug-and-play a login system with zero coding experience” bites the dust. Nice and simple login page BTW. Saved me some time to create one.

Leave a Comment

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