Design a Double Slider Sign In & Sign Up Form in HTML CSS & JavaScript

Last Updated : 19 Feb, 2024

To design a double slider sign-in and sign-up form using HTML, CSS and JavaScript on a website. One can combine them into one form with a slider instead of having separate pages for logging in and registration. By clicking the buttons, we’ll slide between the login and registration sections. We’ll also make sure the registration page looks good and add icons for easy login and registration. For registering, we’ll ask for three things: your name, email, and password. For logging in, we’ll just need your email and password.

Preview Image

Design a Double Slider Sign In and Sign Up Form in HTML, CSS and JavaScript

Approach:

First, we make a folder for our project and create HTML, CSS, and JS files inside it.
In the HTML file, we design the layout for both the login and registration pages. We include input fields and add some icons using a content delivery network (CDN). We also write a welcoming message.
In the CSS file, we style the login and registration pages to make them look better. We use conditions so that when the login page is displayed, the registration page becomes less visible, and vice versa.
In the JS file, we write the main logic of our project. We make it so that when a button is clicked, the page smoothly slides from the login to the registration page, and vice versa.
By organizing our project in this way, we can easily manage the code for creating a Double Slider Sign In and Sign Up Form.

Example: The below code example implements the HTML, CSS and JavaScript to create an Sign In and Sign Up Form with interactive Double Slider operations.

HTML

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>Login and Registration Form in HTML | GFG</title> 
    <link rel="stylesheet" href="style.css" /> 
    <meta name="viewport" content="width=device-width,  
                                   initial-scale=1.0" /> 
</head> 
  
<body> 
    <div class="wrapper"> 
        <div class="title-text"> 
            <div class="title login">GeeksforGeeks</div> 
            <div class="title signup">GeeksforGeeks</div> 
            <br /><br /> 
        </div> 
        <div class="form-container"> 
            <div class="slide-controls"> 
                <input type="radio" name="slide" id="login" checked /> 
                <input type="radio" name="slide" id="signup" /> 
                <label for="login" class="slide login">Sign In</label> 
                <label for="signup" class="slide signup">Sign up</label> 
                <div class="slider-tab"></div> 
            </div> 
            <div class="form-inner"> 
                <form action="#" class="login"> 
                    <div class="field"> 
                        <label for=""><strong> 
                              Email Address</strong> 
                          </label> 
                        <input type="text" placeholder="" required /> 
                    </div> 
                    <br /> 
                    <div class="field"> 
                        <label><strong>Password</strong></label> 
                        <input type="password" placeholder="" required /> 
                    </div> 
                    <br /> 
                    <div class="field btn"> 
                        <input type="submit" value="Login" /> 
                    </div> 
                    <div class="signup-link"> 
                        Don't Have Account? <a href="">Signup</a> 
                    </div> 
                </form> 
                <form action="#" class="signup"> 
                    <div class="field"> 
                        <label for=""><strong> 
                              Full Name</strong> 
                          </label> 
                        <input type="text" placeholder="" required /> 
                    </div> 
                    <br /> 
                    <div class="field"> 
                        <label for=""><strong> 
                              Email Address</strong> 
                          </label> 
                        <input type="email" placeholder="" required /> 
                    </div> 
                    <br /> 
                    <div class="field"> 
                        <label for=""><strong> 
                              Password</strong> 
                          </label> 
                        <input type="password" placeholder="" required /> 
                    </div> 
                    <br /> 
                    <div class="field btn"> 
                        <input type="submit" value="Signup" /> 
                    </div> 
                </form> 
            </div> 
        </div> 
    </div> 
    <script src="/script.js"></script> 
</body> 
  
</html>

CSS

@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap"); 
  
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: "Poppins", sans-serif; 
} 
  
html, 
body { 
    display: grid; 
    height: 100%; 
    width: 100%; 
    place-items: center; 
    background: white; 
} 
  
.wrapper { 
    overflow: hidden; 
    max-width: 350px; 
    border: 1px solid black; 
    background: rgb(240, 236, 236); 
    padding: 30px; 
    border-radius: 5px; 
    box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1); 
} 
  
