Login and Signup Page with HTML, CSS, and JS

Published by StudyMuch on

Creating a Login and Signup Page with HTML, CSS, and JS

In the world of web development, creating user-friendly and visually appealing login and signup pages is crucial for any website or application. In this tutorial, we will guide you through the process of building a sleek and responsive login and signup page using HTML, CSS, and JS (JavaScript) also provide Source Code. By the end of this tutorial, you’ll have a solid understanding of how to design and implement these essential components of user authentication.


  • Basic understanding of HTML, CSS and JavaScript.
  • Text editor or integrated development environment (IDE) of your choice.
  • Web browser for testing.

Contents in Tutorial:

  • Establishing the project structure
  • Creating HTML Structure
  • Styling with CSS
  • Adding Interactivity with JavaScript
  • Conclusion


1. Establishing the Project Structure:

Create a new folder for your project. Inside the folder, create separate files for HTML, CSS, and JavaScript. Save them as index.html, style.css, and script.js, respectively.

2. Creating HTML Structure:

In the index.html file, create the basic structure of the login and signup page using HTML tags. Include input fields for name, email, password, contact and buttons for login and signup. Place form elements inside the <form> tag.

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign UP</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Alkatra&family=EB+Garamond&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="LoginSign.css">
<div class="container">
  <form id="login-form">
   <h2>StudyMuch Edutech</h2>
   <label for="email">Email:</label>
   <input class="all-input" type="email" id="login-email" name="email" required>

   <label for="password">Password:</label>
   <input class="all-input" type="password" id="login-password" name="password" required>
   <button type="button" id="showPassword">Show</button>
   <button id="submit" type="submit">Login</button>

 <form id="signup-form">
    <h2>StudyMuch Edutech</h2>
    <label for="Name">Name:</label> 
    <input class="all-input" type="text" id="name" name="name" required>

    <label for="email">Email Id:</label>
    <input class="all-input" type="email" id="email" name="email" required>

    <label for="email">Mobile Number:</label>
    <input class="all-input" type="tel" id="email" name="email" maxlength="10" required>

    <label for="password">Password:</label>
    <input class="all-input" type="password" id="password" name="password" required>

    <label for="password">Confirm Password:</label>
    <input class="all-input" type="password" id="confirm-password" name="confirm-password" required>

    <button type="button" id="showconfirmPassword">Show Password</button>
    <button id="submit" type="submit">Sign Up</button>
  <p id="error-message" class="error"></p>

 <p class="switchaction">Already have an account? 
 <a href="#" id="switch-to-login">Login here</a></p> 

 <p class="switchaction">Don't have an account yet? 
 <a href="#" id="switch-to-signup">Registor here</a></p>

Description of the HTML code:

  • The code is enclosed within a <div> element with the class “container”.
  • It contains two <form> elements, one for login (login-form) and the other for signup (signup-form).
  • Each form has an <h2> heading displaying “StudyMuch Edtech“.
  • The login form includes email and password input fields, along with a button to show/hide the password.
  • The signup form includes input fields for name, email, mobile number, password, and confirm password. It also has a button to show/hide the confirm password.
  • Both forms have a “Submit” button for login and signup actions.
  • An empty <p> element with the ID “error-message” is provided for displaying error messages.
  • Two sets of <p> elements with the class “switchaction” offer options to switch between the login and signup forms using anchor links.

3. Styling with CSS:

In the styles.css file, add the necessary styling to create an attractive and responsive layout for the login and signup forms.

