Illustration of three mountain peaks with flags and a climber on the middle one

Challenge · medium

Accessible Login Form in HTML: Fix-It Challenge

Q: How do I make a login form in HTML?

You need a <form> with two labelled inputs: type="email" (or a text username) and type="password" . Each one gets a name , required and an autocomplete value. End with <button type="submit">Log in</button> . On a live site, add method="post" too, or the password ends up in the page address. To play with these attributes, try the accessible input generator at htmlinput.com , which builds labelled fields with the right type and autocomplete.

About 15 minmedium

By HTML6 (opens in a new tab) · Updated 2026-10-22 · How we write and check content

Goal: Fix a login form that keyboard and screen reader users cannot use.

Learn

Two fields and a button. What could go wrong? Quite a lot. A placeholder is no label: it disappears as soon as you type, and screen readers often skip it. Every control needs a <label> whose for equals the control's id. That is what WCAG 2.2 success criterion 3.3.2, Labels or Instructions (opens in a new tab), asks for.

Pick the type carefully as well. type="email" brings up a phone keyboard with @ and checks the format, and type="password" hides what you type. With autocomplete values like email and current-password, password managers can fill the form in. Every token is listed in the autofill section of the HTML standard (opens in a new tab).

Last, a <div> you can click is still no button. Keyboard focus never reaches it and it will not submit the form. Write a real <button>; the keyboard accessibility lesson explains.

The short version

A field with only a placeholder needs a connected <label>.
type="email" brings the right keyboard and type="password" hides the characters.
autocomplete="email" and autocomplete="current-password" let password managers fill the form.
Keyboard users can only submit with a real <button>, so a clickable div has to go.

Example

<form>
  <label for="user">Username</label>
  <input type="text" id="user" name="user" autocomplete="username" required>
  <button type="submit">Continue</button>
</form>

Your task

Rescue this login form:

The first field becomes type="email" with id="email", plus a <label for="email">.
The second field becomes type="password" with id="password", plus a <label for="password">.
Both inputs get a name and the required attribute.
The password field also gets autocomplete="current-password".
The <div> turns into a <button> that says 'Log in'.

Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.

Quick quiz

Frequently asked questions

How do I make a login form in HTML?

You need a <form> with two labelled inputs: type="email" (or a text username) and type="password". Each one gets a name, required and an autocomplete value. End with <button type="submit">Log in</button>. On a live site, add method="post" too, or the password ends up in the page address. To play with these attributes, try the accessible input generator at htmlinput.com (opens in a new tab), which builds labelled fields with the right type and autocomplete.

What does autocomplete="current-password" do?

It says the field wants the password the user already has for this site. Browsers and password managers can then offer to fill it in. Sign-up and change-password forms use autocomplete="new-password" instead, and the manager suggests a fresh, strong password. People type less and make fewer login mistakes. It also counts towards WCAG 2.2 success criterion 1.3.5, Identify Input Purpose (opens in a new tab).

Tags in this lesson

<button>A button that submits a form, resets it or runs some command.<div>A generic block box with no meaning, for grouping and styling.<form>Wraps the controls whose values get sent to a server.<label>Names a form control; clicking the label focuses the control.