Search Results for “label/Login Form” – CodingNepal

Login & Signup Form in HTML CSS JavaScript | With Source Code

CodingNepal — Sun, 19 Jun 2022 21:11:20 +0000

Hey buddy, I hope you are doing and creating awesome stuff. Today in this blog I have brought something extraordinary project for you. As you know there are lots of Form Designs I have built in my previous blog.

Today I’m going to build a responsive Login and Signup Form using HTML CSS and JavaScript. When you click on the login link the signup form will appear and when you click on the signup form the login form will appear. I have also added a password hide and shoe feature.

Login and Signup Form are the section where users have to fill in details to excess the webpage or application. A login form is used to put the user login and password that the user has already created and the signup form is the page where user can create their login details by filling in their own data as the form requires.

Have a quick look at the given image of our project [Log in & Signup Form], On the left side, you can see a login form that contains two input fields where the user needs to put their email and password, bottom of that there is forgot password link, login button. At first, when you enter the password, it will appear on the dot form to see the password character you have to click on the eye icon that is available on the password field.

Underneath the login button, you can see a signup link, actually, when you click on the signup button the signup form which is on the right side will appear and login form will disappear. I have provided some media buttons for creating and signing in both login and signup forms.

Similarly, on the signup form, you can see three input fields first input field is form email and the second and third input fields are for creating passwords, underneath the input fields there is a signup button. As with the login form you can see, there is a login link on the signup form underneath the signup button. Obviously, when you click on the signup form the login form will appear and the sign-up form will disappear.

Let’s watch the real demo of this project [Login & Signup Form] and the HTML CSS code that I have used to create this project.

Login & Signup Form in HTML CSS JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this Login and Signup Form. Before getting into the source code file I would like to explain the video tutorial that I have given.

As you have seen in the video tutorial on the Login and Signup Form. At first, there was only a signup form. On the signup form, you have seen two input fields one is for email and the second is for password. Underneath those input fields, we have seen a forgot password button. On the underside of the button there was a link and two social media buttons for login. When I clicked on the create account link, the login form disappeared and the signup form appeared.

On the signup form, there is three input field one is form email and the other two are for creating a password. Below those input fields, there was a button. Similarly lower than that there is a login link and two social media buttons for creating an account. To create the login and signup form UI, I have used HTML and CSS only. To appear and disappear those login and sign-up forms while we click on the login and signup link, a and to show and hide the password I have used some JavaScript code.

Now I believe, you can build this Login and Signup Form using HTML CSS, and JavaScript. If you are feeling difficulty creating this form. I have provided all the source codes below.

Login & Signup Form [Source Code]

To get the following HTML CSS and JavaScript code for the Login & Signup Form you need to create three files one is an HTML file and another is a CSS file and a JavaScript file. After creating these three files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.



    
    
        
        
        
         Responsive Login and Signup Form 

        
        
                
        
        
                        
    
    
        
            
                
                    Login
                    
                        
                            
                        

                        
                            
                            
                        

                        
                            Forgot password?
                        

                        
                            
                        
                    

                    
                        Don't have an account? Signup
                    
                

                

                
                    
                        
                        Login with Facebook
                    
                

                
                    
                        
                        Login with Google
                    
                

            

            

            
                
                    Signup
                    
                        
                            
                        

                        
                            
                        

                        
                            
                            
                        

                        
                            
                        
                    

                    
                        Already have an account? Login
                    
                

                

                
                    
                        
                        Login with Facebook
                    
                

                
                    
                        
                        Login with Google

/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
.container{
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4070f4;
    column-gap: 30px;
}
.form{
    position: absolute;
    max-width: 430px;
    width: 100%;
    padding: 30px;
    border-radius: 6px;
    background: #FFF;
}
.form.signup{
    opacity: 0;
    pointer-events: none;
}
.forms.show-signup .form.signup{
    opacity: 1;
    pointer-events: auto;
}
.forms.show-signup .form.login{
    opacity: 0;
    pointer-events: none;
}
header{
    font-size: 28px;
    font-weight: 600;
    color: #232836;
    text-align: center;
}
form{
    margin-top: 30px;
}
.form .field{
    position: relative;
    height: 50px;
    width: 100%;
    margin-top: 20px;
    border-radius: 6px;
}
.field input,
.field button{
    height: 100%;
    width: 100%;
    border: none;
    font-size: 16px;
    font-weight: 400;
    border-radius: 6px;
}
.field input{
    outline: none;
    padding: 0 15px;
    border: 1px solid#CACACA;
}
.field input:focus{
    border-bottom-width: 2px;
}
.eye-icon{
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 18px;
    color: #8b8b8b;
    cursor: pointer;
    padding: 5px;
}
.field button{
    color: #fff;
    background-color: #0171d3;
    transition: all 0.3s ease;
    cursor: pointer;
}
.field button:hover{
    background-color: #016dcb;
}
.form-link{
    text-align: center;
    margin-top: 10px;
}
.form-link span,
.form-link a{
    font-size: 14px;
    font-weight: 400;
    color: #232836;
}
.form a{
    color: #0171d3;
    text-decoration: none;
}
.form-content a:hover{
    text-decoration: underline;
}
.line{
    position: relative;
    height: 1px;
    width: 100%;
    margin: 36px 0;
    background-color: #d4d4d4;
}
.line::before{
    content: 'Or';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFF;
    color: #8b8b8b;
    padding: 0 15px;
}
.media-options a{
    display: flex;
    align-items: center;
    justify-content: center;
}
a.facebook{
    color: #fff;
    background-color: #4267b2;
}
a.facebook .facebook-icon{
    height: 28px;
    width: 28px;
    color: #0171d3;
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}
.facebook-icon,
img.google-img{
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}
img.google-img{
    height: 20px;
    width: 20px;
    object-fit: cover;
}
a.google{
    border: 1px solid #CACACA;
}
a.google span{
    font-weight: 500;
    opacity: 0.6;
    color: #232836;
}

