HTML Guides for number

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

<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

<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

<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

<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

<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.