How to Make Login and Registration Form using HTML and CSS

In this tutorial, we learn how to make Login and Registration Form using HTML and CSS?

I hope you will see, login and Registration form on multiple websites, if you have not seen both form together, then I am sure separated form you have seen on mostly website.

Therefore in this program I will create form together, this form works on the toggle when you click on the login form, then opened login section, and when you click on Register button then opened Register section.

therefore, In the HTML, we will put both forms, such as login form and Registration form, hiding the second one with CSS, there is no need to use JavaScript, you can handle both form with pure CSS.

I have used social icons images such as Facebook, Twitter, etc. here you can use google font-awesome icons, in the previous tutorial I have discussed how to use font-awesome icons.

so, in this tutorial, we create two HTML forms that will switch between registration and login using the CSS properties. the idea behind to create the Login and Registration Form is to show the user the login form and provide a link to “switch” to the registration form.

therefore, you can say that you will learn dual design program, or dual design split form with together, this sample design used in your website.

it is also possible to add or edit or field in those form, it will help you to save time for design form or Registration form in your project.

if you want to view the demo then click on the view demo button, I hope you will enjoy this program.

View Live Demo

Explanation of Source Code for Login and Registration Form used HTML and CSS

Let’s discuss the source code which I have used to create this program, First I have created them class="main" and put the element inside the “Main” div. this div have width:100%; height:100%;

therefore after that I have created a class=”form-box” and put all the elements inside the .form-box, to create a form-box used CSS properties such as width, height, position, margin, background, padding, overflow, etc.

after that create a class=”button-box”, inside the button-box I have to take two toggle button, one for login and another for Register button. which both buttons look like this:

this toggle button works on the click event such as onclick=" login()" and onclick="register()" and for the social icons, I have used social Icons images, for the display social icons images I create class="social-icons" and use few CSS properties such as width, box-shadow, cursor, border-radius, etc.

therefore, I have used ID’s for both form, one id for login form and second id for register form such as <form id="login" class="input-group"> and <form id="register" class="input-group">. these two forms open on click of toggle button and both forms fetch with the separated ID on the click on the toggle button.

furthermore, inside the login form, I have take two input field such as Used Id and Password and taken one checkbox, when inside the register form I have taken three input field such as User Id, Email Id, Password and also one checkbox for term and conditions.

therefore, I have used two buttons one button for Login and a second button for register. these are the whole concept which I have used to design both forms together.

here everything can not explain in writing. I hope you can understand, when you get the source code you can analyze all the code segment which I have used.

you have to need to create two files for making this program, one file for HTML and second file for CSS. Follow all the step to make the program.

First Step: Create HTML File as Name “index.html” | Change fileName as you want

Second Step: Create CSS file as Name “stylesheet.css” | Change FileName as you want

Therefore, see the code segment to create the Login and Registration Form using HTML & CSS, you will be created successfully.

you have to face any trouble then comment me down below. I will try to resolve the problem as soon as possible. thanks for viewing these post.