Very Simple HTML AJAX Login Page – Free Code 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 spend time to follow up on all the basics – Web development is not something that can be learned overnight.

 

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.

 

QUICKSTART

  1. Edit login.js:
    • Line 13 – Set the server-side login script to your own xhr.open("POST", "SERVER-SCRIPT").
    • Line 16 – Set where to redirect on a valid login location.href = "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, please feel free to comment below. I try to answer 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.

 

THE LOGIN PAGE

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

 

HTML LOGIN FORM

login.html
<form id="login-form" onsubmit="return login()">
  <h1>LOGIN</h1>
  <input type="email" placeholder="Email" id="user-email" required/>
  <input type="password" placeholder="Password" id="user-pass" 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.

 

 

CSS COSMETICS

login.css
#login-form {
  max-width: 320;
  margin: 0 auto;
  padding: 20px;
  background: #fafafa;
  border: 1px solid #ccc;
}
#login-form h1 {
  margin: 0 0 20px 0;
}
#login-form input {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 20px 0;
  padding: 10px;
}
#login-form input[type=submit] {
  border: 0;
  padding: 15px;
  background: #5b77bd;
  color: #fff;
  cursor: pointer;
}
html, body { font-family: arial, sans-serif; }

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

 

 

JAVASCRIPT AJAX LOGIN

login.js
function login(){
  // (A) GET EMAIL + PASSWORD
  var data = new FormData();
  data.append('email', document.getElementById("user-email").value);
  data.append('password', document.getElementById("user-pass").value);
 
  // (B) AJAX REQUEST
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "dummy.php");
  xhr.onload = function() {
    if (this.response == "OK") { location.href = "home.html"; }
    else { alert(this.response); }
  };
  xhr.send(data);
  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, the AJAX request itself to the server-side (to verify the user name and password).
    • Remember to set the server-side script xhr.open("POST", "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… WHAT 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 Code 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 angry troll, did you see “zero coding knowledge required” anywhere? Or did you make the mistake of assumption? Is your twisted sense of self-entitlement so bad 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 *