@media screen and (max-width: 400px) {
    .form{
        padding: 20px 10px;
    }
    
}

 const forms = document.querySelector(".forms"),
      pwShowHide = document.querySelectorAll(".eye-icon"),
      links = document.querySelectorAll(".link");

pwShowHide.forEach(eyeIcon => {
    eyeIcon.addEventListener("click", () => {
        let pwFields = eyeIcon.parentElement.parentElement.querySelectorAll(".password");
        
        pwFields.forEach(password => {
            if(password.type === "password"){
                password.type = "text";
                eyeIcon.classList.replace("bx-hide", "bx-show");
                return;
            }
            password.type = "password";
            eyeIcon.classList.replace("bx-show", "bx-hide");
        })
        
    })
})      

links.forEach(link => {
    link.addEventListener("click", e => {
       e.preventDefault(); //preventing form submit
       forms.classList.toggle("show-signup");
    })
})

If you face any difficulties while creating your Login and Signup Form or your code is not working as expected, you can download the source code files for this Login and Registration Form for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

Make a Website in HTML CSS & JavaScript | Website with Source Code

CodingNepal — Sat, 28 May 2022 21:11:19 +0000

Hello friend, I hope you are doing and creating awesome projects. As usual today in today’s blog, you will learn to create a Responsive Website in HTML CSS, and JavaScript this website will be focused on the coffee base. The website will have a header, navigating menu bar, sidebar, sliding home content and testimonial footer, and others as a normal website need to have. Earlier I created a Personal Portfolio Website, that you guys liked so much.

A website is a combination of web pages and sections like a navigation menu bar, side navigation bar (for small media devices), home section, footer, images, animations, and others. We can find many websites on the internet like e-commerce websites, sports websites, coffee shops or production websites, and news websites, although they have similar bases and functions except for text content and images.

Have a quick look at the given preview of our website. On the image, we can see an image of coffee and what coffee means, and we can get the idea that this is a coffee website. On the image, we can see the logo, navigation bar home section, images menu section, about section, testimonial, newsletter, and footer. There are lots of other features that are hidden and or unshown.

I would like to show the virtual demo of this coffee website, by showing the video tutorial you will see the responsive part of this website and animations. Also, you will get an idea of how all the HTML CSS and vanilla JavaScript code works properly behind this website.

Make a Website in HTML CSS & JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to build this coffee website. Before getting into the source code file, I would like to elaborate on the given video tutorial of our coffee website.

As you have seen on the video tutorial of the coffee website. On the screen, we have seen a home section with a sliding feature and a navigation menu bar. When I scrolled the website that navigation got coffee color and it stuck on the top. After continued scrolling, we have seen, the menu, review, newsletter, and footer sections with beautiful animations. Have you noticed that when I scrolled the home section a little bit the scroll button activate, which helped us to go to the home section of the website?

Also, we have seen a navigation link indicator that shows us our section where also we can reach all the main sections by clicking on the navigation link. For the UI and UX, I used HTML and CSS and for the toggle sidebar, while the website got small screen-sized devices, I used JavaScript. To slide the home section image and testimonial I have used swipe.js and for the animation on a scroll, I used scroll reveal.

On the responsive part, we have seen our horizontal navigation menu bar converted into the vertical sidebar and other sections also fitted as per screen sizes. The website fitted perfectly on all-screen media devices like laptops, tablets,s, and mobile phones.

I hope now you can make this coffee website using HTML CSS and JavaScript, If you are feeling difficulty creating this website you can follow the given tutorial, for follow the tutorial I have given the files and the link is in the video description. If you want to download all the source code and images that I have used for this coffee website, The download button has given below.

Coffee Website [Source Code]

You can download the source code files for this Responsive Coffee Website for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

Responsive Registration Form in HTML CSS & JavaScript | With Source Code

CodingNepal — Tue, 19 Apr 2022 21:11:19 +0000

Hello friend, I hope you are doing great, today in this blog you will learn to create a Responsive Registration Form in HTML CSS & JavaScript With Multi-Pages. There are lots of Forms already I have created like login form, registration or sign up form, login and registration form and contact us form.

Registration Forms are the combination of various input fields, where users need to fill in their details to register on the webpage or application to get excess.

Let’s have a quick look at the given image of our project [Registration Form], on the webpage. You can see there are two forms, actually, in our real project there will appear only one form and when you filled all your details and click on the Next button the first form will disappear and the second form will appear.

Now, you can watch the real demo of our Responsive Registration Form with all the HTML CSS, and JavaScript code that I have used to create this sign-up form.

Registration Form in HTML CSS & JavaScript

I have provided all the HTML CSS and JavaScript code that I have used to create this Registration form Signup Form. Before getting into the source code, I would like to explain some basic things about the given video tutorial on the registration form.

As you have seen in the given video tutorial of our project [Responsive Registration Form ]. At first, we have seen only one registration form with different inputs filed with one button. Also when I focused on the input field little shadow appear, which makes a better user experience (UX). When I clicked on the Next button without filling the input field, we could not get into their page.

After filling all the input fields then, we moved to another page. On the other page, we have to fill in different details and that input field had two buttons. All the user interface (UI) is created by using HTML and CSS to move the page I have used some JavaScript code.

