Free HTML and CSS Login Form Templates That Work With Password Managers

A login form is the one piece of HTML that every visitor has to get through, and most of the free ones online are built to look good in a screenshot. Copy one into a real project and the password manager doesn't offer to fill it, keyboard users can't see which field they're in, and sometimes the password lands in the address bar.

So I tested six free login forms on 7 October 2026 against a short list. Every field needs a real label, the autocomplete values browsers expect, a focus style you can actually see, and a form that sends the password by POST and nowhere else. None of the six passed every check, but some need two minutes of fixing and some need an hour.

At a glance

Bootstrap sign-in

Bootstrap's own Sign-in example is the form most Bootstrap projects start from. It is tiny. A logo, a "Please sign in" heading, two floating-label fields stacked into one box, a Remember me checkbox and a full-width blue button. The custom CSS file is about 20 lines long.

Look at the markup before you ship it. The inputs have labels and the right types, but no name attributes, no autocomplete values and no method on the form. As written it submits nothing. Add names without adding method="post" and the browser defaults to GET, which puts the password in the URL. Bootstrap's focus style turns the outline off and draws a light blue glow at 25% opacity instead. It comes with Bootstrap 5.3.8 under the MIT licence.

Tabler sign-in

Tabler's sign-in page gets more right than any other framework page I tried. Labels sit above the fields. The email input has autocomplete="email" and the password has autocomplete="current-password". The eye icon is a real button with an aria-label of "Show password". Below the form there are GitHub and X login buttons and a sign-up link. Since version 1.6.0, released on 25 September, Tabler's focus indicator is a solid 2px outline.

One line needs changing. The form tag says method="get" and action="./", and the inputs have no names, so the demo sends nothing. The moment you add names for your backend, that GET sends the password in the query string. Change it to POST first. Tabler is MIT licensed, and version 1.6.1 came out on 28 September 2026. It also made our list of Bootstrap admin templates, where the rest of the kit is covered.

Colorlib login forms

If you want a login form with some personality, this repository from Colorlib's Aigars Silkalns has 20 of them, from glassmorphism and neumorphism to a brutalist one and a banking style. Each sits in its own folder with plain HTML, CSS and JavaScript, no framework and no CDN. The glassmorphism version is shown above.

The April 2026 release cleaned up a lot. Version 2.0.0 added :focus-visible outlines to every form, honoured reduced-motion settings, and fixed an XSS bug where error messages were written with innerHTML. Fields have names, labels and autocomplete="email" and "current-password", and the show-password button has an aria-label.

Two problems are left. The shared validator rejects any password without an uppercase letter, a lowercase letter and a number, which is a sign-up rule, and on a sign-in form it locks out people whose older passwords don't fit. Then there is the licence. The repo has no LICENSE file, and GitHub's own docs say that without one, default copyright applies and nobody may reuse the code. Ask before you ship it. The repo has 58 stars, and its last release was version 2.0.0 on 28 April 2026.

Flowbite login

Flowbite's login page lists several Tailwind login blocks, but only the first, "Default login page", shows its code for free. The rest are locked to Flowbite Pro buyers.

The free one is close to usable. It has labels, email and password types, and name attributes, so it really does submit. That is also the problem. The form has action="#" and no method, which means GET, so pressing Sign in puts the email and password into the URL. Neither field has an autocomplete value. The Remember me checkbox is marked required, so nobody can sign in without ticking it, and its aria-describedby points back at itself. The button removes its outline and uses a 4px Tailwind ring instead. Flowbite itself is MIT, and version 4.0.2 was published on npm on 13 May 2026.

shadcn/ui login

This one is React, not plain HTML. I included it because a lot of people searching for a login template are building in Next.js, and many of them end up using shadcn/ui. The repository has 125,236 stars.

There are five login blocks. Login-03, above, puts Apple and Google buttons over the email form. You install a block with the shadcn CLI and the code is copied into your own project, so you own it from then on. Labels are wired with htmlFor, and inputs get a 3px focus ring. I read the source for all five, and none sets autocomplete or a name on its fields, so add both before you connect Auth.js, Supabase or your own API. The code is MIT, and the CLI's latest release, 4.21.3, came out on 6 October 2026.

