Platform under construction

HTML Forms

Intermediate

Autocomplete

Learn Autocomplete with practical examples for form structure, input behavior, validation, autocomplete, accessibility, backend safety and live practice.

<input autocomplete="name">
<input autocomplete="email">
<input autocomplete="new-password">

HTML forms

Autocomplete helps browsers fill known information accurately and safely.

The autocomplete attribute tells the browser what kind of information a field expects. That can make forms faster, especially on mobile.

Good autocomplete values help with names, email, phone numbers, addresses, usernames, current passwords and new passwords.

Autocomplete is not decoration. It is a real usability feature that reduces typing, mistakes and friction.

autocomplete

A hint that identifies the expected data type.

email

Lets browsers fill the user email address.

tel

Lets browsers fill phone information.

new-password

Helps password managers generate and store new passwords.

Syntax and behavior

Use specific autocomplete tokens instead of vague browser guessing.

The best value depends on the field purpose. A login password and a signup password should not use the same token.

Useful autocomplete hints

<label for="full-name">Full name</label>
<input id="full-name" name="name" autocomplete="name">

<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email">

<label for="password">Choose password</label>
<input id="password" name="password" type="password" autocomplete="new-password">

Autocomplete disabled everywhere

<form autocomplete="off">
  <input name="email" type="email">
  <input name="password" type="password">
</form>

Rules that matter

Forms should guide users clearly and protect the backend carefully.

Strong form markup is readable, accessible, secure by design and easy to connect to real server-side validation.

Use name for full names

Autocomplete can fill names more accurately with the right token.

Use email for email fields

Do not make browsers guess from placeholders.

Use current-password for login

This helps password managers fill existing credentials.

Use new-password for signup

This helps password managers generate and save new credentials.

Do not disable without reason

Turning autocomplete off often hurts users.

Use address tokens carefully

Address forms can use street-address, postal-code, address-level2 and more.

Production thinking

Forms connect frontend quality with backend responsibility.

Why does this matter?

This matters because the easiest form is often the one the user does not have to type from scratch.

Accessibility

Autocomplete can reduce cognitive load and typing effort for many users.

Production note

Use correct tokens on login, signup and checkout forms. Password-manager compatibility is part of production quality.

SEO note

Autocomplete does not directly affect ranking, but it improves task completion and trust on conversion pages.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Add autocomplete="postal-code" to a postal code field.
Add autocomplete="current-password" to a login password field.
Explain why autocomplete="off" should not be the default choice.

Practice assignment

Do this before moving to the next lesson.

Create a signup form with name, email and password fields.
Choose the correct autocomplete token for each field.
Write one sentence explaining how this helps mobile users.

HTML CSS

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: #07111f;
  color: white;
}

.demo-card {
  width: min(760px, calc(100% - 32px));
  padding: 34px;
  border-radius: 24px;
  background: #101a2d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

h1 {
  margin: 0 0 12px;
  font-size: clamp(34px, 7vw, 56px);
  line-height: 1;
}

p {
  color: #cfd8e6;
  line-height: 1.7;
}

form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

label {
  font-weight: 900;
}

input, select, textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 13px 14px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font: inherit;
}

input:focus, select:focus, textarea:focus, button:focus {
  outline: 3px solid rgba(140, 255, 193, 0.55);
  outline-offset: 3px;
}

button {
  border: 0;
  border-radius: 999px;
  padding: 13px 18px;
  background: #8cffc1;
  color: #07111f;
  font-weight: 900;
}

Live preview

Self-check

Before you continue, prove that you own this lesson.