Login Form Using HTML CSS And Javascript

Hello all my developer friends, welcome to this new blog post, today we have created a wonderful login and register form for you which is quite wonderful, in this we have used a little bit of JavaScript along with HTML CSS and I would like to tell you that we have used JavaScript because when a user comes to our login form page, then if the user is not already registered in the website, then first register by clicking on the register button given below. Friends, both these forms are linked to each other and both work on the same page. If the user wants to login, then he does not need to go to a separate page and can login on the same page.

Friends, to create this form, we have used a little animation so that this form looks good and the best thing about this login form is that it is completely responsive which works in every device. I have also added an image to make it look even more beautiful.

Login Form HTML Code

Friends, this is the code of HTML and we have used image and input tag in the code of HTML which you can see in the code below.

div class=”login”>
<div class=”login__content”>
<div class=”login__img”>
<img src=”assets/img/img-login.svg” alt=””>
</div>

To use the image in this HTML code, we have used img tag <img src=”assets/img/img-login.svg” alt=””>
To create the login form we have used form tag which is <form action=”” class=”login__registre” id=”login-in”>
Then to tell the user which form is which, we have put a heading <h1 class=”login__title”>Sign In</h1>
Then we have created the login form box in which we have used the div <div class=”login__box”>
<i class=’bx bx-user login__icon’></i>
<input type=”text” placeholder=”Username” class=”login__input”>
</div>
Then we have added two buttons in it <span class=”login__account”>Don’t have an Account ?</span>
<span class=”login__signin” id=”sign-up”>Sign Up</span>

Friends, we have also created the register form in this manner in which we have also added the link of social media.

				
					<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- ===== CSS ===== -->
        <link rel="stylesheet" href="assets/css/styles.css">
    
        <!-- ===== BOX ICONS ===== -->
        <link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>

        <title>Responsive Login Form Sign In Sign Up</title><link rel="preload" as="image" imagesrcset="https://developergtm.in/wp-content/uploads/2024/05/Screenshot-2024-05-13-084326.png" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergtm.in/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.1" type="font/woff2" crossorigin="anonymous" />
    </head>
    <body>
        <div class="login">
            <div class="login__content">
                <div class="login__img">
                    <img decoding="async" src="assets/img/img-login.svg" alt="">
                </div>

                <div class="login__forms">
                    <form action="" class="login__registre" id="login-in">
                        <h1 class="login__title">Sign In</h1>
    
                        <div class="login__box">
                            <i class='bx bx-user login__icon'></i>
                            <input type="text" placeholder="Username" class="login__input">
                        </div>
    
                        <div class="login__box">
                            <i class='bx bx-lock-alt login__icon'></i>
                            <input type="password" placeholder="Password" class="login__input">
                        </div>

                        <a href="#" class="login__forgot">Forgot password?</a>

                        <a href="#" class="login__button">Sign In</a>

                        <div>
                            <span class="login__account">Don't have an Account ?</span>
                            <span class="login__signin" id="sign-up">Sign Up</span>
                        </div>
                    </form>

                    <form action="" class="login__create none" id="login-up">
                        <h1 class="login__title">Create Account</h1>
    
                        <div class="login__box">
                            <i class='bx bx-user login__icon'></i>
                            <input type="text" placeholder="Username" class="login__input">
                        </div>
    
                        <div class="login__box">
                            <i class='bx bx-at login__icon'></i>
                            <input type="text" placeholder="Email" class="login__input">
                        </div>

                        <div class="login__box">
                            <i class='bx bx-lock-alt login__icon'></i>
                            <input type="password" placeholder="Password" class="login__input">
                        </div>

                        <a href="#" class="login__button">Sign Up</a>

                        <div>
                            <span class="login__account">Already have an Account ?</span>
                            <span class="login__signup" id="sign-in">Sign In</span>
                        </div>

                        <div class="login__social">
                            <a href="#" class="login__social-icon"><i class='bx bxl-facebook' ></i></a>
                            <a href="#" class="login__social-icon"><i class='bx bxl-twitter' ></i></a>
                            <a href="#" class="login__social-icon"><i class='bx bxl-google' ></i></a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!--===== MAIN JS =====-->
        <script src="assets/js/main.js"></script>
    
</body>
</html>

Login Form CSS Code

Friends, this code is css code in which we have edited and designed this login form and register form well, first of all we have added

