How to Create Login and Registration Form in HTML |Learn How to create Login or Registration Form A

Hey guys Welcome to this Blog In this Blog we Will learn About The Login Form and Registration Form. So if you are a Web Developer and looking for Login and SignUp Forms then this is the right place. So without wasting Time let's get Started.

This is a Free Responsive Sign Up and Login Form Using HTMl CSS and JavaScript. I have uploaded the source code for FREE and you can access it now For FREE. The Login and Register process is in almost all websites of shopping & Food Ordering ,etc. So If you are a web Developer and Looking For A Responsive Login and SignUp Form then this article is for You.

In this form There are two sections that is Login and SignUp Section
. Login Section

In Login Section There are two input Boxes one is Email and another is Password. And there is a Cool login button with hover Effects.

Sign Up Section
In SignUp section I used 5 Input Boxes that is
1.Enter Your first name 2.Enter your last Name 3.Enter Your Email address 4.Enter a Password 5.And at Last Repeat Password
That's all and ya there is also a Cool Sign Up button with CSS Hover Effects.

The Above image is the Output of the Forms We Are Going To create

Copy Code To Clipboard | CodingLab

HTML Code:

                    <!DOCTYPE html>
            <!-- Created By Aayush Pathak Web www.ayushpathak.com -->
            <html lang="en" dir="ltr">
               <head>
                  <meta charset="utf-8">
                  <title>Login and Registration Form in HTML | Aayush Pathak Web</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">
                          Welcome Back
                        </div>
                        <div class="title signup">
                           Create an Account
                        </div>
                     </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">Login</label>
                           <label for="signup" class="slide signup">SignUp</label>
                           <div class="slider-tab"></div>
                        </div>
                        <div class="form-inner">
                           <form action="#" class="login">
                              <div class="field">
                                 <input type="text" placeholder="Email Address" required>
                              </div>
                              <div class="field">
                                 <input type="password" placeholder="Password" required>
                              </div>
                              <div class="pass-link">
                                 <a href="#">Forgot password?</a>
                              </div>
                              <div class="field btn">
                                 <div class="btn-layer"></div>
                                 <input type="submit" value="Login">
                              </div>
                              <div class="signup-link">
                                 Not a member? <a href="">SignUp now</a>
                              </div>
                           </form>
                           <form action="#" class="signup">
                              <div class="field">
                                 <input type="text" placeholder="Enter Your First Name" required>
                              </div>
                              <div class="field">
                                 <input type="text" placeholder="Enter Your Last Name" required>
                              </div>
                              <div class="field">
                                 <input type="text" placeholder="Email Address" required>
                              </div>
                              <div class="field">
                                 <input type="password" placeholder="Password" required>
                              </div>
                              <div class="field">
                                 <input type="password" placeholder="Confirm password" required>
                              </div>
                              <div class="field btn">
                                 <div class="btn-layer"></div>
                                 <input type="submit" value="Signup">
                              </div>
                              <div class="login-link">
                                Already a member? <a href="">Login now</a>
                             </div>
                           </form>
                        </div>
                     </div>
                  </div>
                   </body>
                  </html>

CSS Code:

                  
       @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: -webkit-linear-gradient(left, #ba0ed4, #7b4ca7);
          }
          ::selection{
            background: #fa4299;
            color: #fff;
          }
          .wrapper{
            overflow: hidden;
            max-width: 390px;
            background: #fff;
            padding: 30px 10px;
            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: 35px;
            font-weight: 600;
            text-align: center;
            transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
          }
          .wrapper .slide-controls{
            position: relative;
            display: flex;
            height: 50px;
            width: 100%;
            overflow: hidden;
            margin: 30px 0 10px 0;
            justify-content: space-between;
            border: 1px solid lightgrey;
            border-radius: 5px;
          }
          .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: -webkit-linear-gradient(left, #ba0ed4, #7b4ca7);
            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;
            padding-left: 15px;
            border-radius: 5px;
            border: 1px solid lightgrey;
            border-bottom-width: 2px;
            font-size: 17px;
            transition: all 0.3s ease;
          }
          .form-inner form .field input:focus{
            border-color: #fc83bb;
            /* 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,
          .form-inner form .login-link{
            text-align: center;
            margin-top: 30px;
          }
          .form-inner form .pass-link a,
          .form-inner form .signup-link a,
          .form-inner form .login-link a{
            color: #fa42d2;
            text-decoration: none;
          }
          .form-inner form .pass-link a:hover,
          .form-inner form .signup-link a:hover,
          .form-inner form .login-link a:hover{
            text-decoration: underline;
          }
          form .btn{
            height: 50px;
            width: 100%;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
          }
          form .btn .btn-layer{
            height: 100%;
            width: 300%;
            position: absolute;
            left: -100%;
            background: -webkit-linear-gradient(right, #a445b2, #fa4299, #a445b2, #fa4299);
            border-radius: 5px;
            transition: all 0.4s ease;;
          }
          form .btn:hover .btn-layer{
            left: 0;
          }
          form .btn input[type="submit"]{
            height: 100%;
            width: 100%;
            z-index: 1;
            position: relative;
            background: none;
            border: none;
            color: #fff;
            padding-left: 0;
            border-radius: 5px;
            font-size: 20px;
            font-weight: 500;
            cursor: pointer;
          }

JavaScript Code:

                <script>
        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");
        const loginLink = document.querySelector("form .login-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;
        });

        loginLink.onclick = (()=>{
           loginBtn.click();
          return false;
        });
     </script>

If By Chance Any Error Occurs in this code then feel free to contact with us or drop your error in the comment We Will try to solve the error shortly

Here I Am Adding A Download button so if you Want to download the code File Then You can simply click on the Download Files Button Above.

Queries Solved in this Article
1. How to Create A Simple Login Form
2. How To Create A Simple SignUp Form
3. How To Create A Responsive Login Form
4. How To Create A Responsive SignUp Form
5. How to Create A Responsive Register and Login Form
6. How to Create A Responsive Register and Login Form Using HTML CSS and JavaScript
7. How To Create A Login Form Responsive using HTML
8. How To Create A Sign Up Form Responsive using HTML
Note :
This Form is only designed. Not working for bacjkend process. So if you want to make it working then you have to use JavaScript or PHP that is Backend Programming. I had only Designed this form for users who actually Need Login and SignUp Forms.

Search This Blog

c programming , javascript , css and html

How to Create Login and Registration Form in HTML |Learn How to create Login or Registration Form A

Comments

Post a Comment

Popular posts from this blog

form in class

SIDDHARTH

form_newlog