Create Sliding Login and Registration Form Using HTML CSS and JAVASCRIPT. A Step-by-Step Tutorial.

Author - Maketechstuff
May 20, 2023
0

In this article, you'll learn how to create a sliding login and registration form with HTML, CSS, and JavaScript. This tutorial covers everything you need to know, from creating the basic markup to adding the sliding effect with JavaScript.


This guide includes step-by-step instructions, code examples, and screenshots. It's perfect for web developers of all levels who want to learn how to create an engaging login and registration form. I have already shared the login and registration forms (just enter the keyword on search bar to see) but those are in the different pages. In this post we going to make login and sign up form in a single page with sliding functionality.


Sliding Login and Registration Form


In this article we going to make login and registration form in a single page in a one box. 

So the page have one box which have two buttons (login and sign up). Forms are below that button. Initially when page loads the slider shows the signup form. When user click on login button the slider slides to show login form. You can see demo in below YouTube video.


Video Tutorial On Sliding Registration and Login Form.



Sliding Login & Sign Up Form.

File structure:

  1. Create one folder.
  2. Open it in your code editor
  3. Create two files with name index.html and index.css

I've integrated JavaScript with in the HTML file.


Let's create the sliding login and registration form using HTML, CSS and JavaScript.


Step 1: Create basic structure of html.

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>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>

    

</body>
<script>


</script>

</html>

CSS