I believe now you can build this Responsive Registration Form by using HTML CSS and JavaScript, if you are feeling difficulty, I have provided all the HTML CSS and JavaScript code below, that I have used to create this registration form or signup form.

Registration Form [Source Code]

To get the following HTML CSS and JavaScript code for the Responsive Registration Form you need to create three files one is an HTML file and another is a CSS file and a JavaScript file. After creating these three files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.





    
    
    
    
    
    
     
    
    

   Responsive Regisration Form 


    
        Registration

        
            
                
                    Personal Details

                    
                        
                            Full Name
                            
                        

                        
                            Date of Birth
                            
                        

                        
                            Email
                            
                        

                        
                            Mobile Number
                            
                        

                        
                            Gender
                            
                        

                        
                            Occupation
                            
                        
                    
                

                
                    Identity Details

                    
                        
                            ID Type
                            
                        

                        
                            ID Number
                            
                        

                        
                            Issued Authority
                            
                        

                        
                            Issued State
                            
                        

                        
                            Issued Date
                            
                        

                        
                            Expiry Date
                            
                        
                    

                    
                 
            

            
                
                    Address Details

                    
                        
                            Address Type
                            
                        

                        
                            Nationality
                            
                        

                        
                            State
                            
                        

                        
                            District
                            
                        

                        
                            Block Number
                            
                        

                        
                            Ward Number
                            
                        
                    
                

                
                    Family Details

                    
                        
                            Father Name
                            
                        

                        
                            Mother Name
                            
                        

                        
                            Grandfather
                            
                        

                        
                            Spouse Name
                            
                        

                        
                            Father in Law
                            
                        

                        
                            Mother in Law
                            
                        
                    

                    
                        
                            
                            Back