body {
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    background-image: url(https://source.unsplash.com/1600x900/?books);
.container {
    max-width: 450px;
    margin: 0 auto;
    margin-top: 100px;
    padding: 20px;
    background: rgb(2, 0, 36);
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(51, 1, 40, 1) 0%, 
    rgba(1, 69, 83, 1) 100%);
    box-shadow: 0px -1px 22px 10px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    margin-bottom: 120px;
.container h2 {
    text-align: center;
    color: rgb(3, 227, 3);
    margin: 0px;
    font-family: 'Alkatra', cursive;
form {
    display: flex;
    flex-direction: column;
label {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 5px;
    color: white;
    text-align: left;
    font-family: 'EB Garamond', serif;
.all-input {
    font-family: 'EB Garamond', serif;
    font-size: 20px;
    font-weight: bold;
    width: 98%;
    padding: 4px 8px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

/* Login and signin button style */
#submit {
    width: 100%;
    padding: 2px 0px;
    font-size: 20px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: #000000;
    cursor: pointer;
    font-family: 'Alkatra', cursive;
    margin-top: 20px;
#submit:hover {
    background: rgb(58, 180, 148);
    background: linear-gradient(90deg, rgba(58, 180, 148, 1) 0%, rgba(210, 253, 29, 1) 50%, 
    rgba(69, 248, 252, 1) 100%);
    transition: all 0.2s ease-in-out; }
.error {
    color: red;
    margin-bottom: 10px; }
#signup-form {
    display: none;}

/* password hide and show style */
#showconfirmPassword, #showPassword {
    background-color: rgb(4, 206, 4);
    color: rgb(0, 0, 0);
    border-radius: 10px;
    border: none;
    padding: 5px;
    width: 25%;
    cursor: pointer;
    font-weight: bold; }
.switchaction, a {
    font-weight: bold;
    color: rgb(255, 255, 255);
    font-family: 'EB Garamond', serif; }
.switchaction a {
    text-decoration: none;
    color: lightskyblue;

@media (max-width: 600px) {
    .container {
        max-width: 75%;
        /* margin-top: 150px; */
    .all-input {
        font-family: 'EB Garamond', serif;
        font-size: 18px;
        padding: 5px 5px;
        margin-bottom: 8px;
        border-radius: 10px;

4. Adding Interactivity with JavaScript:

In the script.js file, add the JavaScript logic to submit the login and signup forms and also add the logic to hide and show the password.

const loginForm = document.getElementById("login-form");
      const signUpForm = document.getElementById("signup-form");
      const switchToLogin = document.getElementById("switch-to-login");
      const switchToSignup = document.getElementById("switch-to-signup");
      const errorMessage = document.getElementById("error-message");
      switchToLogin.addEventListener("click", (event) => {
        signUpForm.style.display = "none";
        loginForm.style.display = "block";
        errorMessage.innerText = "";
      switchToSignup.addEventListener("click", (event) => {
        signUpForm.style.display = "block";
        loginForm.style.display = "none";
        errorMessage.innerText = "";
      signUpForm.addEventListener("submit", (event) => {
        const email = signUpForm.elements.email.value;
        const password = signUpForm.elements.password.value;
        const confirmPassword = signUpForm.elements["confirm-password"].value;
        if (password !== confirmPassword) {
          errorMessage.innerText = "Passwords do not match";

        // Perform sign up logic here
        errorMessage.innerText = "";
      loginForm.addEventListener("submit", (event) => {
        const email = loginForm.elements.email.value;
        const password = loginForm.elements.password.value;
        // Perform login logic here
        errorMessage.innerText = "";

      //show login password java script
      const showPasswordButton = document.querySelector('#showPassword');
      const passwordField = document.querySelector('#login-password');
      showPasswordButton.addEventListener('click', function () {
        const fieldType = passwordField.getAttribute('type');
        passwordField.setAttribute('type', fieldType === 'password' ? 'text': 'password');
        this.textContent = fieldType === 'password' ? 'Hide' : 'Show';

      //show Signup password java script
      const showPassword = document.querySelector('#showconfirmPassword');
      const confirmPasswordField = document.querySelector('#confirm-password');
      showPassword.addEventListener('click', function () {
        const fieldType = confirmPasswordField.getAttribute('type');
        confirmPasswordField.setAttribute('type', fieldType === 'password' ? 'text': 'password');
        this.textContent = fieldType === 'password' ? 'Hide': 'Show';

5. Conclusion:

Congratulations! You’ve successfully created a responsive login and signup page using HTML, CSS, and JS. This tutorial covered the fundamental steps for building these crucial components of user authentication. Feel free to enhance the functionality further by integrating server-side validation and connecting to a database for a complete user management system.

Learn More;


Leave a Reply

Avatar placeholder

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