HTML Login Form Template

A login form asks for a username (or email) and a password. This template is simple and clean, and the browser checks the required fields.

HTML and CSS code

<style>
  .login-form { max-width: 320px; font-family: Arial, sans-serif; border: 1px solid #ccc; padding: 20px; border-radius: 6px; }
  .login-form label { display: block; margin: 10px 0 4px; }
  .login-form input[type="text"], .login-form input[type="password"] {
    width: 100%; padding: 8px; box-sizing: border-box;
  }
  .login-form button { margin-top: 14px; width: 100%; padding: 10px; background: #0073aa; color: #fff; border: 0; border-radius: 4px; }
</style>

<form class="login-form" action="login.php" method="post">
  <h2>Login</h2>

  <label for="user">Username</label>
  <input type="text" id="user" name="username" required autofocus>

  <label for="pass">Password</label>
  <input type="password" id="pass" name="password" required>

  <label><input type="checkbox" name="remember"> Remember me</label>

  <button type="submit">Log in</button>
</form>

Output in the browser:

• Previous Code
• Next Code

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.