In the realm of web development, crafting a secure and user-friendly login registration form is a fundamental skill. In this commentary, we’ll delve into the provided HTML, CSS, and JavaScript code that creates a student login registration system, highlighting key aspects of the code and offering insights into its functionality.

HTML Structure:

The HTML structure defines a clean and organized layout within a container. Two sections are present: one for user registration and another for login. Each section includes input fields for email and password, with the registration form also featuring a confirm password field. The interface is intuitive, allowing users to seamlessly navigate between the registration and login forms.

<!-- The main container holding both registration and login forms -->
<div class="container">
  <!-- Registration Form Section -->
  <div class="registration-form">
    <h2>Register Now</h2>
    <!-- Form for user registration -->
    <div class="form">
      <input type="text" placeholder="email"> <!-- Email input field -->
      <input type="text" placeholder="password"> <!-- Password input field -->
      <input type="text" placeholder="confirm password"> <!-- Confirm password input field -->
      <button onclick="registerUser()">Register</button> <!-- Register button -->
    <!-- Footer with a link to switch to the login form -->
    <div class="footer"> Already registered? <a href="#" data-btn-type="login">Login here</a></div>

  <!-- Login Form Section -->
  <div class="login-form">
    <!-- Form for user login -->
    <div class="form">
      <input type="text" placeholder="email"> <!-- Email input field -->
      <input type="text" placeholder="password"> <!-- Password input field -->
      <button onclick="loginUser()"> Login</button> <!-- Login button -->
    <!-- Footer with a link to switch to the registration form -->
    <div class="footer"> Not registered? <a href="#" data-btn-type="register" >Register now</a></div>


  • The code defines a container with two sections: registration-form and login-form.
  • Each form has input fields for email and password, and the registration form includes a confirm password field.
  • Buttons trigger the registerUser() and loginUser() functions for registration and login, respectively.
  • The footer provides links to switch between the registration and login forms based on the data-btn-type attribute.

CSS Styling

The CSS code is designed to enhance the visual appeal of the forms. It includes styling for a responsive and user-friendly interface. The color scheme, transitions, and layout contribute to an engaging user experience.

/* Global styling for all elements */
* {
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
  font-family: arial;

/* Styling for the body */
body {
  display: grid;
  place-content: center;
  height: 100vh;

/* Styling for the main container */
.container {
  box-shadow: 0px 10px 20px rgba(0, 0, 150, 0.3);
  position: relative;
  width: 80%;
  min-width: 400px;
  color: #fff;
  overflow: hidden;

/* Styling for both registration and login forms */
.registration-form, .login-form {
  padding: 20px;
  background: #005;

/* Styling for form elements */
.form {
  display: grid;
  gap: 20px;

/* Styling for the login form (initially positioned off-screen) */
.login-form {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  left: -100%;

/* Styling for input fields and buttons */
input, button {
  padding: 10px 10px;
  border: none;
  outline: none;

/* Styling for input fields */
input {
  border-bottom: 2px solid black;


/* Styling for buttons */
button {
  background: #ec0;
  color: #000;
  border-radius: 5px;

/* Styling for button hover effect */
button:hover {
  background: #fd0;

/* Styling for the footer */
.footer {
  padding: 10px;
  text-align: center;

/* Styling for footer links */
.footer a {
  color: #fd0;
  text-decoration: none;


  • Basic styling is applied using CSS to create a visually appealing and responsive design.
  • The container class sets the overall appearance with a shadow and limited width.
  • Different styles are defined for the registration and login forms, including input fields and buttons.
  • The color scheme provides a contrast between the forms and enhances readability.
  • The transition property is used for smooth visual effects.

JavaScript Functionality

The JavaScript code handles user interactions, registration, and login processes. Local storage is utilized to persist user data across browser sessions. The code also includes functions for switching between the registration and login forms seamlessly.

// Array to store user data
let users = [];

// Retrieve previously saved user details from localStorage
if (localStorage.getItem("users") != null && localStorage.getItem("users") != undefined) {
  users = JSON.parse(localStorage.getItem("users"));

// Event listener for clicks on footer links
let footerLinks = $(".footer a"); => {
  // Determine which form to show based on the clicked link
  let showFormType = $("data-btn-type");
  if (showFormType == "login") {
    console.log("Show Login form");
  } else if (showFormType == "register") {
    console.log("Show register form");

// Function to show the login form
function showLoginForm() {
  $(".login-form").css({ left: "0%" });

// Function to show the registration form
function showRegistrationForm() {
  $(".login-form").css({ left: "-100%" });

// Function to register a new user
function registerUser() {
  let inputField = $(".registration-form input");
  let email = inputField[0].value;
  let password = inputField[1].value;
  let confirmPassword = inputField[2].value;

  // Validate user input and register the user
  if (email.length > 5 && password.length > 5 && password === confirmPassword) {
    users.push({ email: email, password: password });
    localStorage.setItem("users", JSON.stringify(users));

// Function to login an existing user
function loginUser() {
  let inputField = $(".login-form input");
  let email = inputField[0].value;
  let password = inputField[1].value;

  // Check if the user exists and display appropriate message
  if (isUserExist(email, password)) {
    alert("Welcome back " + email + "!");
  } else {
    alert("User not found!");

// Function to check if a user with given credentials exists
function isUserExist(email, password) {
  let userExist = false;
  users.forEach((user, index) => {
    if ( === email.trim() && user.password.trim() === password.trim()) {
      userExist = true;
  return userExist;


  • The script starts by initializing an empty users array to store user data.
  • It retrieves previously saved user details from localStorage and populates the users array.
  • Event listeners are set up to handle clicks on the footer links, triggering functions to show the respective forms.
  • Functions showLoginForm() and showRegistrationForm() control the display of the login and registration forms.
  • The registerUser() function captures user input, validates it, adds the user to the array, and stores the data in localStorage.
  • The loginUser() function checks if a user exists based on the entered credentials and displays an appropriate message.


As we conclude this tutorial, you should have a fully functional student login registration system integrated into your WordPress site. Feel free to explore further customization and security enhancements to meet the specific needs of your application.

By following this guide, you’ll have a practical understanding of creating login systems.

Happy coding!

Similar Posts

Leave a Reply

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