/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4070f4;
}
.container{
    position: relative;
    max-width: 900px;
    width: 100%;
    border-radius: 6px;
    padding: 30px;
    margin: 0 15px;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.container header{
    position: relative;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}
.container header::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 3px;
    width: 27px;
    border-radius: 8px;
    background-color: #4070f4;
}
.container form{
    position: relative;
    margin-top: 16px;
    min-height: 490px;
    background-color: #fff;
    overflow: hidden;
}
.container form .form{
    position: absolute;
    background-color: #fff;
    transition: 0.3s ease;
}
.container form .form.second{
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
}
form.secActive .form.second{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
form.secActive .form.first{
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
}
.container form .title{
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 500;
    margin: 6px 0;
    color: #333;
}
.container form .fields{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
form .fields .input-field{
    display: flex;
    width: calc(100% / 3 - 15px);
    flex-direction: column;
    margin: 4px 0;
}
.input-field label{
    font-size: 12px;
    font-weight: 500;
    color: #2e2e2e;
}
.input-field input, select{
    outline: none;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    border-radius: 5px;
    border: 1px solid #aaa;
    padding: 0 15px;
    height: 42px;
    margin: 8px 0;
}
.input-field input :focus,
.input-field select:focus{
    box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.input-field select,
.input-field input[type="date"]{
    color: #707070;
}
.input-field input[type="date"]:valid{
    color: #333;
}
.container form button, .backBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    max-width: 200px;
    width: 100%;
    border: none;
    outline: none;
    color: #fff;
    border-radius: 5px;
    margin: 25px 0;
    background-color: #4070f4;
    transition: all 0.3s linear;
    cursor: pointer;
}
.container form .btnText{
    font-size: 14px;
    font-weight: 400;
}
form button:hover{
    background-color: #265df2;
}
form button i,
form .backBtn i{
    margin: 0 6px;
}
form .backBtn i{
    transform: rotate(180deg);
}
form .buttons{
    display: flex;
    align-items: center;
}
form .buttons button , .backBtn{
    margin-right: 14px;
}

@media (max-width: 750px) {
    .container form{
        overflow-y: scroll;
    }
    .container form::-webkit-scrollbar{
       display: none;
    }
    form .fields .input-field{
        width: calc(100% / 2 - 15px);
    }
}

@media (max-width: 550px) {
    form .fields .input-field{
        width: 100%;
    }
}

const form = document.querySelector("form"),
        nextBtn = form.querySelector(".nextBtn"),
        backBtn = form.querySelector(".backBtn"),
        allInput = form.querySelectorAll(".first input");


nextBtn.addEventListener("click", ()=> {
    allInput.forEach(input => {
        if(input.value != ""){
            form.classList.add('secActive');
        }else{
            form.classList.remove('secActive');
        }
    })
})

backBtn.addEventListener("click", () => form.classList.remove('secActive'));

If you face any difficulties while creating your Responsive Registration Form or your code is not working as expected, you can download the source code files for this Registration Form for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Show & Hide Password in HTML CSS & JavaScript

CodingNepal — Sun, 06 Mar 2022 21:11:19 +0000

Hello friend, I hope you are doing well. Today you are going to learn how to show and hide passwords in the input field by clicking on the toggle using HTML CSS and JavaScript. There are lots of Login Forms I have created with different animations and features. But many of you have requested me to create input filed label up animation and toggling password visibility, so here we go.

As a definition, password show and hide mean showing or hiding the letter of the passwords by clicking on the toggle button. This type of feature is mostly added to the form for security purposes because many users do not want to show their passwords to those who are around them.

Let’s have a look at the given image of our project [how to show and hide password], as you can see on the given image. On the first input field you can see we can’t see the letter and eye icon is in hiding condition and on the second password field we can see the letter of password clearly and the eye icon is in show condition.

You can watch the real demo of this project [toggle to show and hide password], and all the HTML CSS, and JavaScript code that I have used to create this project. By watching the full video tutorial you will know how all codes are working behind this project.

Show & Hide Password in HTML CSS & JavaScript

I have provided all the HTML CSS and JavaScript code that I have used to create this project [Show and hide password], before jumping into the source code file you need to know some important points out of this video tutorial.

As you have seen in the video tutorial, At first we can see a password field with a grey border and eye icon, when I focused on the password field password text moved upward, border and eye icon color changed into the blue with the beautiful animation. To make this animation I have used only HTML CSS. After that, I typed some letters which are not visible and when I clicked on the eye icon password was visible and also eye icon changed at the same time, to make these changes I have used some JavaScript code.

I hope, now you can make this project [Show and Hide Password] easily. If you are feeling difficulty building this project, I have provided all the source code below.

Show and Hide Password [Source Code]

To take the source code of this Login and Registration Form Template first, you need to create two files: an HTML file and a CSS file. After creating these two files then you can copy-paste the following source code. You can also directly download all source codes of this Login and Registration Form by clicking on the given download button.





    
    
    
    
    
    
    
    
    
     Password Show & Hide


    
        
            
            Password

/* Google Font Import - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4070f4;
}

.container{
    position: relative;
    max-width: 340px;
    width: 100%;
    padding: 20px;
    border-radius: 6px;
    background-color: #fff;
}

.container .input-box{
    position: relative;
    height: 50px;
}

.input-box input{
    position: absolute;
    height: 100%;
    width: 100%;
    outline: none;
    border: 2px solid #ccc;
    border-radius: 6px;
    padding: 0 35px 0 15px;
    transition: all 0.2s linear;
}

input:is(:focus, :valid){
    border-color: #4070f4;
}

.input-box :is(label, i){
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    transition: all 0.2s linear;
}

.input-box label{
    left: 15px;
    pointer-events: none;
    font-size: 16px;
    font-weight: 400;
}

input:is(:focus, :valid) ~ label{
    color: #4070f4;
    top: 0;
    font-size: 12px;
    font-weight: 500;
    background-color: #fff;
}

.input-box i{
    right: 15px;
    cursor: pointer;
    font-size: 20px;
}

input:is(:focus, :valid) ~ i{
    color: #4070f4;
}

If you face any difficulties while creating your this Password Show and Hide Project or your code is not working as expected, you can download the source code files for this Show or Hide Password Project for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Useful HTML Tags & Attributes with Example

CodingNepal — Fri, 17 Dec 2021 21:11:19 +0000

Hello friend, I hope you are doing well. Today in the blog you will learn some important and very useful HTML tags and attributes with examples. As you know there are lots of HTML and CSS designs we have created before.

HTML stands for Hypertext Markup Language.

Some of the most important and useful HTML tags and attributes that we are going to cover in this blog are given below.

Details & Summary Tag.
Select & Option Tag
Select, Optgroup & Option Tag
Input, Datalist & Option Tag
Input, Datalist & Option Tag
Input, Datalist & Option Tag
Input Tag & Attribute
Mark Tag
Progress Tag
Meter Tag
Contenteditable Attributes
Title Attribute

Rather than seeing only HTML tags’ names and attributes, I highly recommend you to watch the full video tutorial of the given tags and attribute which has given below. In this video, I have shown all HTML tags and attributes for examples.

Useful HTML Tags & Attributes with Example

I have provided all the source code of these HTML tags and attributes, before jumping into the source code files, you need to know a short explanation of the HTML tags and attributes that you have seen on the video.

As you have seen in the video tutorial. At first, we have seen the Details and a summary tag. When I create details tag only a dropdown icon appears with text and clickable features and anything that we write inside that tag that was disappeared and by clicking on the icon we can see the inside content of the detail tag.

Like this, we can do lots of thing by using these HTML tags and attribute that you have seen on the video.

You Might Like This:

To get the following code of HTML tags and Attributes. You need to create an HTML file. After creating that then you can copy-paste the given codes on your HTML document. You can also download all source code files from the given download button.




  
    
      Useful HTML Tags and Attributes | CodingLab

Email Validation in HTML CSS and JavaScript

CodingNepal — Fri, 02 Jul 2021 21:11:18 +0000

Hello friends, To we are going to learn Email Validation in HTML CSS, and JavaScript. There are various CSS designs that I have created before like Login Form or Sign up Form and Contact Form but to date, I haven’t validated the email address. So without further ado let’s get started.

Email validation means the process of validating an email to get the right email ID from the user while they going to log in or signup. Mostly an Email validation program is used in the login for registration form.

Let’s have a look at the given image of our program [Email Validation in HTML CSS and JavaScript], There are two images inside the image. On the top image, we can see a red border, exclamation sign, and letter with some error text, that undoubtedly shows us that is an invalid email

In the second image we can see the correct email id inside the input field that’s why our input field’s border is in blue color, tick sign at right, and some message on the bottom, that shows us that the email is valid.

Actually very first that email input field’s border color is grey and the email field looks like it is in an inactive condition. When we click or focus on the input field its border-color changes into blue and the input field looks like it is at the active condition

To see the virtual example of this program [Email Validation in HTML CSS and JavaScript], and every code that I have used to make this email validation perfectly work, you have to watch the video tutorial of this email validation in HTML CSS and JavaScript which I have given below:

Email Validation in HTML CSS and JavaScript

I have provided all source code files this Email validation in HTML CSS and JavaScript below, but till then let me explain some important topics that we have seen on the video tutorial.

As you have seen on the video tutorial [Email Validation in HTML CSS and JavaScript]. At first, we saw one input field with a grey border, a placeholder with the text enter your email, and a button. When I focused on the input field, its border colors turns into blue.

When I clicked in the check button without entering an email id the input fields border transform into red, one sign, and some error text “email can’t be blank” appears with red color. When I entered an invalid email id then all colors and signs are in constant form but the error text changes into “please enter a valid email”.

But, the last time when I entered a valid email border changes into blue color, the error sign in to tick sign, and the error text changes to “this is a valid email” with blue color. These all color combination, text and sign helps to find out the valid email address. I have used regular expression [regex] pattern to validate this email perfectly

I hope now you have understood all concepts and code behind creating this simple email validation in JavaScript, and I assume that you can easily build this type of email validation. If you are feeling difficulties to make this program then you can take all source code of this email validation form below, you can also download all source code files.

Email Validation HTML CSS JavaScript [Source Code]

To take all HTML CSS and JavaScript code of this program [Email Validation in HTML CSS and JavaScript] from, but at first, you need to create three files one is HTML file another is CSS file and the last one is JavaScript file. After creating these three files, you can copy-paste all codes in your document. You can also download all source code files by clicking on the given download button.

To get the HTML code of this email validation, create a file on your computer with the name of index.html and copy-paste the given HTML code in your document.




  
    
    Email Validation in JavaScript | CodingLab

 /* Google Font CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#4671EA,#AC34E7);
  padding: 0 20px;
}
form{
  max-width: 550px;
  width: 100%;
  background: #fff;
  padding: 30px;
  border-radius: 4px;
}
form .input-box{
  display: flex;
  height: 55px;
  align-items: center;
  position: relative;
}
.input-box input{
  height: 100%;
  outline: none;
  border: 2px solid #bfbfbf;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  padding: 0 45px;
  transition: all 0.3s ease;
}
.input-box input.input{
  width: 75%;
  margin-right: 20px;
}
form.valid .input-box input.input{
  border-color: #4671EA;
}
.input-box input.input:focus{
  border-color: #4671EA;
}
form.error input.input{
  border-color: #de0611;
}
.input-box input.button{
  width: 25%;
  padding: 0;
  color: #fff;
  background: #4671EA;
  border: none;
  cursor: pointer;
}
.input-box input.button:hover{
  background: #1748cf;
}
.input-box i{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}
.input-box i.email-icon{
  color: #bfbfbf;
  left: 15px;
  transition: all 0.3s ease;
}
form.valid i.email-icon{
  color: #1748cf;
}
.input-box input.input:focus ~ i.email-icon{
  color: #1748cf;
}
.input-box .error-icon,
.input-box .passed-icon{
  color: #de0611;
  left: calc(75% - 60px);
  display: none;
}
form.error .error-icon{
  display: block;
}
.input-box .passed-icon{
  color: #1748cf;
}
form.valid .passed-icon{
  display: block;
}
form .text{
  color: #de0611;
  font-size: 16px;
  font-weight: 500;
  margin: 10px 0 -10px 2px;
}
form.valid .text{
  color: #1748cf;
}

If you face any difficulties while creating your Valid Email Checker or your code is not working as expected, you can download the source code files for this Valid Email Checker for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Responsive Login and Registration Form in HTML and CSS

CodingNepal — Fri, 25 Jun 2021 21:11:18 +0000

Hello friends, today we are going to learn How to Create a Responsive Login and Registration Form Template in HTML and CSS. There are a lot of Forms Design that I have created before but, to date, I have not created login and registration forms together or on one page.

What is the Login and Registration Form

Login Form means the login page or section where users need to enter their login details like email, phone number, and password. Registration form is the process to register user details to make login details for entry in the particular page or website.

In the login form section, we can make two input fields one is for the user email address or phone number and another for password and this is mandatory and in the registration form we have to add some extra input fields like the input field of name, phone number, password and other.

Let’s have a look at the image of the Login and Registration Form Template. There you can see only Login Form but when you click on the Signup now the right side image smoothly flips into the left side then the Signup form appears and Login Form Hides.

I have made this Responsive Login and Registration Form in HTML and CSS only and I have not used any single code of javascript for building this Login and Registration Form. I promise that you can easily understand all the HTML CSS code that I have used to make this Form.

To see the real example of this Login and Registration, please do watch the video tutorial of this design. After watching the tutorial you will definitely understand that how HTML and CSS code is working to make this Login and Registration Page Perfectly.

Login and Registration Form in HTML and CSS | Video Tutorial

You will get this Login and Registration Form Template Free, I have provided all HTML and CSS source code of this template below. Before jumping into the source code, you nee to know some important points of this project.

As you have seen on the video tutorial of Responsive Login and Registration Form in HTML CSS. At first, we could see only the Login Form and Registration Form had hidden behind the image. When I clicked on the Signup link, that image smoothly flip to the left direction, and the Registration Form appears and the Login Form disappears.

I have used HTML input’s checkbox to make the Signup and Login link clickable, you can do this by using JavaScript code but for this simple thing, I had gone for HTML’s Checkbox. To make this Login and Registration Form responsive I have used a CSS media query.

Now I believe, you can build and this Login and Registration Form easily but if you are feeling difficulty creating this Form, I have provided all source code of this Login and Registration Form below, from there you can copy or download it all source code files.

Login & Registration Form Template | Source Code

For taking the source code of this Login and Registration Form Template first, you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the following source code. You can also directly download all source codes of this Login and Registration Form by clicking on the given download button.




  
    
     Login and Registration Form in HTML & CSS | CodingLab 
    
    
    
    
   

  
    
    
      
        
        
          Every new friend is a 
 new adventure
          Let's get connected
        
      
      
        
        
          Complete miles of journey 
 with one step
          Let's get started
        
      
    
    
        
          
            Login
          
            
              
                
                
              
              
                
                
              
              Forgot password?
              
                
              
              Don't have an account? Sigup now
            
        
      
        
          Signup
        
            
              
                
                
              
              
                
                
              
              
                
                
              
              
                
              
              Already have an account? Login now

/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7d2ae8;
  padding: 30px;
}
.container{
  position: relative;
  max-width: 850px;
  width: 100%;
  background: #fff;
  padding: 40px 30px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  perspective: 2700px;
}
.container .cover{
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 50%;
  z-index: 98;
  transition: all 1s ease;
  transform-origin: left;
  transform-style: preserve-3d;
}
.container #flip:checked ~ .cover{
  transform: rotateY(-180deg);
}
 .container .cover .front,
 .container .cover .back{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.cover .back{
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
.container .cover::before,
.container .cover::after{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: #7d2ae8;
  opacity: 0.5;
  z-index: 12;
}
.container .cover::after{
  opacity: 0.3;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
.container .cover img{
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 10;
}
.container .cover .text{
  position: absolute;
  z-index: 130;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cover .text .text-1,
.cover .text .text-2{
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.cover .text .text-2{
  font-size: 15px;
  font-weight: 500;
}
.container .forms{
  height: 100%;
  width: 100%;
  background: #fff;
}
.container .form-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-content .login-form,
.form-content .signup-form{
  width: calc(100% / 2 - 25px);
}
.forms .form-content .title{
  position: relative;
  font-size: 24px;
  font-weight: 500;
  color: #333;
}
.forms .form-content .title:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 25px;
  background: #7d2ae8;
}
.forms .signup-form  .title:before{
  width: 20px;
}
.forms .form-content .input-boxes{
  margin-top: 30px;
}
.forms .form-content .input-box{
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
  margin: 10px 0;
  position: relative;
}
.form-content .input-box input{
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
.form-content .input-box input:focus,
.form-content .input-box input:valid{
  border-color: #7d2ae8;
}
.form-content .input-box i{
  position: absolute;
  color: #7d2ae8;
  font-size: 17px;
}
.forms .form-content .text{
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.forms .form-content .text a{
  text-decoration: none;
}
.forms .form-content .text a:hover{
  text-decoration: underline;
}
.forms .form-content .button{
  color: #fff;
  margin-top: 40px;
}
.forms .form-content .button input{
  color: #fff;
  background: #7d2ae8;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  transition: all 0.4s ease;
}
.forms .form-content .button input:hover{
  background: #5b13b9;
}
.forms .form-content label{
  color: #5b13b9;
  cursor: pointer;
}
.forms .form-content label:hover{
  text-decoration: underline;
}
.forms .form-content .login-text,
.forms .form-content .sign-up-text{
  text-align: center;
  margin-top: 25px;
}
.container #flip{
  display: none;
}
@media (max-width: 730px) {
  .container .cover{
    display: none;
  }
  .form-content .login-form,
  .form-content .signup-form{
    width: 100%;
  }
  .form-content .signup-form{
    display: none;
  }
  .container #flip:checked ~ .forms .signup-form{
    display: block;
  }
  .container #flip:checked ~ .forms .login-form{
    display: none;
  }
}

If you face any difficulties while creating your Responsive Login and Registration Form or your code is not working as expected, you can download the source code files for this Login and Signup Form for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Popup Login Form Design in HTML & CSS

CodingNepal — Wed, 01 Jul 2020 07:47:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Popup Login Form Design using only HTML & CSS. Earlier I have shared many blogs on how to create Login Form Design with Password Show Hide Toggle Button. And, now I’m going to create a Modal Login Form using only HTML & CSS.

Popup boxes (or dialog boxes) are modal windows used to inform or alert the user, or to get input from the user. Popup boxes restrict the user from accessing other features of a program until the popup is closed, so they should not be overused.

As you have seen on many websites there is a dialog box that is based on JavaScript or JavaScript library. But today I’ll share with you this program (Popup or Modal Login Form) using only HTML & CSS. In this program, at first, on the webpage, there is a white button with “View Form” text. And when you click on that button then the Popup or Modal Login Form will be displayed.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Popup or Modal Login Form).

Video Tutorial of Modal or Popup Login Form Design

As you have seen the pure CSS Modal or Popup Login Form Design in the video. This form is very simple and easy to create. If you are a beginner and you know HTML & CSS then you can also create this type of Modal or Popup Login Form. But if you know JavaScript then you can add advanced features in this form and take this program at the next level.

If you like this program (Popup or Modal Login Form) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this Modal or Popup Login Form on your websites, projects, and HTML pages.

Modal or Popup Login Form Design [Source Codes]

To create this program (Popup or Modal Login Form). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      Popup Login Form Design | CodingNepal
      
      
   
   
      
         
         View Form
         
            
            
               Login Form
            
            
               
                  Email or Phone
                  
               
               
                  Password
                  
               
               
                  Forgot Password?
               
               
                  
                  
               
               
                  Not a member? Signup now

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}
.show-btn{
  background: #fff;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 500;
  color: #3498db;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.show-btn, .container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="checkbox"]{
  display: none;
}
.container{
  display: none;
  background: #fff;
  width: 410px;
  padding: 30px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
#show:checked ~ .container{
  display: block;
}
.container .close-btn{
  position: absolute;
  right: 20px;
  top: 15px;
  font-size: 18px;
  cursor: pointer;
}
.container .close-btn:hover{
  color: #3498db;
}
.container .text{
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.container form{
  margin-top: -20px;
}
.container form .data{
  height: 45px;
  width: 100%;
  margin: 40px 0;
}
form .data label{
  font-size: 18px;
}
form .data input{
  height: 100%;
  width: 100%;
  padding-left: 10px;
  font-size: 17px;
  border: 1px solid silver;
}
form .data input:focus{
  border-color: #3498db;
  border-bottom-width: 2px;
}
form .forgot-pass{
  margin-top: -8px;
}
form .forgot-pass a{
  color: #3498db;
  text-decoration: none;
}
form .forgot-pass a:hover{
  text-decoration: underline;
}
form .btn{
  margin: 30px 0;
  height: 45px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
form .btn .inner{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  z-index: -1;
  background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
  transition: all 0.4s;
}
form .btn:hover .inner{
  left: 0;
}
form .btn button{
  height: 100%;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
form .signup-link{
  text-align: center;
}
form .signup-link a{
  color: #3498db;
  text-decoration: none;
}
form .signup-link a:hover{
  text-decoration: underline;
}

That’s all, now you’ve successfully created a Popup Login Form Design in HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Multi Step Form with Step Progress Bar in HTML CSS & JavaScript

CodingNepal — Tue, 23 Jun 2020 09:35:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Multi Step Form with Step Progress Bar using HTML CSS & JavaScript. Earlier I have shared many blogs on how to create a Login Form using HTML & CSS. So now it’s time to create a Multi-Step Form in HTML.

A Multi-Step Form is a long-form that has broken into multiple pieces. This type of form asked you to enter your details step by step before submitting your form. Some Multi-Step Form has Step Progress Bar on the top of Form or on some website it’s placed on the bottom. Generally, This progress bar indicates or informs a user how many steps they have completed and how many steps are remaining.

As you have seen, this type of Multi-Step Forms in many websites. Some of them are created using Bootstrap. But today in this blog, I’ll share with you this program (Multi-Step Form with Step Progress) which is based on HTML CSS & JavaScript. I didn’t use any JavaScript library to create this form.

This form is long-form and it has broken into four steps. In each step, there are questions which user needs to enter. And I’ve also added a step progress bar on the top of the Form which indicates steps. There are two buttons (Next and Previous) on each step. When you click on the next button it’ll redirect you to the next step and when you click on the previous button it’ll redirect you to the previous step.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Multi Step Form).

Video Tutorial of Multi Step Form in HTML & CSS

I hope you like this Multi-Step Form and understood the basic codes of this program. As you have seen in the video, I didn’t use any JavaScript library and CSS Framework to create this Multi-Step form. You can use this form on your websites and projects.

If you have basic knowledge of HTML CSS & JavaScript then you can also create this type of Multi-Step Form. Nowadays, this type of form is trending and used by many popular websites.

If you like this program (Multi-Step Form) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Multi-Step Form Using HTML CSS & JavaScript [Source Codes]

To create this program (Multi-Step Form). First, you need to create three Files (HTML, CSS & JavaScript). After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      Multi Step Form | CodingNepal
      
      
   
   
      
         Signup Form
         
            
               
                  Name
               
               
                  1
               
               
            
            
               
                  Contact
               
               
                  2
               
               
            
            
               
                  Birth
               
               
                  3
               
               
            
            
               
                  Submit
               
               
                  4
               
               
            
         
         
            
               
                  
                     Basic Info:
                  
                  
                     
                        First Name
                     
                     
                  
                  
                     
                        Last Name
                     
                     
                  
                  
                     
                  
               
               
                  
                     Contact Info:
                  
                  
                     
                        Email Address
                     
                     
                  
                  
                     
                        Phone Number
                     
                     
                  
                  
                     
                     
                  
               
               
                  
                     Date of Birth:
                  
                  
                     
                        Date
                     
                     
                  
                  
                     
                        Gender
                     
                     
                  
                  
                     
                     
                  
               
               
                  
                     Login Details:
                  
                  
                     
                        Username
                     
                     
                  
                  
                     
                        Password

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  background: url("bg.png"), -webkit-linear-gradient(bottom, #0250c5, #d43f8d);
}
::selection{
  color: #fff;
  background: #d43f8d;
}
.container{
  width: 330px;
  background: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 50px 35px 10px 35px;
}
.container header{
  font-size: 35px;
  font-weight: 600;
  margin: 0 0 30px 0;
}
.container .form-outer{
  width: 100%;
  overflow: hidden;
}
.container .form-outer form{
  display: flex;
  width: 400%;
}
.form-outer form .page{
  width: 25%;
  transition: margin-left 0.3s ease-in-out;
}
.form-outer form .page .title{
  text-align: left;
  font-size: 25px;
  font-weight: 500;
}
.form-outer form .page .field{
  width: 330px;
  height: 45px;
  margin: 45px 0;
  display: flex;
  position: relative;
}
form .page .field .label{
  position: absolute;
  top: -30px;
  font-weight: 500;
}
form .page .field input{
  height: 100%;
  width: 100%;
  border: 1px solid lightgrey;
  border-radius: 5px;
  padding-left: 15px;
  font-size: 18px;
}
form .page .field select{
  width: 100%;
  padding-left: 10px;
  font-size: 17px;
  font-weight: 500;
}
form .page .field button{
  width: 100%;
  height: calc(100% + 5px);
  border: none;
  background: #d33f8d;
  margin-top: -20px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: 0.5s ease;
}
form .page .field button:hover{
  background: #000;
}
form .page .btns button{
  margin-top: -20px!important;
}
form .page .btns button.prev{
  margin-right: 3px;
  font-size: 17px;
}
form .page .btns button.next{
  margin-left: 3px;
}
.container .progress-bar{
  display: flex;
  margin: 40px 0;
  user-select: none;
}
.container .progress-bar .step{
  text-align: center;
  width: 100%;
  position: relative;
}
.container .progress-bar .step p{
  font-weight: 500;
  font-size: 18px;
  color: #000;
  margin-bottom: 8px;
}
.progress-bar .step .bullet{
  height: 25px;
  width: 25px;
  border: 2px solid #000;
  display: inline-block;
  border-radius: 50%;
  position: relative;
  transition: 0.2s;
  font-weight: 500;
  font-size: 17px;
  line-height: 25px;
}
.progress-bar .step .bullet.active{
  border-color: #d43f8d;
  background: #d43f8d;
}
.progress-bar .step .bullet span{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.progress-bar .step .bullet.active span{
  display: none;
}
.progress-bar .step .bullet:before,
.progress-bar .step .bullet:after{
  position: absolute;
  content: '';
  bottom: 11px;
  right: -51px;
  height: 3px;
  width: 44px;
  background: #262626;
}
.progress-bar .step .bullet.active:after{
  background: #d43f8d;
  transform: scaleX(0);
  transform-origin: left;
  animation: animate 0.3s linear forwards;
}
@keyframes animate {
  100%{
    transform: scaleX(1);
  }
}
.progress-bar .step:last-child .bullet:before,
.progress-bar .step:last-child .bullet:after{
  display: none;
}
.progress-bar .step p.active{
  color: #d43f8d;
  transition: 0.2s linear;
}
.progress-bar .step .check{
  position: absolute;
  left: 50%;
  top: 70%;
  font-size: 15px;
  transform: translate(-50%, -50%);
  display: none;
}
.progress-bar .step .check.active{
  display: block;
  color: #fff;
}

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.


const slidePage = document.querySelector(".slide-page");
const nextBtnFirst = document.querySelector(".firstNext");
const prevBtnSec = document.querySelector(".prev-1");
const nextBtnSec = document.querySelector(".next-1");
const prevBtnThird = document.querySelector(".prev-2");
const nextBtnThird = document.querySelector(".next-2");
const prevBtnFourth = document.querySelector(".prev-3");
const submitBtn = document.querySelector(".submit");
const progressText = document.querySelectorAll(".step p");
const progressCheck = document.querySelectorAll(".step .check");
const bullet = document.querySelectorAll(".step .bullet");
let current = 1;

nextBtnFirst.addEventListener("click", function(event){
  event.preventDefault();
  slidePage.style.marginLeft = "-25%";
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progressText[current - 1].classList.add("active");
  current += 1;
});
nextBtnSec.addEventListener("click", function(event){
  event.preventDefault();
  slidePage.style.marginLeft = "-50%";
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progressText[current - 1].classList.add("active");
  current += 1;
});
nextBtnThird.addEventListener("click", function(event){
  event.preventDefault();
  slidePage.style.marginLeft = "-75%";
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progressText[current - 1].classList.add("active");
  current += 1;
});
submitBtn.addEventListener("click", function(){
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progressText[current - 1].classList.add("active");
  current += 1;
  setTimeout(function(){
    alert("Your Form Successfully Signed up");
    location.reload();
  },800);
});

prevBtnSec.addEventListener("click", function(event){
  event.preventDefault();
  slidePage.style.marginLeft = "0%";
  bullet[current - 2].classList.remove("active");
  progressCheck[current - 2].classList.remove("active");
  progressText[current - 2].classList.remove("active");
  current -= 1;
});
prevBtnThird.addEventListener("click", function(event){
  event.preventDefault();
  slidePage.style.marginLeft = "-25%";
  bullet[current - 2].classList.remove("active");
  progressCheck[current - 2].classList.remove("active");
  progressText[current - 2].classList.remove("active");
  current -= 1;
});
prevBtnFourth.addEventListener("click", function(event){
  event.preventDefault();
  slidePage.style.marginLeft = "-50%";
  bullet[current - 2].classList.remove("active");
  progressCheck[current - 2].classList.remove("active");
  progressText[current - 2].classList.remove("active");
  current -= 1;
});

That’s all, now you’ve successfully created a Multi-Step Form with Step Progress Bar in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Search Results for “label/Login Form” – CodingNepal

Login & Signup Form in HTML CSS JavaScript | With Source Code

Login & Signup Form in HTML CSS JavaScript | Video Tutorial

You Might Like This:

Login & Signup Form [Source Code]

Make a Website in HTML CSS & JavaScript | Website with Source Code

Make a Website in HTML CSS & JavaScript | Video Tutorial

You Might Like This:

Coffee Website [Source Code]

Responsive Registration Form in HTML CSS & JavaScript | With Source Code

Registration Form in HTML CSS & JavaScript

You Might Like This:

Registration Form [Source Code]

Show & Hide Password in HTML CSS & JavaScript

Show & Hide Password in HTML CSS & JavaScript

You Might Like This:

Show and Hide Password [Source Code]

Useful HTML Tags & Attributes with Example

Useful HTML Tags & Attributes with Example

You Might Like This:

Email Validation in HTML CSS and JavaScript

Email Validation in HTML CSS and JavaScript

You Might Like This

Email Validation HTML CSS JavaScript [Source Code]

Responsive Login and Registration Form in HTML and CSS

What is the Login and Registration Form

Login and Registration Form in HTML and CSS | Video Tutorial

You May Like This:

Login & Registration Form Template | Source Code

Popup Login Form Design in HTML & CSS

Video Tutorial of Modal or Popup Login Form Design

You might like this:

Modal or Popup Login Form Design [Source Codes]

Multi Step Form with Step Progress Bar in HTML CSS & JavaScript

Video Tutorial of Multi Step Form in HTML & CSS

You might like this:

Multi-Step Form Using HTML CSS & JavaScript [Source Codes]