How to create a login form in HTML
This article will go over how to use HTML form elements to create a login form
What is an HTML form
HTML is very useful for showing data, whether it's a blog article or products, however you can also collect data from someone using forms. There are many HTML form elements to learn, and each form element can collect some kind of user input. In this article we will go over how to use these elements to create a login form
The input tag is one way we can collect user input. We can show this element to the user for them to type in their username and password.
<input name="username" />
The input tag is a self closing tag, meaning it doesn't have a closing tag. You can give the input tag several properties, for this example we give the input a name called username.
<input name="password" type="password" />
This input tag takes an additional property called type. There are several types of input you can create, such as checkboxes, email inputs, and date pickers. For this login form we need to set this to type password so no one can see the password the user is typing.
Now that we have setup these two input we can now submit the form to a backend service that will check if the username and password are correct. This article wont go over the backend logic, it will just show how to create this HTML form.
In order to submit the form we need to show a button.
So now when the user submits the form it will send the input information that the user has typed in.
<form action="/login.html" method="POST"> ... </form>
The form tag takes in an action which says what URL to send the data to, and the method is saying we will be posting the data to the backend server, then that service can check a database, and see if you have the correct credentials and log you in.
So now lets create an HTML page with this full login form:
<html> <head> <title>Welcome</title> </head> <body> <h1>Login</h1> <a href="/">Home</a> <br /> <br /> <h2>Enter your credentials</h2> <form action="/login.html" method="POST"> <input name="username" /> <br /> <br /> <input name="password" type="password" /> <br /> <br /> <button>Submit</button> </form> </body> </html>