My Service Support

Login Page Code in HTML and CSS

Updated 2026-08-19 · 882 words

A login page with HTML and CSS needs a semantic form for account details and a stylesheet that makes the form clear, responsive, and easy to use.

What is the complete login page HTML?

The following login page code in HTML and CSS starts with the page structure. It includes visible labels, an email field, a password field, browser validation attributes, and a submit button.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Account Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="login-page">
<section class="login-card" aria-labelledby="login-heading">
<h1 id="login-heading">Sign in</h1>
<p>Enter your account details below.</p>
<form class="login-form" method="post">
<div class="form-group">
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="username" inputmode="email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" name="password" type="password" autocomplete="current-password" minlength="8" aria-describedby="password-help" required>
<p id="password-help" class="help-text">Enter at least eight characters.</p>
</div>
<button type="submit">Sign in</button>
<p class="form-message" role="status" aria-live="polite"></p>
</form>
</section>
</main>
</body>
</html>

A semantic form uses elements according to their purpose. Labels identify the controls, while the required, type, and minlength attributes let the browser perform basic input checks before submission.

What CSS should a login page use?

Save the following CSS for the login page as styles.css. This html css login page uses flexible sizing, strong contrast, comfortable spacing, and a visible focus indicator.

* { box-sizing: border-box; }

body { margin: 0; min-height: 100vh; font-family: Arial, sans-serif; color: #1f2937; background: #f3f4f6; }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

.login-card { width: 100%; max-width: 420px; padding: 32px; background: #ffffff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); }

.login-card h1 { margin: 0 0 8px; font-size: 2rem; } .login-card > p { margin: 0 0 24px; color: #4b5563; }

.form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 8px; font-weight: 700; }

input { width: 100%; min-height: 48px; padding: 12px; border: 1px solid #6b7280; border-radius: 6px; font: inherit; background: #ffffff; }

input:focus { outline: 3px solid #93c5fd; outline-offset: 2px; border-color: #1d4ed8; }

.help-text { margin: 6px 0 0; color: #4b5563; font-size: 0.875rem; }

button { width: 100%; min-height: 48px; padding: 12px 18px; border: 0; border-radius: 6px; font: inherit; font-weight: 700; color: #ffffff; background: #1d4ed8; cursor: pointer; }

button:hover { background: #1e40af; } button:focus-visible { outline: 3px solid #111827; outline-offset: 3px; }

.form-message { margin: 16px 0 0; color: #b91c1c; font-weight: 700; }

@media (max-width: 480px) { .login-page { padding: 16px; } .login-card { padding: 24px 18px; } .login-card h1 { font-size: 1.65rem; } }

How do you use the HTML and CSS files?

Use this login page html and css code in two files stored in the same folder.

  1. Create a new folder for the project.
  2. Save the HTML as index.html.
  3. Save the CSS as styles.css in the same folder.
  4. Confirm that the HTML contains <link rel="stylesheet" href="styles.css"> inside its head element.
  5. Open index.html in a browser. Refresh the page after saving later changes.

If the stylesheet is placed in a subfolder named css, change the href value to css/styles.css. File paths are relative to the location of index.html.

How do you make a login form responsive and accessible?

A responsive login page with HTML and CSS adjusts to narrow screens without horizontal scrolling. Use width: 100%, a sensible max-width, flexible padding, and the viewport meta tag rather than fixed page widths.

  • Keep visible labels above the fields; placeholder text is not a replacement for a label.
  • Use a logical source order so Tab moves from email to password to the login button.
  • Do not remove focus outlines unless an equally visible replacement is provided.
  • Use autocomplete="username" and autocomplete="current-password" so browsers and password managers can identify the fields.
  • Connect instructions and errors to their fields with aria-describedby when needed.
  • Write error messages that name the problem, such as “Enter a valid email address,” instead of only changing a border color.

How do you add real login functionality?

HTML and CSS login page code creates only the interface. The sample form does not authenticate a user, verify a password, create an account session, or recover an account.

Real authentication requires server-side code that receives the form securely, validates all input again, compares credentials using an appropriate password-storage system, creates protected sessions, limits abuse, and returns safe error messages. The deployed page and every credential request must use HTTPS.

Do not place passwords, secret keys, or credential lists in HTML, CSS, or browser-side code. Connect the form only to an authentication system designed and reviewed for the application.

Why is the login page not working?

  • If CSS does not load, check the stylesheet filename, capitalization, href value, and folder location. File names can be case-sensitive after deployment.
  • If the layout overflows on a phone, include the viewport meta tag and replace fixed widths with width: 100% and max-width.
  • If the button appears to do nothing, remember that the sample has no server endpoint or authentication code. A submit button alone cannot sign in a user.
  • If submission is blocked, inspect required fields, the email format, and the password minlength rule. Browser validation stops invalid values before submission.
  • If saved changes do not appear, save both files and reload the page. A cached stylesheet may require a full refresh.

This create login page with HTML and CSS example is a reusable visual starting point, but secure account access must be implemented and tested separately.