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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-zip-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 HTML specification defines a specific set of valid values for the `type` attribute on `<input>` elements, including `text`, `number`, `email`, `tel`, `url`, `date`, `password`, `search`, `hidden`, `checkbox`, `radio`, `file`, `submit`, `reset`, `button`, `image`, `range`, `color`, and others. The value `"zip"` is not among them. When a browser encounters an unrecognized `type` value, it falls back to `type="text"` — so the input may appear to work, but the markup is invalid and you lose the opportunity to leverage built-in browser features for better user experience.

This matters for several reasons. Invalid HTML can cause unpredictable behavior across different browsers and assistive technologies. Screen readers and other tools rely on valid markup to convey the purpose of form controls to users. Additionally, using the correct combination of valid attributes allows browsers to show optimized keyboards on mobile devices (e.g., a numeric keypad for ZIP codes) and to autofill values intelligently.

For ZIP or postal code fields, the best approach is to use `type="text"` combined with the `autocomplete="postal-code"` attribute, which tells browsers exactly what kind of data is expected. You can further enhance the input with `inputmode="numeric"` to trigger a numeric keyboard on mobile devices (for purely numeric ZIP codes like in the US) and a `pattern` attribute for client-side validation.

## Examples

### ❌ Invalid: Using `type="zip"`

```html
<label for="zip">ZIP Code</label>
<input type="zip" id="zip" name="zip">
```

This triggers the validation error because `"zip"` is not a valid value for the `type` attribute.

### ✅ Valid: Using `type="text"` with appropriate attributes (US ZIP code)

```html
<label for="zip">ZIP Code</label>
<input
  type="text"
  id="zip"
  name="zip"
  inputmode="numeric"
  pattern="[0-9]{5}(-[0-9]{4})?"
  autocomplete="postal-code"
  placeholder="12345"
  aria-describedby="zip-hint">
<span id="zip-hint">5-digit ZIP code (e.g., 12345 or 12345-6789)</span>
```

This approach uses `type="text"` to remain valid, `inputmode="numeric"` to prompt a numeric keyboard on mobile, `pattern` for client-side format validation, and `autocomplete="postal-code"` so browsers can autofill the field correctly.

### ✅ Valid: International postal code field

```html
<label for="postal">Postal Code</label>
<input
  type="text"
  id="postal"
  name="postal_code"
  autocomplete="postal-code">
```

For international postal codes that may contain letters (e.g., UK, Canada), omit `inputmode="numeric"` and use a broader or no `pattern`, since formats vary widely by country.

### Why not `type="number"`?

You might be tempted to use `type="number"` for ZIP codes, but this is discouraged. `type="number"` is designed for values that represent a quantity — it may strip leading zeros (turning "01234" into "1234"), add increment/decrement spinner buttons, and behave unexpectedly with non-numeric postal codes. Always use `type="text"` for ZIP and postal codes.