VOOZH about

URL: https://www.geeksforgeeks.org/html/html-login-form/

⇱ HTML Login Form - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

HTML Login Form

Last Updated : 23 Jul, 2025

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.

👁 HTML-Login-Form
HTML Login Form

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:

<!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:

Comment
Article Tags:
Article Tags: