Many websites, nowadays, are implements sliding login & registration forms for their sites. A Registration form is used to register or create a new account for a new user for a website and a login form is used to enter the details of a registered user into their particular account or portal. So, many websites implement these two approaches into two different pages. Here, we will see how to combine these two forms into a single HTML page and the forms will appear according to the user’s choice. At the top of the form, a button will help the user select the login or registration form according to his/her choice. When the user switches one form to another, the form will show a smooth sliding animation.
Sliding Login & Registration Form
Approach: The following approach will be utilized to create the Responsive Sliding Login & Registration Form:
Create a project folder and inside it create three files “index.html“(for writing the HTML), “style.css“(for writing the CSS), and “index.js“(for writing the js). You can also create a separate file to keep the CSS code for the responsiveness of the page.
Now, create a header section to keep the header and the title. Then below the header section, create a “container” div to keep the full login and the signup form with the from the changing button.
Now, create a div to keep the two form-changing buttons and create two buttons inside this div. One is for “Login” and the other is for “signup“.Then above the button div, create a slider div that will change its position when someone clicks on the respective button. Make the margin-left and margin-right of the button div “auto“. Then you will see the button will come into the center and add CSS to the button to disable the border and outline and make the button div flex. Follow the below CSS code to implement it:
margin: 20px auto;
Now, add a background color to the slider div and give the same height as the button div and the width should be half of the button div. Then make the position absolute and z-index as 1. Then add left and top to align the div to the starting of the button div. It should cover the first half part of the button div. Also, add a transition of 0.5 seconds to see a smooth animation when the slider will move.
Now, add an additional class in CSS that will add later when someone clicks on the second button, and inside it gives a left alignment that the slider will cover the last half of the button div.
Like The Slider button, We will create the sliding form, using the same approach. Below the button div, we will create another section or div which will contain the two forms. Inside this form div, we will create two div. One will contain the login form and the another will contain the signup form. Then create the required fields inside the login and the signup section along with the login and the signup button. Make the width of the login and the signup section equal to the width of the container div and the form section div should double the container div.
Make the form section “display: flex; position: relative;left: 0px;“. And add the “overflow: hidden;” inside the container div to hide the second form which is outside of the container. Now write an extra class in CSS that will add later when someone clicks on the second button and inside it gives a left alignment that the form will slide in left and the second form will be visible.
Please Login to comment...