HTML maxlength Attribute

Introduction

The maxlength attribute limits how many characters a user can type into a text-like <input> or <textarea>. Unlike max (which caps numeric or date/time values), maxlength counts letters, digits, spaces, and symbols. The browser blocks further typing once the limit is reached. Use it for usernames, bios, comments, and any field where database columns or UX design require a fixed upper length.

What You’ll Learn

Purpose of maxlength Attribute

The primary purpose of maxlength is to enforce an upper bound on text length at the point of entry. It protects database column sizes, keeps UI layouts predictable, and gives users immediate feedback before they over-type. For example, a tweet-style field might use maxlength="280"; a postal code field might use maxlength="10".

Browsers enforce maxlength by preventing additional keystrokes (and most paste operations truncate to the limit). This is softer UX than submitting an error after the fact. Still complement it with server-side length checks—client limits can be bypassed.

📝 Syntax

Add maxlength with a non-negative integer to text-like inputs or textarea:

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

<label for="bio">Bio:</label>
<textarea id="bio" maxlength="160"></textarea>

<label for="email">Email:</label>
<input type="email" id="email" maxlength="254">

Syntax Rules

• Value is a non-negative integer (character count), e.g. maxlength="50".
• Valid on input types: text, search, url, tel, email, password.
• Valid on <textarea> elements.
• Not valid on number, date, checkbox, radio, etc.—use max for those.
• Pair with minlength for a minimum character requirement.
• JavaScript IDL property: element.maxLength = 100 (camelCase, number).

💎 Values

The maxlength attribute accepts a non-negative integer:

• maxlength="20" — Up to 20 characters in a username field.
• maxlength="280" — Short post or status message limit.
• maxlength="5000" — Longer textarea content with a generous cap.
• maxlength="0" — Effectively blocks all input (rare; avoid confusing users).
• Attribute absent — No HTML-enforced character limit (browser default).

document.getElementById("dynamicField").maxLength = 100;
document.getElementById("comment").setAttribute("maxlength", "500");

Applicable Elements

maxlength vs max vs minlength

Examples Gallery

Text input with live counter, form with textarea limit, and dynamic maxLength with JavaScript.

<label for="bio">Short bio:</label>
<input type="text" id="bio" maxlength="50">

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

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

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

<input type="text" id="dynamicField" maxlength="10">

<script>
  document.getElementById("dynamicField").maxLength = 25;
</script>

♿ Accessibility

• Announce limits in labels or hints — e.g. “Bio (max 50 characters)” so screen reader users know the cap before typing.
• Provide live character counts — Use visible text updated on input events; consider aria-live="polite" for dynamic counters.
• Do not rely on maxlength alone — Assistive technology users still need server-validated limits.
• Avoid overly tight limits — Restrictive caps frustrate users and may block valid names or messages.
• Pair with clear error messages — When using minlength, explain requirements in plain language.

💡 Best Practices