LoginForm and SignUpForm using HTML CSS & JavaScript

Hello, friends today in this blog post we will be learning how to create this beautiful login and signup form using HTML CSS, and JavaScript, in this blog post login and signup form I will be teaching you how to create this beautiful form and how it can be used in your project or website.

What is a LoginForm? A login form is a form with different input fields whereby the user is supposed to fill and get signed into the website, for example, Google and Facebook after filling those forms you get signed into your account.

What is a Signup Form? Now a signup form is not the same thing as a login form I know most of you think they are the same thing since they are all forms but it's not the same, a signup form is a registration form, this form is used if the user doesn't have an account with that site like Google and Facebook if you don't have an account with those two brands you can't get account access.

How can I use this in my site/project? You can use this on your site like if I'm to create a login form for the valid users to get access to all source code on my site I can choose to do so, or a form where users fill to get attended to like a Covid form for example.

As you can see in the image preview on this blog post there are two tabs login and signup whichever tabs the user clicks on he/she gets directed quickly to that form. Now let's see the video of this project to better understand what I'm talking about.

Video Tutorial of LoginForm and SignUpForm using JavaScript

with this video I hope now you have a better understanding of how I created this login form and signup form, remember I have created two forms first the using JavaScript to change each form when the tab is clicked, and also if the tab is selected it will be colored as active, this is simple JavaScript which I trust you can make on your own after watching this video, I have also added a captcha box which is required to check if the user doesn't check this box form won't be submitted. For those friends still finding it difficult in making this I have listed all the source code files used in creating this project, you will find that below this.

LoginForm and SignUpForm using

JavaScript [Source Code]

To create this login form and signup form. First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the given codes into your file. You can also download the source code files of this login form and signup form from the given download button.

HTML CODE:

<!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>SignUp Login Form using HTML CSS & JS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <div class="login">
                <div class="text">Login</div>
                <div class="tabs">
                    <div class="tab logtab active">Login</div>
                    <div class="tab signtab">SignUp</div>
                </div>
                <!--  -->
                <form action="#">
                    <div class="eInput">
                        <input type="text" placeholder="User Name" required>
                        <i class="fa fa-user"></i>
                    </div>
                    <div class="eInput password">
                        <input type="password" placeholder="Enter Password" required>
                        <i class="fa fa-lock"></i>
                        <i class="fa fa-eye-slash show"></i>
                    </div>
                    <div class="button">
                        <button>Login</button>
                    </div>
                </form>
            </div>
            <!--  -->
            <div class="signup">
                <div class="text txt">SignUp</div>
                <div class="tabs">
                    <div class="tab logtab">Login</div>
                    <div class="tab signtab active">SignUp</div>
                </div>
                <!--  -->
                <form action="#">
                    <div class="eInput">
                        <input type="text" placeholder="First Name" required>
                        <i class="fa fa-user"></i>
                    </div>
                    <div class="eInput">
                        <input type="text" placeholder="Last Name" required>
                        <i class="fa fa-user"></i>
                    </div>
                    <div class="eInput">
                        <input type="text" placeholder="Email Address" required>
                        <i class="fa fa-envelope"></i>
                    </div>
                    <div class="eInput password2">
                        <input type="password" placeholder="Enter Password" required>
                        <i class="fa fa-lock"></i>
                        <i class="fa fa-eye-slash show2"></i>
                    </div>
                    <div class="captcha">
                        <div class="captcha-bx">
                            <input type="checkbox" name="" id="" required>
                            <div class="sm">I'm not a robot</div>
                        </div>
                        <img src="recaptcha.png" alt="">
                    </div>
                    <div class="button">
                        <button>SignUp</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS CODE:

