A Guide to Creating a Login Page in HTML With Validation

Creating a login page in HTML is a fundamental aspect of web development, allowing users to securely access restricted content. This article provides a step-by-step guide on how to create a simple login page in HTML, complete with source code and an example output.


Setting Up Your Workspace

Before we begin, ensure that you have a text editor and a web browser ready. These tools will facilitate the creation and testing of your HTML code.

HTML Structure

Here is a basic HTML structure for your login page:

<!DOCTYPE html>
    <title>Login Page</title>
    <div class="login-container">
        <form action="process-login.php" method="post">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
            <input type="submit" value="Login">

In this code:

- We establish a basic HTML structure, including the `<head>` section for the page title.

- Inside the `<body>`, a container (`<div class="login-container">`) holds our login form.

- The form's action attribute specifies the script that will manage the login process, set here as "process-login.php."

- The form contains two input fields for the username and password, each with associated labels.

- A submit button allows users to send their login information.

Styling with CSS

To enhance the visual appeal of your login page, you can apply CSS. Here's a simple example to get you started:

    body {
        font-family: Arial, sans-serif;
        background-color: #f2f2f2;
        text-align: center;

    .login-container {
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #888888;
        width: 300px;
        margin: 0 auto;
        padding: 20px;
        margin-top: 100px;

    h1 {
        color: #333;

    label {
        display: block;
        margin-top: 10px;

    input[type="password"] {
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        border: 1px solid #ccc;
        border-radius: 3px;

    input[type="submit"] {
        background-color: #007BFF;
        color: white;
        border: none;
        padding: 10px;
        margin-top: 15px;
        border-radius: 3px;
        cursor: pointer;

This CSS code provides a basic style for your login page. Feel free to customize it to match your website's design.

PHP Script for Handling Login (Optional)

In a real-world scenario, you would need a server-side script to handle the login process, validate user credentials, and grant access. You can create a PHP script, for example, to process the login form and interact with a database. 

Here's a simplified example:

    $username = $_POST["username"];
    $password = $_POST["password"];

    // Implement your authentication logic here (e.g., database queries)

    // For the sake of this example, let's assume successful login
    if ($username == "demo" && $password == "password") {
        header("Location: welcome.php");
    } else {
        echo "Invalid username or password. Please try again.";

This script should be saved as "process-login.php" and placed in the same directory as your HTML file.

Testing Your Login Page

To test your login page, simply open it in a web browser. You can use the sample credentials ("demo" and "password") to observe how the login process functions.

That concludes our guide to creating a basic login page in HTML. For real-world applications, remember to implement robust security measures and user authentication, such as password hashing and session management.

Subscribe our Youtube Channels to get more latest updates.

About the Author

Hey there! My name is Anto Navis, a professional Web Designer as well as Content Creator from Tirunelveli, Tamilnadu. I love to Code and create interesting things while playing with it.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.