Animated Login and Registration Form Using HTML CSS and JavaScript.

Author - Maketechstuff
April 14, 2023
0
In this article, we going to make simple design of login and sign up form using HTML, CSS and JavaScript. I have already shared the working login and register form with prepared statements using php. In this article we going to make a simple sign up and login form using HTML, CSS and JavaScript. JavaScript is just to make the design of title tag underline (read further to know more).

Login form is like security wall that allow only the known credentials to access sensitive or personal information. 


login and registration form



The forms have :
  • Floating placeholder. Actually placeholder is placed at top of input field. When focus it slightly move upward. See the demo in below video.
  • Input fields. Form input fields have required attribute. So that forms cannot submit, if input filed is empty (basic Validation).
  • The underlined at the title (login and signup). That goes from zero to 80px width after the page loaded (for designing).
  • Some links like to go to signup page , login page , forgot password link , terms and condition link, need help link etc.

Video Tutorial of Animated Login and Sign Up Form:



Let's start making it. First we going to make login form.

Login Form


File structure:
  • index.html
  • index.css

I've also used JavaScript that I've integrated within HTML file.


Step 1: Create basic structure of html.

First of all create basic structure of html and link the css file to it. 

HTML


<!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>Login Form</title>
    <link rel="stylesheet" href="login.css">
</head>
<body>
    
   

</body>
</html>

CSS


*{
    padding: 0px;
    margin: 0px;
}


Step 2: Add background and form box with title

Now let's add background and create a login form title. We'll also add the span tag, It's just for underline. Later with JavaScript we'll make this line show after a second on page load. (just for animation).


HTML


    <div class="container">
        <div class="box">
            <h3><span class="span"></span>Login</h3>
             
        </div>
    </div>

CSS


