What is maxlength?
The maxlength attribute defines the maximum string length that users can enter into an <input> or <textarea> element. This built-in browser capability provides immediate client-side validation without requiring JavaScript, improving both user experience and data quality. Our web development services team recommends implementing character limits as part of comprehensive form validation strategies.
Key points:
- Accepts an integer value of 0 or higher
- Measured in UTF-16 code units
- Works with text, password, search, tel, email, and url input types
- Browser automatically prevents input beyond the limit
- If no maxlength specified, no practical limit exists (default: 524,288)
Basic Syntax
The fundamental syntax involves adding the maxlength attribute with a numeric value representing the maximum character count:
<!-- Username limited to 12 characters -->
<input type="text" name="username" maxlength="12" />
<!-- Password limited to 10 characters -->
<input type="password" name="password" maxlength="10" />
<!-- Email limited to 30 characters -->
<input type="email" name="email" maxlength="30" />
The browser will automatically prevent users from typing beyond the specified limit, providing immediate visual feedback.
Textarea maxlength
The <textarea> element supports maxlength for limiting multi-line text input:
<label for="comment">Leave a comment (max 500 characters):</label>
<textarea
id="comment"
name="comment"
maxlength="500"
rows="5"
placeholder="Share your thoughts..."></textarea>
Textarea-specific considerations:
- Line breaks (newlines) count as characters in the total
- Useful for comment sections, message bodies, descriptions
- Prevents database overflow issues
- Combine with
rowsattribute for optimal display
JavaScript Integration
JavaScript provides access to the maxLength property for reading and setting limits programmatically:
// Read the maxlength value
const inputElement = document.getElementById('username');
const maxChars = inputElement.maxLength;
console.log(`Maximum characters: ${maxChars}`);
// Set a new maxlength dynamically
inputElement.maxLength = 20;
// Check validity state
const validity = inputElement.validity;
if (validity.tooLong) {
console.log('Input value exceeds maximum length');
}
The ValidityState API includes a tooLong property that indicates whether the current value exceeds the maximum length. Understanding how these event-driven interactions work in JavaScript enables you to build more responsive form experiences.
When to Use maxlength
Apply limits when you have specific requirements for input size, database constraints, or UX considerations. Common use cases include usernames, bios, descriptions, and phone number fields.
Accessibility
Clearly communicate limits to all users through labels and helper text. Use aria-describedby to associate the limit with the input for screen reader users.
Combine with Other Validation
Use maxlength alongside minlength, required, and pattern attributes for comprehensive validation without custom JavaScript.
Consider User Experience
Avoid overly restrictive limits that frustrate users. Consider adding visual character counters to help users plan their input.
Complete Form Example
Combining maxlength with other validation attributes creates robust form inputs. This approach also improves SEO performance by ensuring search engines can properly crawl and index your forms without validation errors:
<form action="/submit" method="post">
<label for="username">Username (3-12 characters):</label>
<input
type="text"
id="username"
name="username"
minlength="3"
maxlength="12"
required />
<label for="bio">Bio (max 200 characters):</label>
<textarea
id="bio"
name="bio"
maxlength="200"
rows="4"></textarea>
<input type="submit" value="Submit" />
</form>
This approach leverages browser-native validation, which is faster and more reliable than JavaScript-based validation for basic constraints. Pair this with our AI automation services to create smart forms that adapt to user input patterns.