# Attribute “required” is only allowed when the input type is “checkbox”, “date”, “datetime-local”, “email”, “file”, “month”, “number”, “password”, “radio”, “search”, “tel”, “text”, “time”, “url”, or “week”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/attribute-required-is-only-allowed-when-the-input-type-is-checkbox-date-datetime-local-email-file-month-number-password-radio-search-tel-text-time-url-or-week
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `required` attribute is a boolean attribute that tells the browser a field must be filled in before the form can be submitted. However, not every input type supports this concept. Some input types always have a value (like `range`, which defaults to a midpoint, or `color`, which defaults to `#000000`), while others represent actions rather than user data (like `submit`, `reset`, `image`, and `button`). For `hidden` inputs, the user has no way to interact with the field at all, so requiring them to provide a value makes no sense.

The HTML specification explicitly limits `required` to the following input types: `checkbox`, `date`, `datetime-local`, `email`, `file`, `month`, `number`, `password`, `radio`, `search`, `tel`, `text`, `time`, `url`, and `week`.

Using `required` on an unsupported type is invalid HTML. Browsers will typically ignore the attribute in this situation, which means you might believe a field is required when it actually isn't being validated at all. This can lead to forms being submitted with missing or unexpected data. It also creates confusion for assistive technologies — screen readers may announce a field as required even though the browser won't enforce it, misleading users.

## How to fix it

1. **Check the input type.** If you're using `required` on an input with a type like `hidden`, `range`, `color`, `submit`, `reset`, `image`, or `button`, the attribute is not allowed.
2. **Remove the `required` attribute** if the input type inherently provides a value or doesn't accept user-provided data.
3. **Change the input type** if you actually need the field to be required and the current type doesn't match your intent.
4. **Use server-side validation** for inputs like `hidden` that can't use `required` but still need a value.

## Examples

### ❌ Invalid: `required` on a hidden input

```html
<form>
  <input type="hidden" name="token" required>
  <button type="submit">Submit</button>
</form>
```

The user cannot interact with a `hidden` input, so `required` is not allowed here. The browser won't enforce it.

### ❌ Invalid: `required` on a range input

```html
<form>
  <label for="volume">Volume:</label>
  <input type="range" id="volume" name="volume" min="0" max="100" required>
  <button type="submit">Submit</button>
</form>
```

A `range` input always has a value (it defaults to the midpoint), so `required` is meaningless and not permitted.

### ❌ Invalid: `required` on a color input

```html
<form>
  <label for="color">Pick a color:</label>
  <input type="color" id="color" name="color" required>
  <button type="submit">Submit</button>
</form>
```

A `color` input always has a value (defaulting to `#000000`), so `required` is not valid here.

### ✅ Valid: `required` removed from unsupported types

```html
<form>
  <input type="hidden" name="token" value="abc123">
  <label for="volume">Volume:</label>
  <input type="range" id="volume" name="volume" min="0" max="100">
  <button type="submit">Submit</button>
</form>
```

### ✅ Valid: `required` on supported input types

```html
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="dob">Date of birth:</label>
  <input type="date" id="dob" name="dob" required>

  <label>
    <input type="checkbox" name="terms" required>
    I agree to the terms
  </label>

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

These input types — `email`, `date`, and `checkbox` — all accept direct user input and are on the allowed list for the `required` attribute.