.container{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg , #c000b2aa , #8a2be2);
}
.container .box{
    width: 400px;
    background-color: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0px 9px 30px -15px rgb(0 0 0);
}
.box h3{
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    padding: 10px;
    margin-bottom: 50px;
    position: relative;
}
.box h3 span{
    position: absolute;
    width: 80px;
    height: 6px;
    background: linear-gradient(45deg , #c000b2aa , #8a2be2);
    bottom: 0px;
    border-radius: 200px;
}

Output : 


login form title



Step 3: Add input fields.

After the title, let's add input fields inside the form tag, below the title. we are going to add required attributes to the input field so that form cannot submit with an empty input field.


We'll also add a little floating placeholder. So instead of placeholder attribute we'll use label tag as a placeholder and float it on input field focus and float it when it has a valid input according to its type.


Also read: How to create dynamic placeholders using JavaScript.


HTML


<form action="#">

    <div class="input_box">
        <input type="text" required>
        <label>Username</label>
    </div>
    <div class="input_box">
        <input type="text" required>
        <label>Password</label>
    </div>

</form>

CSS


.box form .input_box{
    text-align: center;
    border: 2px solid #000;
    border-radius: 5px;
    margin-bottom: 25px;
    position: relative;
}
.box form .input_box input{
    width: 95%;
    font-size: 28px;
    padding: 10px 0px;
    border: none;
    outline: none;
}
.box form .input_box label{
    position: absolute;
    left: 8px;
    top: -12px;
    font-size: 20px;
    background-color: #fff;
    font-weight: bold;
    padding: 0px 10px;
    pointer-events: none;
    transition: 0.3s;
}

Output : 


login form input fields

Now let's make the placeholder slightly move and change colour, when the user focuses on input fields and if it has a valid value in it according to its defined type.


For float on focus we'll use :focus selector of CSS.


For float on value inside the input field we'll use :valid selector to input tag, which makes placeholder (label tag) to float, when input field has valid value according to its defined type. For :valid selector you need to add required attribute to input tag.



CSS


.box form .input_box input:focus + label,
.box form .input_box input:valid + label{
    top: -16px;
    color: blue;
    transition: all 0.5s cubic-bezier(0.60 , 4.00 , 0.255 , 1.55);
}

Output : 


login form floating placeholder


As you can see in the above image, the first input field is focused, so the placeholder (label tag) colour is changed. See the above youtube video for animation or transition applied to placeholder (label tag).


Step 4: Adding button and links

After adding input fields, now let's add a link for the forgotten password and button to submit the form. We'll also add links like signup and contact us.


Also read: Simple CSS button hover effects.


HTML


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

<button type="submit">Login</button>

CSS


.box form button{
    width: 100%;
    font-size: 30px;
    border: none;
    padding: 10px 15px;
    border-radius: 200px;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(45deg , #c000b2aa , #8a2be2);
    box-shadow: 0px 10px 30px -10px rgb(150 50 255);
    transition: 0.3s;
}
.box form button:hover{
    box-shadow: 0px 5px 10px -5px rgb(150 50 255);
}
.box form button:active{
    transform: scale3d(0.9 , 0.9 , 0.9);
}
.box form .forgot_password{
    text-align: end;
    margin: 25px 0px;
}
.box form .forgot_password a{
    font-size: 22px;
    text-decoration: none;
    font-weight: bold;
    color: #8a2be2;
}
.box form .forgot_password a:hover{
    text-decoration: underline;
}

Output : 


added forgot password link and button to login form


Adding other links below the login button, like sign up(user who doesn't have an account and wants to go to the signup page. We are going to make that signup.html later) and need a help link (when a user is having trouble to login).


HTML


<p class="signup_link">Don't have an account ? <a href="signup.html">Signup</a></p>
<p class="contact_link"><a href="#">Need help ?</a></p>

CSS


.box form .forgot_password a,
.box form .signup_link a,
.box form .contact_link a{
    font-size: 22px;
    text-decoration: none;
    font-weight: bold;
    color: #8a2be2;
}
.box form .signup_link,
.box form .contact_link{
    font-size: 20px;
    margin-top: 20px;
    text-align: center;
}
.box form .forgot_password a:hover,
.box form .signup_link a:hover,
.box form .contact_link a:hover{
    text-decoration: underline;
}

Output : 


complete login form


Now let's add some transition or animation to underline which is added below to the title tag. we want that underline to go from 0 to 80px width on page load.


To do that, we are going to use a javascript onload event.


First, we define a variable for span (which is the underline below the title). Then run the function when the window loads. In function, span width set to 80px;


JavaScript


    let span = document.querySelector(".span");
    window.onload = function(){
        span.style.width = "80px";
    }


And in the css file, we'll add transition delay and transition. Because we want to make that underline move from 0 to 80px width after 0.5 seconds, when the window is loaded. we'll  also set width: 0px initially to span tag.


CSS


	.box h3 span{
    position: absolute;
    width: 0px;
    height: 6px;
    background: linear-gradient(45deg , #c000b2aa , #8a2be2);
    bottom: 0px;
    border-radius: 200px;
 transition: all 0.3s cubic-bezier(0.445 , 2.05 , 0.855 , 0.95);
    transition-delay: 0.5s;
}

So that's it, animated login form is ready below is the final code for login form.


You may like:

  1. How to create automatic pop up form on page load using HMTL, CSS and JavaScript.
  2. How to create sliding login and registration form using HTML, CSS and JavaScript.
  3. How to float placeholder when focus on input field using HTML & CSS.
  4. How to create Login page with one side image and another side login form using HTML & CSS.




Now after login form let's make sign up form.


Sign up Form.

To make a signup form, we just duplicate the login.html and login.css and paste it in signup.html and signup.css accordingly.


Most of the things are going to same, we just have to make some changes : 

  • First of all change the title of the form, from login to sign up.
  • Add one another input field for email id and change the placeholder (label tag) of password input field to create password.
  • Remove the forgot password link and add terms and conditions link (see the below code).
  • Change the innerText of the button from login to create an account.
  • Change the signup link to login link, So by clicking on it the user can redirect to the login page.


I've changed the login form to signup form. see below code for better understanding.


Below is the final code for sign up form. 




Output : 


registration form


So that's how you can make an animated login and signup form using html css and javascript. If you have any questions and suggestions you can write in the comment section.


Tags

You may like these posts

Show more

Post a Comment

0Comments

Share your thoughts.

Post a Comment (0)
Share to other apps
Copy Post Link
To Top