GOV.UK password input

The UK government's design system is not a login template, but its password input is the most carefully built field in this list and you can copy the pattern into anything.

The markup sets autocomplete="current-password", spellcheck="false" so browser spelling services never see the password, and autocapitalize="none". The Show button starts with the hidden attribute and only appears once JavaScript has loaded. Focus is a 3px yellow outline plus a thicker inner border, which stays visible in contrast themes. The guidance also says to use new-password on sign-up forms and to drop the "confirm password" field when a show button is present.

The one limit is branding. The GDS Transport font and GOV.UK look are for government services, so on your own site you swap the font and colours. GOV.UK Frontend is MIT, the password input arrived in version 5.3.0 in March 2024, and the current release is 6.5.1 from 14 September 2026.

Ten CodePens

Most people looking for a login template end up on CodePen, so I opened ten login pens that came up in a search for one, made between 2013 and 2025, and read their source.

Nine of the ten set outline to none or 0 somewhere in their CSS, and none uses :focus-visible. Not one sets autocomplete="current-password", while three switch autocomplete off. Only four tie a text label to every field. Another uses labels that contain nothing but an icon, and in one pen the labels point at ids that don't exist. One pen even uses type="text" for the password, so it shows in clear text. Four need jQuery. CodePen makes public pens MIT licensed, so you are allowed to copy them. Most just aren't worth copying as they are.

If you would rather start clean, this is the markup I would use. It follows web.dev's sign-in guidance and the MDN autocomplete reference.

<form method="post" action="/login">
  <label for="username">Email</label>
  <input id="username" name="username" type="email" autocomplete="username" required>

  <label for="current-password">Password</label>
  <input id="current-password" name="password" type="password" autocomplete="current-password" required>

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

input:focus-visible, button:focus-visible {
  outline: 3px solid #1d4ed8
}

Style it however you like. Keep the outline, or swap it for another outline rather than a shadow. For a show-password button, add a type="button" element with a text label and a few lines of script that switch the input between password and text.

Final thoughts

For a plain HTML or Bootstrap site, take Tabler's sign-in page, change the method to POST and add names. It has the best accessibility of the framework pages.

If you only need the form and want to match an existing Bootstrap design, Bootstrap's Sign-in example works, but add names, autocomplete and a stronger focus style. Flowbite's free block is a fair Tailwind starting point once you add method="post", fix the required checkbox and add autocomplete. On React, the shadcn/ui blocks give you the layout and you add the attributes. The Colorlib set has the most style, though I would not ship it until the licence question is answered. Whichever you pick, copy the GOV.UK password field's attributes into it. They cost nothing and fix most of what the others miss.

FAQ

Sources

• Bootstrap 5.3 Sign-in example: markup and sign-in.css. Checked on 7 October 2026.
• Tabler on GitHub and its releases: 1.6.0 focus outline, 1.6.1 release date. Sign-in markup read from the live demo. Checked on 7 October 2026.
• Colorlib login forms on GitHub and its changelog: 20 forms, version 2.0.0 fixes, validator code, missing licence file. Checked on 7 October 2026.
• Flowbite on GitHub and flowbite on npm: licence and version 4.0.2. Block markup read from the live page. Checked on 7 October 2026.
• shadcn/ui on GitHub: stars, login-01 to login-05 source, input focus classes, release 4.21.3. Checked on 7 October 2026.
• GOV.UK Design System, Password input and Typeface: markup, guidance, font restriction. govuk-frontend on npm: version 6.5.1. Checked on 7 October 2026.
• web.dev, Sign-in form best practices. Checked on 7 October 2026.
• MDN, autocomplete attribute, MDN, Sending form data and MDN, forced-colors. Checked on 7 October 2026.
• WCAG 2.2, Understanding 3.3.8 Accessible Authentication, Understanding 1.3.5 Identify Input Purpose and Understanding 2.4.7 Focus Visible. Checked on 7 October 2026.
• CodePen documentation, Licensing and GitHub Docs, Licensing a repository. Checked on 7 October 2026.
• r/Frontend: Login/Register forms templates
• r/css: Feedback on my HTML/CSS login form design?
• YouTube: Create Modern Login Form using HTML & CSS, The Code Chic