Opening a login page in HTML is a common task when building a website. The login page allows users to enter credentials to access protected parts of the site. In this article, we will walk through the basic steps to create a simple login form in HTML.
Prerequisites
Before we can build the login page, there are a few key things we need:
- Basic knowledge of HTML tags
- A text editor or IDE for writing HTML code
- A web server to host the HTML page
For those new to HTML, here is a quick primer on some important tags:
| Tag | Description |
|---|---|
| <html> | Defines an HTML document |
| <head> | Contains metadata/information about the document |
| <body> | Contains the visible content of the page |
| <h1> to <h6> | Headings levels 1 through 6 |
| <p> | Defines a paragraph |
| <form> | Used to create an HTML form |
This gives enough background to understand the examples in this article. Let’s move on to building the login page HTML structure.
Login Page Structure
Here is the basic HTML structure that we will use for the login page:
<html>
<head>
</head>
<body>
<h1>Login</h1>
<form>
<!-- Login form fields go here -->
</form>
</body>
</html>
This sets up the document with a heading and a form element to hold the login fields. Now let’s look at how to add the specific form fields.
Login Form Fields
The two main form fields we need for login are:
- Username field
- Password field
Here is how to add those into the form using HTML:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</form>
The <label> tag provides an accessible name for the field that will be read to screen reader users.
The <input> tag specifies the type of field (text or password), along with the id and name. The name attribute is important for submitting the form data to the server.
Additional Form Fields
We may also want to include additional fields in our login form:
- Remember me – A checkbox allowing users to choose to stay logged in. Adds a checkbox input with a “remember me” label.
- Submit button – A button for the user to click to submit the form. Adds a submit type input with value “Log in”.
Here is how we would add those fields:
<label for="remember">Remember me</label> <input type="checkbox" id="remember" name="remember"> <input type="submit" value="Log in">
The full login form HTML should now look like:
<h1>Login</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<label for="remember">Remember me</label>
<input type="checkbox" id="remember" name="remember">
<input type="submit" value="Log in">
</form>
This provides a simple but functioning login form in HTML!
Login Form Styling
Now that we have the basic HTML form, we probably want to add some styling to make it look nicer.
This can be done using CSS by adding a <style> tag in the head.
For example:
<style>
form {
max-width: 400px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
This styles the form to be centered on the page with a border, adds spacing between labels and inputs, and styles the input fields.
The full login page HTML with styling would look like:
<html>
<head>
<style>
/* Form styling */
</style>
</head>
<body>
<h1>Login</h1>
<form>
<!-- Form fields -->
</form>
</body>
</html>
You can customize the CSS styles further to achieve the look you want.
Connecting the Form to a Server
So far we have built the login form HTML, but we still need to connect it to a server to actually log the user in.
The form needs to be configured to POST the data to a server endpoint using the action attribute:
<form action="/login" method="post"> <!-- Form fields --> </form>
The /login path should point to a server endpoint that can receive the POST request and process the login.
Some options for handling the login on the server:
- Using a server-side language like PHP, Node.js, Python, etc to check the credentials against a database.
- Integrating with an authentication service like Auth0 or Firebase Auth.
- Storing user data in a JSON file that can be read to verify credentials.
The server needs to handle checking the submitted username and password, then creating a user session if valid credentials are provided.
Once logged in, the user can then be redirected to a protected page or account dashboard.
Putting It All Together
The full HTML code for a login page that posts to a /login endpoint would look like:
<html>
<head>
<style>
/* Form styling */
</style>
</head>
<body>
<h1>Login</h1>
<form action="/login" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<label for="remember">Remember me</label>
<input type="checkbox" id="remember" name="remember">
<input type="submit" value="Login">
</form>
</body>
</html>
To recap the steps we’ve covered:
- Set up the HTML page structure
- Add label and input tags for form fields
- Apply CSS styling
- Point the form to a server endpoint
- Have the server process the login credentials
- Redirect to a protected page after login
Following these steps will allow you to create a fully functioning login page in HTML that can authenticate users!
Conclusion
Building a login page is a common task in web development that requires both HTML form skills and a backend server to handle authentication.
The key steps are:
- Use the <form> element to create the login form fields in HTML.
- Accept username and password input using <input type=”text”> and <input type=”password”>.
- Style the form using CSS to improve the appearance.
- Set the form action to the server endpoint that will process the login.
- Have the server check the credentials and create a user session.
- Redirect to a protected page once successfully logged in.
Following semantic HTML practices and connecting the frontend form to a backend server will allow you to create a login experience that is accessible, secure and styled exactly how you want.
