HTML maxlength Attribute

The HTML maxlength attribute specifies the maximum number of characters a user can enter into supported <input> and <textarea> controls.

Elements That Use the maxlength Attribute

The maxlength attribute is used with text-based <input> controls and the <textarea> element.

Element	Description
`<input type="text">`	Limits the number of characters that can be entered into a text field.
`<input type="search">`	Limits the number of characters that can be entered into a search field.
`<input type="url">`	Limits the number of characters that can be entered into a URL field.
`<input type="tel">`	Limits the number of characters that can be entered into a telephone field.
`<input type="email">`	Limits the number of characters that can be entered into an email field.
`<input type="password">`	Limits the number of characters that can be entered into a password field.
`<textarea>`	Limits the number of characters that can be entered into a multiline text control.

maxlength Value

The value of the maxlength attribute must be a non-negative integer. It specifies the maximum permitted length of the value entered by the user.

<input type="text" maxlength="20">

In this example, the user can enter no more than 20 characters into the text field. A value of 0 prevents the user from entering any characters.

Using maxlength with <input>

The maxlength attribute can be used with text-based input types when a field should accept no more than a specified number of characters.

<label for="username">Username:</label>
<input type="text" id="username" name="username" maxlength="20">

Browsers normally prevent the user from typing additional characters after the maximum length has been reached.

Using maxlength with <textarea>

The maxlength attribute can also limit the amount of text a user enters into a multiline <textarea>.

<label for="message">Message:</label>
<textarea id="message" name="message" maxlength="200"></textarea>

In this example, the user can enter no more than 200 characters into the textarea.

maxlength and minlength

The maxlength and minlength attributes can be used together to define both the minimum and maximum permitted length of user input.

<input type="text" minlength="5" maxlength="20" required>

In this example, a user-entered value must contain at least 5 characters and no more than 20 characters when the field is required and form validation is performed. The minlength value must not be greater than the maxlength value.

Constraint Validation

The maxlength attribute participates in HTML constraint validation. If a user-edited value exceeds the permitted length, the control has a tooLong validity error and is considered invalid.

Browsers normally prevent users from entering more characters than maxlength permits, but validation remains part of the control's defined behavior. Client-side limits should not replace server-side validation when submitted data must meet a maximum length.

Common Mistakes

Do not confuse maxlength with max. The maxlength attribute limits the length of text entered into supported controls, while max limits numeric, date, time, meter, or progress values.

Do not use maxlength on <input type="number">. The attribute does not apply to number inputs. Use min and max when numeric values need limits.

Do not set minlength to a value greater than maxlength. When both attributes are present, the maximum must be equal to or greater than the minimum.

Do not rely only on maxlength to enforce limits on data received by a server. Submitted data should still be validated on the server.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The maxlength attribute is widely supported on text-based <input> controls and <textarea> elements in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the maxlength Attribute

The example limits a username to 10 characters. Type into the field and notice that the browser prevents additional characters from being entered after the maximum length is reached.

Play in Editor

Summary

The HTML maxlength attribute limits the maximum number of characters a user can enter into supported <input> and <textarea> controls. Its value is a non-negative integer, and it can be combined with minlength to establish an allowed range for the length of user input.