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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-dob-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 `<input>` element's `type` attribute only accepts a specific set of predefined values defined in the HTML specification. These include values like `text`, `password`, `email`, `number`, `date`, `datetime-local`, `checkbox`, `radio`, and others. The value `dob` — presumably short for "date of birth" — is not among them.

When a browser encounters an invalid `type` value, it doesn't throw an error or prevent the page from loading. Instead, it treats the input as `type="text"`. This means the input might appear to work, but you lose important benefits: there's no native date picker UI, no built-in date format validation, and no appropriate mobile keyboard. The W3C validator flags this to help you catch the mistake early.

This matters for several reasons:

- **Accessibility**: Valid input types provide semantic meaning to assistive technologies. A `type="date"` input tells screen readers that a date is expected, enabling better guidance for users.
- **User experience**: Native date inputs offer platform-appropriate date pickers on mobile and desktop, reducing input errors.
- **Standards compliance**: Using invalid attribute values produces unpredictable behavior across browsers and can break future compatibility.

To fix this issue, replace `type="dob"` with a recognized type. For a date of birth field, `type="date"` is the most appropriate choice. If you need more control over formatting, you can use `type="text"` with a JavaScript date picker library or custom validation.

## Examples

### ❌ Invalid: using `type="dob"`

```html
<label for="dob">Date of Birth:</label>
<input type="dob" id="dob" name="dob">
```

The browser will treat this as a plain text input, and the W3C validator will report: **Bad value "dob" for attribute "type" on element "input"**.

### ✅ Fixed: using `type="date"`

```html
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
```

This uses the native HTML date input, which provides a built-in date picker in most modern browsers. You can also constrain the date range with `min` and `max` attributes:

```html
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" min="1900-01-01" max="2025-12-31">
```

### ✅ Fixed: using `type="text"` with a JavaScript date picker

If you need more control over the date picker's appearance or need to support older browsers that lack native date input support, use `type="text"` and enhance it with JavaScript:

```html
<label for="dob">Date of Birth:</label>
<input type="text" id="dob" name="dob" placeholder="YYYY-MM-DD">
```

You can then attach a JavaScript date picker library (such as Flatpickr, Pikaday, or a framework-specific component) to this input for a custom date selection experience. When using this approach, make sure to add appropriate `aria-*` attributes and validation to maintain accessibility.

### Valid `type` values for reference

Here are some commonly used valid `type` values for the `<input>` element:

- `text` — plain text input
- `date` — date picker (year, month, day)
- `datetime-local` — date and time picker (no timezone)
- `month` — month and year picker
- `number` — numeric input
- `email` — email address input
- `tel` — telephone number input
- `password` — masked text input

Always choose the `type` that best matches the data you're collecting. For a date of birth, `type="date"` is the most semantically correct and user-friendly option.