Today we will learn to create a responsive Login Form. We will create it using HTML and design it with the help of CSS. The source code will also be given at the end of this post if you feel it hard to make it by yourself. I hope you guys will like the design. Let's do it.
Log In Form Using HTML and CSS
 |
| Responsive Login Form |
Creating a login Form
First of all open a code or text editor. Now create a file named 'form.html'. Now let's add the HTML5 Template to our file. You can just insert it yourself or you can even copy the code below and paste it.
<!DOCTYPE html> <html> <head> <title>Login Form</title> </head> <body> </body> </html>
Now your webpage is ready with the title 'Login Form'. But the body is empty. So, we will find nothing inside our webpage. We will add more code inside the body.
Adding the Username, password and Login space on the page
Now we will add the basics for our login form. Let's do it. What you need to do is to just copy and paste the following code inside the <body> tag of the form.html file.
Like: <body> paste the code given below in this way. </body>
The <input type="text" class="username" placeholder="Username" autocomplete="off" required> code creates a box where the user will enter his or her username. You also can see the placeholder="Username" inside the code. It means that the text 'Username' will be set as the placeholder for the username box. And at last, you can see 'required' It means that the user must enter the username if not then the user can't log in.
Likewise the <input type="password" class="password" placeholder="Password" required> code works. The difference is that the placeholder is set as a password and the input type is password. If the input type is set as a password then the password will be hidden as you type.
And the code <input type="submit" name="submit" value="Log In" > is the submit button. As you click on the submit button the form will redirect the user according to the action that we have set inside the form tag.
So, we have written <form method="post" action="form.html" > in our form.html file. As you can see the action is set to form.html which means that our form will redirect the user again to the form.html file on submit.
The basics of our login form are finished but if you leave it with just writing this much code then our form will look ugly just like this.
So, we will add some CSS and designate our form. We will do internal CSS linking using the style tag.
Styling the Login form using CSS
Now we will design our form and make it attractive.
Now again copy and paste the following code.
Source code for the Login Form
Download Login Form File
0 Comments