.wrapper .title-text { 
    display: flex; 
    width: 200%; 
} 
  
.wrapper .title { 
    width: 50%; 
    font-size: 30px; 
    font-family: "Times New Roman", Times, serif; 
    color: green; 
    font-weight: 600; 
    text-align: center; 
    transition: all 0.6s; 
} 
  
.wrapper .slide-controls { 
    position: relative; 
    display: flex; 
    border-radius: 10px; 
    overflow: hidden; 
    margin: 30px 0 10px 0; 
    justify-content: center; 
    border: 1px solid black; 
} 
  
.slide-controls .slide { 
    height: 100%; 
    width: 100%; 
    color: #fff; 
    font-size: 18px; 
    font-weight: 500; 
    text-align: center; 
    line-height: 48px; 
    cursor: pointer; 
    z-index: 1; 
    transition: all 0.6s ease; 
} 
  
.slide-controls label.signup { 
    color: #000; 
} 
  
.slide-controls .slider-tab { 
    position: absolute; 
    height: 100%; 
    width: 50%; 
    left: 0; 
    z-index: 0; 
    border-radius: 5px; 
    background: rgb(225, 220, 217); 
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
} 
  
input[type="radio"] { 
    display: none; 
} 
  
#signup:checked~.slider-tab { 
    left: 50%; 
} 
  
#signup:checked~label.signup { 
    color: #fff; 
    cursor: default; 
    user-select: none; 
} 
  
#signup:checked~label.login { 
    color: #000; 
} 
  
#login:checked~label.signup { 
    color: #000; 
} 
  
#login:checked~label.login { 
    cursor: default; 
    user-select: none; 
} 
  
.wrapper .form-container { 
    width: 100%; 
    overflow: hidden; 
} 
  
.form-container .form-inner { 
    display: flex; 
    width: 200%; 
} 
  
.form-container .form-inner form { 
    width: 50%; 
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
} 
  
.form-inner form .field { 
    height: 50px; 
    width: 100%; 
    margin-top: 20px; 
} 
  
.form-inner form .field input { 
    height: 100%; 
    width: 100%; 
    outline: none; 
    border-radius: 18px; 
    padding-left: 10px; 
    border: 1px solid lightgrey; 
    border-bottom-width: 2px; 
    transition: all 0.3s ease; 
} 
  
.form-inner form .field input:focus { 
    border-color: green; 
    /* box-shadow: inset 0 0 3px #fb6aae; */
} 
  
.form-inner form .field input::placeholder { 
    color: #999; 
    transition: all 0.3s ease; 
} 
  
form .field input:focus::placeholder { 
    color: #b3b3b3; 
} 
  
.form-inner form .pass-link { 
    margin-top: 5px; 
} 
  
.form-inner form .signup-link { 
    text-align: center; 
    margin-top: 30px; 
} 
  
form .btn input[type="submit"] { 
    height: 80%; 
    z-index: 1; 
    position: relative; 
    background: none; 
    border: none; 
    border: 1px solid black; 
    padding-left: 0; 
    width: 40%; 
    margin-left: 80px; 
    border-radius: 10px; 
    color: white; 
    background-color: #27421d; 
    font-size: 18px; 
    font-weight: bold; 
    cursor: pointer; 
}

Javascript

const loginText =  
    document.querySelector(".title-text .login"); 
const loginForm =  
    document.querySelector("form.login"); 
const loginBtn =  
    document.querySelector("label.login"); 
const signupBtn =  
    document.querySelector("label.signup"); 
const signupLink =  
    document.querySelector("form .signup-link a"); 
signupBtn.onclick = () => { 
  loginForm.style.marginLeft = "-50%"; 
  loginText.style.marginLeft = "-50%"; 
}; 
loginBtn.onclick = () => { 
  loginForm.style.marginLeft = "0%"; 
  loginText.style.marginLeft = "0%"; 
}; 
signupLink.onclick = () => { 
  signupBtn.click(); 
  return false; 
};