# Bad value X for attribute “type” on element “input”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-type-on-element-input
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `type` attribute on `<input>` only accepts the keywords defined in the HTML standard, so any other value, such as `phone`, `social` or the name of a website, is reported as an error.

`type` is an enumerated attribute. The valid keywords are `text`, `search`, `email`, `url`, `tel`, `password`, `number`, `range`, `date`, `month`, `week`, `time`, `datetime-local`, `color`, `checkbox`, `radio`, `file`, `hidden`, `submit`, `reset`, `button` and `image`. A browser that meets an unknown value treats the field as `type="text"`, so the form still seems to work, but you lose the mobile keyboard, the built-in validation and the autofill hints that the right type gives you.

Pick the keyword that describes the data the field collects, not the topic of the field. A link to a profile page is a `url`, a phone number is `tel`, and an address you can send mail to is `email`. When no type fits, such as a username or a postal code, use `type="text"` and describe the value with `autocomplete`, `inputmode` or `pattern`. If you need a hook for scripts or styles, put it in `name`, `id`, `class` or a `data-*` attribute instead of `type`.

## Invalid example

```html
<form>
  <label for="profile">Social profile</label>
  <input type="social" id="profile" name="profile">

  <label for="phone">Phone</label>
  <input type="phone" id="phone" name="phone">
</form>
```

## Valid example

```html
<form>
  <label for="profile">Social profile</label>
  <input type="url" id="profile" name="profile" placeholder="https://example.com/yourname">

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