Registration form design

Hello friends, today you will learn how to create a Facebook Login and Registration form in this blog. This registration form has been designed using only html and css that you will learn to create in this blog.

We have already created many registration forms which you can read by clicking on the link. All these registration forms will help you a lot. And you will understand how to make registration form easily.

You can see in this image this is a Facebook registration form page. Which is made from html and css, Facebook login form page has been created in the right side of the header of this page. And below the header Create an Account i.e. a registration form is designed. To create this form we have used the form tag of html and from the input tag inside the form tag, input fields like name, password etc ... and the corresponding tag The tag of the submit button is written inside the checkbox. All these html tags are designed in CSS as you can see in this image.

If you are having difficulties in understanding this Facebook registration form, then you can understand by watching the video of this form, which we have given below tutorial, you can see it by clicking on it, that you will understand the code better.

Video Tutorial of Facebook Registration form using html and css

I hope that you have understood by looking at the tutorial of Facebook registration form and how the code of this registration form is also written, you must have been aware that this form was designed from the code of html and CSS if you source the form If you want to get the code, then we have given below two code files that you can copy these two files one by one and paste them in your file which you will not have any problem in understanding. I mean to say that after taking this source code, you will start creating a registration form.

Facebook Registration Form Using Html and CSS Source Codes

First of all know about the html code of Facebook registration form, in this form a div tag is taken inside body tag whose class name is wrapper named under do div of this wrapper whose class name is header and content is named class header. under we took another div whose class name is sub-header and took two more div tag in this sub-header whose class name is hea and user-form, took under p tag of class hea with logo text written inside it Inside the class user-form, we have taken a form tag, inside this form three more divs have been taken, inside which the tag of the input field is taken and the name of that field is given from the p tag.

Inside the class name content, we have taken three div. The class name of these three div is left-con right-con and clr is class left-con in Facebook page left.
The image has been placed on the side and text has been written, a div has been used to write it. Now inside the class write-con we have taken the h1 p and the form tag. The h1 tag is called the largest heading and below it. The p tag is taken. The p tag is called a paragraph. A form tag is taken under this paragraph, inside which the input field and the tag of the button have been written using the input tag, which you see in the right side of this form.

To know about the css of this form, we first zeroed the margin and padding on the page of this form, and the box size to the border box, followed by the width and height size to the class wrapper and the background-color inside this wrapper. The class header has been given only width and background color by giving width to the class sub-header to margin auto, which will cause it to be in the center. Similarly, we have styled the entire class and designed it as a form which you are seeing as Facebook registration form.

This form is not designed as @ media. If you want, by designing in the @media screen of this form, you can progress to different devices and easily see Disease of this form in mobile and tab. This is the lower html and css file given in this form. You can copy and run this file in your own file, which will help you to design this type of form which will be able to create a good Facebook login and registration form.



Post a Comment

Previous Post Next Post