# Bad value X for attribute “autocomplete” on element “Y”: The string Z is not a valid autofill field name.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-autocomplete-on-element-y-the-string-z-is-not-a-valid-autofill-field-name
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `autocomplete` attribute holds a word that isn't one of the autofill field names defined in the HTML standard.

`autocomplete` tells browsers and password managers what saved data can fill a form control. Its value is either `on` or `off` on its own, or a token from a fixed list, such as `name`, `email`, `tel`, `organization`, `postal-code` or `country`. The token can be preceded by a `section-*` name and by `shipping` or `billing`, as in `section-work shipping postal-code`. The tokens are English words whatever the language of the page, and letter case doesn't matter. Browsers ignore any other value. The control then behaves as if it had no `autocomplete` attribute and follows its form's setting, which is on by default.

The validator reads the value word by word and quotes the first word it can't place, in lower case. So `autocomplete="Choose a topic"` is reported as the string "choose", and `autocomplete="shipping clinic-name"` as "clinic-name". `on` and `off` must stand alone: `autocomplete="off email"` is reported as the string "off".

If a standard token describes the control, use it. If none does, set `autocomplete="off"` or remove the attribute, and keep your own identifier in `name` or `id`. The usual cause depends on the element:

- `<input>`: the field's own name ends up in the attribute, like `company`, `telephone` or a word in the page's language. Look for the token that means the same thing: `organization` for a company name, `tel` for a phone number. The token also has to suit the input's `type`, or the validator reports that it isn't allowed in this context. Invented values like `nope`, `none` or `nothanks` are also common, added to stop the browser from offering saved data. Write `off` instead. On a field where the user picks a new password, `new-password` tells the browser not to fill in a saved password.
- `<textarea>`: the value is usually `message`, `comments` or a misspelling of one of them. Spelling it right doesn't help, because the list has no token for text the user writes freely. Use `off` or remove the attribute. A `<textarea>` that collects a postal address over several lines can take `street-address`.
- `<select>`: several tokens fit a dropdown, such as `country`, `bday-month`, `bday-year`, `cc-exp-month` and `sex`. The bad value is often text meant for people, like the field's label or its "Choose an option" prompt, sometimes copied into the attribute by a form builder. For a list the browser keeps no data for, such as topics or departments, remove the attribute.

## Invalid example

```html
<form action="/contact" method="post">
  <label for="clinic">Clinic</label>
  <input type="text" id="clinic" name="clinic" autocomplete="clinic-name">

  <label for="topic">Topic</label>
  <select id="topic" name="topic" autocomplete="Choose a topic">
    <option value="">Choose a topic</option>
    <option value="billing">Billing</option>
    <option value="support">Support</option>
  </select>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="6" autocomplete="message"></textarea>

  <button type="submit">Send</button>
</form>
```

## Valid example

```html
<form action="/contact" method="post">
  <label for="clinic">Clinic</label>
  <input type="text" id="clinic" name="clinic" autocomplete="off">

  <label for="topic">Topic</label>
  <select id="topic" name="topic">
    <option value="">Choose a topic</option>
    <option value="billing">Billing</option>
    <option value="support">Support</option>
  </select>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="6" autocomplete="off"></textarea>

  <button type="submit">Send</button>
</form>
```

When a standard token fits the control, use it:

```html
<form action="/checkout" method="post">
  <label for="company">Company</label>
  <input type="text" id="company" name="company" autocomplete="organization">

  <label for="country">Country</label>
  <select id="country" name="country" autocomplete="shipping country">
    <option value="ES">Spain</option>
    <option value="FR">France</option>
  </select>

  <label for="address">Delivery address</label>
  <textarea id="address" name="address" rows="3" autocomplete="shipping street-address"></textarea>

  <button type="submit">Continue</button>
</form>
```