How to create a login form in HTML

H
andrewgbliss
7 months ago

This article will go over how to use HTML form elements to create a login form

. . .

Githut repo

https://github.com/EntryLevelDeveloperTraining/html-workshop

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

Input Tag

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.

Button Tag

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.

<button>Submit</button>

So now when the user submits the form it will send the input information that the user has typed in.

Form Tag

<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.

login.html

So now lets create an HTML page with this full login form:

<!DOCTYPE html>
<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>

Conclusion

Alright so that's how to create an HTML form using form, input, and button tags. This is a basic login form, you probably want to use CSS and JavaScript to make this look good and more interactive.


H
andrewgbliss
7 months ago