How to create login form in html

HtmlHow-ToBeginner · 3 min read

How to Create a Login Form in HTML: Simple Guide

To create a login form in HTML, use the <form> element with <input> fields for username and password, and a submit <button>. This form sends user input to a server or script when submitted.

📐

Syntax

A login form uses the <form> tag to group input fields. Inside, use <input> tags with type="text" for username and type="password" for password. A <button> or <input type="submit"> sends the form data.

<form>: Container for inputs and submit button.
action: URL where form data is sent.
method: HTTP method, usually "post" for login.
<input>: Fields for user input.
type="text": For username input.
type="password": For password input (hides text).
<button>: To submit the form.

html

<form action="/login" 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>
  <button type="submit">Login</button>
</form>

💻

Example

This example shows a simple login form with labels, input fields for username and password, and a submit button. The form uses POST method to send data to a server endpoint /login.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Form Example</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    form { max-width: 300px; margin: auto; display: flex; flex-direction: column; gap: 10px; }
    label { font-weight: bold; }
    input { padding: 8px; font-size: 1rem; }
    button { padding: 10px; font-size: 1rem; cursor: pointer; }
  </style>
</head>
<body>
  <form action="/login" 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>

    <button type="submit">Login</button>
  </form>
</body>
</html>

Output

A centered login form with two labeled fields: 'Username' and 'Password', each with input boxes, and a 'Login' button below them.

⚠️

Common Pitfalls

Common mistakes when creating login forms include:

Not using type="password" for the password field, which shows the password in plain text.
Omitting the name attribute on inputs, so data won't be sent.
Forgetting to set the method attribute, defaulting to GET which exposes data in the URL.
Not using required attribute, allowing empty submissions.

html

<!-- Wrong: password visible and no name attribute -->
<form action="/login" method="post">
  <input type="text" id="user">
  <input type="text" id="pass">
  <button type="submit">Submit</button>
</form>

<!-- Right: password hidden and name attributes added -->
<form action="/login" method="post">
  <input type="text" id="user" name="username" required>
  <input type="password" id="pass" name="password" required>
  <button type="submit">Submit</button>
</form>

📊

Quick Reference

Remember these key points when creating a login form:

Use <form> with action and method="post".
Use <input type="text"> for username and <input type="password"> for password.
Always include name attributes for inputs to send data.
Add required to prevent empty submissions.
Use a <button type="submit"> to send the form.

✅

Key Takeaways

Use

Include fields with type="text" for username and type="password" for password.

Always add name attributes to inputs so data is sent correctly.

Use the required attribute to ensure users fill in the fields.

Use a submit button to send the form data to the server.