HTML Login Form

Last Updated : 16 Oct, 2024

HTML login form is used to authenticate users and grant access to secure sections of a website or application. It typically includes input fields for username/email and password, along with a submit button for logging in. Additionally, there is often an option for new users to create an account or sign up.

How to Create Login Form in HTML

The following steps are required to create the login form in HTML:

1. Set up the HTML Document

Start with a basic HTML document structure:

Open a code editor and create a new file.
Add the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Page Title</title>
</head>

<body>
    <!-- Login Form Code -->
</body>

</html>

2. Create the Form Element

Within the <body> tag, add a <form> element.
Set the action attribute to the URL where the form data will be sent (usually to a server-side script).
Set the method attribute to "POST" to send the data securely.

<form action=""></form>

3. Add Input Fields

Inside the <form> element, create input fields for username and password:
Use the <input> tag with the type attribute set to "text" for username.
Use the <input> tag with the type attribute set to "password" for password.
Add clear labels for each input field using the <label> tag.

<label for="first">Username:</label>
<input type="text" id="first" name="first" 
    placeholder="Enter your Username" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" 
    placeholder="Enter your Password" required>

4. Include a Submit Button

Add a submit button using the <button> tag with the type attribute set to "submit".
Give the button a clear label describing its action, like "Login" or "Submit".

<button type="submit"> Submit </button>

5. Optional: Add Additional Features

Include a "Remember Me" checkbox using the <input> tag with the type attribute set to "checkbox".
Add a link to a "Forgot Password" page using the <a> tag.
Style the form using CSS for a more appealing look.

6. Close the Form and Document

Close the <form> tag.
Add the closing </body> and </html> tags to complete the document.

Example of HTML Login Form

Here’s an example showing how to create an HTML login form with multiple input tags:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML Login Form</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main">
        <h1>GeeksforGeeks</h1>
        <h3>Enter your login credentials</h3>

        <form action="">
            <label for="first">
                Username:
            </label>
            <input type="text" id="first" name="first" 
                placeholder="Enter your Username" required>

            <label for="password">
                Password:
            </label>
            <input type="password" id="password" name="password" 
                placeholder="Enter your Password" required>

            <div class="wrap">
                <button type="submit">
                    Submit
                </button>
            </div>
        </form>
        
        <p>Not registered?
            <a href="#" style="text-decoration: none;">
                Create an account
            </a>
        </p>
    </div>
</body>

</html>

CSS

/*style.css*/
body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    background: #f3f3f3;
    flex-direction: column;
    margin: 0;
}

.main {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    padding: 10px 20px;
    transition: transform 0.2s;
    width: 500px;
    text-align: center;
}

h1 {
    color: #4CAF50;
}

label {
    display: block;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: left;
    color: #555;
    font-weight: bold;
}

input {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    padding: 15px;
    border-radius: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    border: none;
    color: white;
    cursor: pointer;
    background-color: #4CAF50;
    width: 100%;
    font-size: 16px;
}

.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML Form Design

pankaj_gupta_gfg

Improve

Article Tags :