# Attribute “maxlength” is only allowed when the input type is “email”, “password”, “search”, “tel”, “text”, or “url”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/attribute-maxlength-is-only-allowed-when-the-input-type-is-email-password-search-tel-text-or-url
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `maxlength` attribute provides built-in client-side validation that caps the number of characters a user can type into a field. Browsers enforce this by preventing further input once the limit is reached. However, this behavior only makes sense for input types that accept arbitrary text strings. Input types like `number`, `date`, `range`, and `checkbox` have their own value formats and constraints — a number input's value is controlled by `min`, `max`, and `step`, not by character count.

When you place `maxlength` on an unsupported input type, browsers will ignore the attribute. This means it provides no actual validation while giving a false sense of security. It also produces invalid HTML, which can cause issues with assistive technologies that may try to interpret the attribute and relay incorrect information to users. Keeping your markup valid ensures predictable behavior across browsers and a better experience for all users.

## How to fix it

1. **Remove `maxlength`** from any `<input>` whose `type` is not `email`, `password`, `search`, `tel`, `text`, or `url`.
2. **Use the correct constraint attributes** for the input type in question. For `number` inputs, use `min` and `max`. For `date` inputs, use `min` and `max` with date strings.
3. **If you genuinely need character-length validation**, consider whether a text-based input type is more appropriate for your use case, or implement the constraint in JavaScript.

## Examples

### ❌ Invalid: `maxlength` on a number input

```html
<label for="quantity">Quantity</label>
<input type="number" id="quantity" name="quantity" maxlength="3">
```

The `number` type does not support `maxlength`. Browsers will ignore it, and the HTML is invalid.

### ✅ Fixed: using `min` and `max` for a number input

```html
<label for="quantity">Quantity</label>
<input type="number" id="quantity" name="quantity" min="0" max="999">
```

If the goal was to limit the value to three digits, `min` and `max` are the correct constraints.

### ❌ Invalid: `maxlength` on a date input

```html
<label for="start-date">Start date</label>
<input type="date" id="start-date" name="start-date" maxlength="10">
```

Date inputs have a browser-provided date picker, and their values are always in `YYYY-MM-DD` format. The `maxlength` attribute has no effect here.

### ✅ Fixed: using `min` and `max` for a date input

```html
<label for="start-date">Start date</label>
<input type="date" id="start-date" name="start-date" min="2020-01-01" max="2030-12-31">
```

### ❌ Invalid: `maxlength` on a checkbox

```html
<label>
  <input type="checkbox" name="agree" maxlength="1"> I agree
</label>
```

A checkbox is a boolean toggle — character length is meaningless here.

### ✅ Fixed: removing the invalid attribute

```html
<label>
  <input type="checkbox" name="agree"> I agree
</label>
```

### ✅ Valid: `maxlength` on supported text-based types

```html
<label for="username">Username</label>
<input type="text" id="username" name="username" maxlength="30">

<label for="user-email">Email</label>
<input type="email" id="user-email" name="email" maxlength="254">

<label for="user-phone">Phone</label>
<input type="tel" id="user-phone" name="phone" maxlength="15">

<label for="site-url">Website</label>
<input type="url" id="site-url" name="website" maxlength="2048">

<label for="user-pass">Password</label>
<input type="password" id="user-pass" name="password" maxlength="128">

<label for="query">Search</label>
<input type="search" id="query" name="q" maxlength="100">
```

All six of these input types support `maxlength` because they accept free-form text where limiting character count is meaningful.