* {
    padding: 0px;
    margin: 0px;
    font-family: sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    background: linear-gradient(45deg, #a960ff, #ef60aa);
    position: relative;
}

Output:


Sliding Login and Registration Form background


Step 2: Create buttons with a slider.

First of all, we'll create buttons for login and signup forms. So, by clicking on that button the user can go to signup form from login form and login to signup form.


I have also added a slider on buttons, that shows the user on which form it is currently on.


Also read: Rotating button border animation on hover using HTML and CSS.


HTML


    <div class="box">
        <div class="button_box">
            <div class="slider_button"></div>
            <button type="button" class="signup_button">Sign Up</button>
            <button type="button" class="login_button">Login</button>
        </div>


    </div>

CSS


.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 400px;
    background-color: #fff;
    padding: 15px 30px;
    border-radius: 10px;
    box-shadow: 0px 5px 50px -20px rgb(0 0 0);
}
.box .button_box{
    width: 100%;
    margin: 20px 0px;
    display: flex;
    position: relative;
}
.box .button_box .signup_button,
.box .button_box .login_button{
    width: 50%;
    padding: 10px 20px;
    font-size: 25px;
    font-weight: bold;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: 0.6s;
}
.box .button_box .slider_button{
    position: absolute;
    width: 50%;
    height: 100%;
    background: linear-gradient(45deg , #1645c0 , #ed21e4);
    z-index: -1;
    border-radius: 5px;
    left: 0px;
    transition: all 0.4s cubic-bezier(0.150 , -0.100 , 0.700 , -0.500);
}


Add javascript for sliding the slider on buttons.

JavaScript



    let slider_button = document.querySelector(".slider_button");
    let signup_button = document.querySelector(".signup_button");
    let login_button = document.querySelector(".login_button");

    signup_button.style.color = "#fff";

    login_button.onclick = function () {
        slider_button.style.left = "50%";
        login_button.style.color = "#fff";
        signup_button.style.color = "#000";
    }
    signup_button.onclick = function () {
        slider_button.style.left = "0%";
        signup_button.style.color = "#fff";
        login_button.style.color = "#000";

    }

Output:


Sliding Login and Registration Form Buttons

See above youtube video for demo.


Step 3: Create login and sign up form.

Now let’s create forms (login and signup form) below the buttons(button_box class) . We are going to make both forms side by side. See the below image of how we are going to create it.


Sliding Login and Registration Form Explanation image


HTML


        <div class="form_box">
            <div class="form_slider">

                <form action="#" class="signup_form">

                    <div class="input_field_box">

                        <div class="input_box">
                            <input type="text" required>
                            <label>Username</label>
                        </div>
                        <div class="input_box">
                            <input type="text" required>
                            <label>Email Id</label>
                        </div>
                        <div class="input_box">
                            <input type="text" required>
                            <label>Create Password</label>
                        </div>
                        <div class="input_box">
                            <input type="text" required>
                            <label>Confirm Password</label>
                        </div>
                    </div>


                    <p class="link">By creating an account you agree to our <a href="#">Terms and Conditions</a></p>
                    <button type="submit">Create Account</button>
                    <div class="contact_link">Need Help ? <a href="#">Contact Us</a></div>
                </form>

                <form action="#" class="login_form">

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


                    <p class="password_link"><a href="#">Forgot Password ?</a></p>
                    <button type="submit">Login</button>
                    <div class="contact_link">Need Help ? <a href="#">Contact Us</a></div>
                </form>

            </div>
        </div>

CSS


.box .form_box{
    width: 100%;
    height: 450px;
    position: relative;
}
.box .form_slider{
    position: absolute;
    width: 200%;
    display: flex;
    left: 0%;
    transition: all 0.4s cubic-bezier(0.150 , -0.100 , 0.700 , -0.500);
    
}
.box .form_box form{
    width: 100%;
    margin: 0px 10px;
}
.box .form_box .login_form{
    padding-top: 30px;
}
.form_box form .input_field_box{
    height: 250px;
    overflow-y: auto; 
}
.form_box form .input_field_box::-webkit-scrollbar{
    display: none;
}
.form_box form .input_box{
    width: 100%;
    margin: 30px 0px;
    text-align: center;
    position: relative;
}
.form_box form .input_box input{
    width: 95%;
    font-size: 25px;
    padding: 8px 0px;
    border-width: 0px 0px 2px 0px;
    outline: none;
}
.form_box form .input_box label{
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 25px;
    pointer-events: none;
    color: #6d6d6d;
    transition: 0.3s;
}
.form_box form .input_box input:focus,
.form_box form .input_box input:valid{
    border-color: blue;
}
.form_box form .input_box input:focus + label,
.form_box form .input_box input:valid + label{
    top: -16px;
    font-size: 18px;
    color: blue;
}
.form_box form .link,
.form_box form .contact_link{
    font-size: 16px;
    text-align: center;
    margin: 20px 0px;
}
.form_box form .link a,
.form_box form .contact_link a{
    color: blue;
    text-decoration: none;
    font-weight: bold;
}
.form_box form .password_link{
    text-align: right;
    margin: 20px 0px;
    font-size: 20px;
}
.form_box form .password_link a{
    text-decoration: none;
    font-weight: bold;
    color: blue;
}
.form_box form button{
    width: 100%;
    padding: 10px 25px;
    font-size: 25px;
    border: none;
    background: linear-gradient(45deg , #1645c0 , #ed21e4);
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.form_box form button:active{
    transform: scale3d(0.9 , 0.9 , 0.9);
}


I have added one extra div tag (with class value input_field_box) inside the form tag in signup form. It's because usually the signup form has more input fields than the login form. 

As both the forms are in the same box, so if one form has more input fields than the height of that one form is increased compared to the other forms so that box height will increase too. So, we want a similar height for both forms.


That’s why I have added that extra class in the form tag of the signup form. Which has fixed height and overflow-y auto. So we can increase the number of input fields depending upon your requirement.


Output:


Sliding Login and Registration Form


Now the forms are created but as you can see that both forms are visible, we only have to show the one form at a time. So, let's hide the form which is outside the form box (class=”form_box”).


CSS


.box .form_box{
    width: 100%;
    height: 450px;
    overflow: hidden;
    position: relative;
}

Output:


Sliding Login and Registration Form

Step 4: Add JavaScript for sliding functionality of form.

So we just needs to add some lines in the previous JavaScript code that we wrote for button slider (slider which is slides on buttons that we created above).


JavaScript


    let slider_button = document.querySelector(".slider_button");
    let signup_button = document.querySelector(".signup_button");
    let login_button = document.querySelector(".login_button");
    let form_slider = document.querySelector(".form_slider");

    signup_button.style.color = "#fff";

    login_button.onclick = function () {
        slider_button.style.left = "50%";
        login_button.style.color = "#fff";
        signup_button.style.color = "#000";
        form_slider.style.left = "-100%";
    }
    signup_button.onclick = function () {
        slider_button.style.left = "0%";
        signup_button.style.color = "#fff";
        login_button.style.color = "#000";
        form_slider.style.left = "0%";

    }

So that's it sliding login and sign up form is ready see above youtube video for demo.


You can make this login and registration form automatically pop up on page loads.


You may like:

  1. How to create animated login and registration form using HTML, CSS and JavaScript.
  2. How to create a login page using HTML and CSS.
  3. How to create pop forms after some time on page loads.
  4. How to create registration form using PHP and MySQL with prepared statement.
  5. How to create an login and logout functionality with PHP and MySQL with prepared statement.


Final code: 



So that’s it sliding login and registration form is ready using html css and javascript. If you have any question or suggestion you can write in 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