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.

Prerequisites:

  • 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

HTML Tags

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">
<head>
  <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">
</head>
<body>
<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>

 <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>
   </form>
  <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>
    </div>
</body>
</html>

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) => {
        event.preventDefault();
        signUpForm.style.display = "none";
        loginForm.style.display = "block";
        errorMessage.innerText = "";
      });
      switchToSignup.addEventListener("click", (event) => {
        event.preventDefault();
        signUpForm.style.display = "block";
        loginForm.style.display = "none";
        errorMessage.innerText = "";
     });
      signUpForm.addEventListener("submit", (event) => {
        event.preventDefault();
        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";
          return;
        }

        // Perform sign up logic here
        signUpForm.reset();
        errorMessage.innerText = "";
      });
      loginForm.addEventListener("submit", (event) => {
        event.preventDefault();
        const email = loginForm.elements.email.value;
        const password = loginForm.elements.password.value;
        // Perform login logic here
        loginForm.reset();
        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;

Categories: CodingHTMLProject
Tags:

0 Comments

Leave a Reply

Avatar placeholder

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

Related Posts

Happy Holi

Holi Themed Design

Holi Themed Design Holi, known as the festival of colors, is a vibrant and joyous celebration in India. In this blog post, we will explore how to create a colorful Holi Themed Design using HTML, Read more…

Taking Screenshots with Python

Taking Screenshot with Python: Capturing screenshots is a common practice in various fields, from software development to data analysis. If you’re a Python learner and want to automate and improve your screenshot taking process, you’ve Read more…

Animated Cube Album using HTML, CSS

Animated Cube Album using HTML, CSS

Animated Cube Album using HTML, CSS Welcome! In this blog post, we are going to learn how to create an Animated Cube Album using HTML, CSS. This fascinating project combines creativity and technical skills to Read more…