# Bad value “tel-national” for attribute “autocomplete” on element “input”: The autofill field name “tel-national” is not allowed in this context.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-tel-national-for-attribute-autocomplete-on-element-input-the-autofill-field-name-tel-national-is-not-allowed-in-this-context
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The HTML specification defines specific rules about which `autocomplete` autofill field names can be paired with which input types. The `tel-national` token (which represents a phone number without the country code) is classified as requiring a text-based input control. Meanwhile, `<input type="tel">` is a specialized control that the spec treats differently from a plain text field. When the validator encounters `tel-national` on a `type="tel"` input, it flags the mismatch because the autofill field name is not allowed in that context.

This might seem counterintuitive — a national telephone number value on a telephone input feels like a natural fit. However, the distinction exists because `type="tel"` already implies a complete telephone number, and the spec maps the broader `tel` autocomplete token to it. The more granular telephone tokens like `tel-national`, `tel-country-code`, `tel-area-code`, `tel-local`, `tel-local-prefix`, and `tel-local-suffix` are designed for `type="text"` inputs where a phone number is being broken into individual parts across multiple fields.

Getting this right matters for browser autofill behavior. When the `autocomplete` value and input type are properly paired according to the spec, browsers can more reliably populate the field with the correct portion of the user's stored phone number. An invalid pairing may cause autofill to silently fail or behave unpredictably across different browsers.

## How to fix it

You have two options:

1. **Change the input type to `text`** — Use `type="text"` if you specifically want the national portion of a phone number (without the country code). This is the right choice when you're splitting a phone number across multiple fields.
2. **Change the autocomplete value to `tel`** — Use `autocomplete="tel"` if you want a single field for the full phone number. This pairs correctly with `type="tel"`.

## Examples

### ❌ Invalid: `tel-national` on `type="tel"`

```html
<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel" autocomplete="tel-national">
```

This triggers the validation error because `tel-national` is not allowed on a `type="tel"` input.

### ✅ Fix option 1: Change input type to `text`

```html
<label for="phone">Phone number (without country code)</label>
<input id="phone" name="phone" type="text" autocomplete="tel-national">
```

Using `type="text"` satisfies the spec's requirement for the `tel-national` autofill token. This is ideal when collecting just the national portion of a number.

### ✅ Fix option 2: Change autocomplete to `tel`

```html
<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel" autocomplete="tel">
```

Using `autocomplete="tel"` is the correct pairing for `type="tel"` and tells the browser to autofill the complete phone number.

### ✅ Splitting a phone number across multiple fields

When you need separate fields for different parts of a phone number, use `type="text"` with the granular autocomplete tokens:

```html
<fieldset>
  <legend>Phone number</legend>
  <label for="country-code">Country code</label>
  <input id="country-code" name="country-code" type="text" autocomplete="tel-country-code">
  <label for="national">National number</label>
  <input id="national" name="national" type="text" autocomplete="tel-national">
</fieldset>
```