@import url(“https://fonts.googleapis.com/css2?family=Open+ Sans:wght@400;600;700&display=swap”);

Google’s fonts have been used and other codes have also been used in the design which you can see below.

				
					/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");

/*===== VARIABLES CSS =====*/
:root{
  /*===== Colores =====*/
  --first-color: #9D4BFF;
  --first-color-dark: #23004D;
  --first-color-light: #A49EAC;
  --first-color-lighten: #F2F2F2;

  /*===== Font and typography =====*/
  --body-font: 'Open Sans', sans-serif;
  --h1-font-size: 1.5rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
}

@media screen and (min-width: 768px){
  :root{
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
  }
}

/*===== BASE =====*/
*,::before,::after{
  box-sizing: border-box;
}

body{
  margin: 0;
  padding: 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  color: var(--first-color-dark);
}

h1{
  margin: 0;
}

a{
  text-decoration: none;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

/*===== LOGIN =====*/
.login{
  display: grid;
  grid-template-columns: 100%;
  height: 100vh;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.login__content{
  display: grid;
}

.login__img{
  justify-self: center;
}

.login__img img{
  width: 310px;
  margin-top: 1.5rem;
}

.login__forms{
  position: relative;
  height: 368px;
}

.login__registre, .login__create{
  position: absolute;
  bottom: 1rem;
  width: 100%;
  background-color: var(--first-color-lighten);
  padding: 2rem 1rem;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 8px 20px rgba(35,0,77,.2);
  animation-duration: .4s;
  animation-name: animate-login;
}

@keyframes animate-login{
  0%{
    transform: scale(1,1);
  }
  50%{
    transform: scale(1.1,1.1);
  }
  100%{
    transform: scale(1,1);
  }
}

.login__title{
  font-size: var(--h1-font-size);
  margin-bottom: 2rem;
}

.login__box{
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: .5rem;
  padding: 1.125rem 1rem;
  background-color: #FFF;
  margin-top: 1rem;
  border-radius: .5rem;
}

.login__icon{
  font-size: 1.5rem;
  color: var(--first-color);
}

.login__input{
  border: none;
  outline: none;
  font-size: var(--normal-font-size);
  font-weight: 700;
  color: var(--first-color-dark);
}

.login__input::placeholder{
  font-size: var(--normal-font-size);
  font-family: var(--body-font);
  color: var(--first-color-light);
}

.login__forgot{
  display: block;
  width: max-content;
  margin-left: auto;
  margin-top: .5rem;
  font-size: var(--small-font-size);
  font-weight: 600;
  color: var(--first-color-light);
}

.login__button{
  display: block;
  padding: 1rem;
  margin: 2rem 0;
  background-color: var(--first-color);
  color: #FFF;
  font-weight: 600;
  text-align: center;
  border-radius: .5rem;
  transition: .3s;
}

.login__button:hover{
  background-color: var(--first-color-dark);
}

.login__account, .login__signin, .login__signup{
  font-weight: 600;
  font-size: var(--small-font-size);
}

.login__account{
  color: var(--first-color-dark);
}

.login__signin, .login__signup{
  color: var(--first-color);
  cursor: pointer;
}

.login__social{
  margin-top: 2rem;
}

.login__social-icon{
  font-size: 1.5rem;
  color: var(--first-color-dark);
  margin: 0 1.5rem;
}

/*Show login*/
.block{
  display: block;
}

/*Hidden login*/
.none{
  display: none;
}

/* ===== MEDIA QUERIES =====*/
@media screen and (min-width: 576px){
  .login__forms{
    width: 348px;
    justify-self: center;
  }
}

@media screen and (min-width: 1024px){
  .login{
    height: 100vh;
    overflow: hidden;
  }

  .login__content{
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-items: center;
    margin-left: 10rem;
  }

  .login__img{
    display: flex;
    width: 600px;
    height: 588px;
    background-color: var(--first-color-lighten);
    border-radius: 1rem;
    padding-left: 1rem;
  }

  .login__img img{
    width: 390px;
    margin-top: 0;
  }

  .login__registre, .login__create{
    left: -11rem;
  }

  .login__registre{
    bottom: -2rem;
  }

  .login__create{
    bottom: -5.5rem;
  }
}

Login Form Javascript Code

This is the JavaScript code with the help of which when a user comes to our login form, if he has not registered then if he clicks on the register button given below then he will go directly to the register form. We have done all this work. done with the help of javascript

				
					/*===== LOGIN SHOW and HIDDEN =====*/
const signUp = document.getElementById('sign-up'),
    signIn = document.getElementById('sign-in'),
    loginIn = document.getElementById('login-in'),
    loginUp = document.getElementById('login-up')


signUp.addEventListener('click', ()=>{
    // Remove classes first if they exist
    loginIn.classList.remove('block')
    loginUp.classList.remove('none')

    // Add classes
    loginIn.classList.toggle('none')
    loginUp.classList.toggle('block')
})

signIn.addEventListener('click', ()=>{
    // Remove classes first if they exist
    loginIn.classList.remove('none')
    loginUp.classList.remove('block')

    // Add classes
    loginIn.classList.toggle('block')
    loginUp.classList.toggle('none')
})

Live Preview:-

See the Pen Untitled by Developergtm (@developergtm) on CodePen.

Source Code Credit:- @Bedimcode

Login Form Using HTML CSS And Javascript