How to create a login form using HTML and CSS ?

You may have visited several websites where you have to create an account and log into your account for having the service of the website. To log into the website you have to fill some details in the given form. Have you ever thought about how to create those forms? Can you create those beautiful forms on your own? Yes, you can. You just need some basic knowledge of  HTML and CSS. I am here to guide you towards creating a beautiful form like the image given above.

First, check the  code given below

In the HTML code, you can find that I have added two other links in the head section with the link of the style sheet. I have used fontawesome to use icons of user and lock. To use the icon you have to add the fontawesome CDN  in the head section. I have used google fonts link for using some specific font-family to give the texts a great look .

Read more How to create CSS flip animation on hover?

To make the form more attractive, I have used an image in the body section that you can find in the image of the form given at the top. The very first step in creating a form is to use <form> tag which defines the form element. Then, you need to have someplace in the form for the inputs so that a user can fill the details. So, you have to create input elements for taking inputs like username and password. You also need a button to submit the details. To do this you can use an input element of submit type.  If you couldn't understand anything in the given code or you need more detailed knowledge of  HTML forms, you can refer to the W3schools website. I have also used some fontawesome icons as said before for making the form more attractive. To use the icons, you just need to visit the fontawesome website and copy and paste the line of code and use it in your code.

Read more CSS gradients: How to use gradient color for background?

I want to advise you that don't just copy the code from here. Try to understand why a specific style is given to an element and gain knowledge of the styling properties used in the style sheet from the w3schools website. 

Happy coding 😃.