/* Poppins Google font link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #4834d4;
}
.wrapper{
    width: 100%;
    padding: 30px 30px;
    max-width: 500px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.2);
}
.wrapper .content .text{
    text-align: center;
    font-size: 40px;
    font-weight: 600;
    position: relative;
}
.wrapper .content .text::before{
    content: '';
    position: absolute;
    top: 60px;
    left: 170px;
    width: 60px;
    height: 3px;
    border-radius: 20px;
    background: #4834d4;
}
.wrapper .content .txt::before{
    content: '';
    position: absolute;
    top: 60px;
    left: 219px;
    height: 3px;
    border-radius: 20px;
    background: #4834d4;
}
.wrapper .content .tabs{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    width: 100%;
    border: 2px solid #bfbfbf;
    border-radius: 3px;
}
.wrapper .content .tabs .tab{
    padding: 5px 50px;
    background: none;
    text-align: center;
    line-height: 30px;
    user-select: none;
    border-radius: 3px;
    margin: 0px 0px;
    cursor: pointer;
    transition: .2s ease;
}
.wrapper .content .tabs .tab:hover{
    background: #4834d4;
    color: #fff;
}
.wrapper .content .tabs .tab.active{
    background: #4834d4;
    color: #fff;
}
.wrapper .content .tabs .tab .signtab{
    margin-left: 50px;
}
.wrapper .content .eInput{
    margin-top: 30px;
    position: relative;
}
.wrapper .content .eInput input{
    width: 100%;
    height: 50px;
    padding-left: 40px;
    outline: none;
    border: 2px solid #bfbfbf;
    border-radius: 3px;
    caret-color: #4834d4;
    font-size: 18px;
    transition: all 0.2s ease;
}
.wrapper .content .eInput input::placeholder{
    font-size: 15px;
}
.wrapper .content input:valid,
.wrapper .content input:focus{
    border-color: #4834d4;
}
.wrapper .content .eInput i{
    color: #bfbfbf;
}
.wrapper .content input:valid ~ i,
.wrapper .content input:focus ~ i{
    color: #4834d4;
}
.wrapper .content .eInput i.fa-user{
    position: absolute;
    left: 20px;
    top: 18px;
}
.wrapper .content .eInput i.fa-envelope{
    position: absolute;
    left: 20px;
    top: 18px;
}
.wrapper .content .eInput i.fa-lock{
    position: absolute;
    left: 20px;
    top: 18px;
}
.wrapper .content .eInput i.show{
    position: absolute;
    right: 20px;
    top: 18px;
    cursor: pointer;
}
.wrapper .content .eInput i.show2{
    position: absolute;
    right: 20px;
    top: 18px;
    cursor: pointer;
}
.wrapper .content .button{
    margin-top: 20px;
}
.wrapper .content .button button{
    width: 100%;
    height: 50px;
    outline: none;
    border: none;
    font-size: 19px;
    background: #4834d4;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    transition: .3s ease;
}
.wrapper .content .button button:hover{
    background: #3742fa;
}
.wrapper .content .captcha{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #f2f2f2;
    border: 1px solid #bfbfbf;
    border-radius: 3px;
    padding: 10px 10px;
    margin-top: 10px;
}
.wrapper .content .captcha img{
    width: 70px;
    height: 70px;
    object-fit: cover;
}
.wrapper .content .captcha .sm{
    font-size: 19px;
    margin-left: 10px;
}
.wrapper .content .signup{
    display: none;
}
.wrapper .content .signup.active{
    display: block;
}
.wrapper .content .login.active{
    display: none;
}
.wrapper .content .captcha .captcha-bx{
    display: flex;
    align-items: center;
}
.wrapper .content .captcha input[type="checkbox"]{
    width: 40px;
    height: 40px;
}

JAVASCRIPT CODE:

const tab1 = document.querySelector(".login .logtab");
const tab2 = document.querySelector(".login .signtab");
const tab3 = document.querySelector(".signup .logtab");
const tab4 = document.querySelector(".signup .signtab");
const loginform = document.querySelector(".login");
const signupform = document.querySelector(".signup");
const visibility = document.querySelector(".show");
const visibility2 = document.querySelector(".show2");
const input = document.querySelector(".password input");
const input2 = document.querySelector(".password2 input");

tab2.addEventListener("click", (e)=>{
    signupform.classList.add("active");
    loginform.classList.add("active");
    console.log(e);
});
tab1.addEventListener("click", (e)=>{
    signupform.classList.remove("active");
    loginform.classList.remove("active");
    console.log(e);
});
tab3.addEventListener("click", (e)=>{
    signupform.classList.remove("active");
    loginform.classList.remove("active");
    console.log(e);
});
tab4.addEventListener("click", (e)=>{
    signupform.classList.add("active");
    loginform.classList.add("active");
    console.log(e);
});

// JS code to show and hide password
visibility.onclick = (e)=>{
    var x = document.querySelector(".password input");
    if (x.type === "password") {
        x.type = "text";
        visibility.classList.replace("fa-eye-slash", "fa-eye");
        visibility.style.color = "#4834d4"
    } else{
        x.type = "password";
        visibility.classList.replace("fa-eye", "fa-eye-slash");
        visibility.style.color = "#a6a6a6";
    }
}

// JS code to show and hide password
visibility2.onclick = (e)=>{
    var x = document.querySelector(".password2 input");
    if (x.type === "password") {
        x.type = "text";
        visibility2.classList.replace("fa-eye-slash", "fa-eye");
        visibility2.style.color = "#4834d4"
    } else{
        x.type = "password";
        visibility2.classList.replace("fa-eye", "fa-eye-slash");
        visibility2.style.color = "#a6a6a6";
    }
}

That's all now you've successfully created this LoginForm and SignUpForm. If you faced difficulty understanding or copying the source code you can just download the source code file from the given download button, extract the file, and use it.

LoginForm and SignUpForm using HTML CSS & JavaScript

Creative Tutorials

2 Comments

Post a Comment

Contact Form