Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to limit the number of characters allowed in form input text field?
In this article, we will learn how to limit the number of characters allowed in form input text field using HTML attributes.
HTML provides built-in attributes to control the character limits in input fields. The maxlength attribute sets the maximum number of characters allowed, while the minlength attribute sets the minimum number of characters required for validation.
Syntax
Following is the syntax for the maxlength attribute −
<input type="text" maxlength="number">
Following is the syntax for the minlength attribute −
<input type="text" minlength="number">
Both attributes can be used together to set a character range −
<input type="text" minlength="5" maxlength="20">
Using the maxlength Attribute
The maxlength attribute prevents users from entering more characters than the specified limit. This is enforced by the browser and prevents further typing once the limit is reached.
Example
Following example demonstrates setting maximum character limits for different input fields −
<!DOCTYPE html>
<html>
<head>
<title>Maximum Character Limit</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Registration Form</h2>
<form action="#">
<label>Email Id (max 30 characters):</label><br>
<input type="text" name="email_id" maxlength="30" style="width: 300px; padding: 5px;"><br><br>
<label>Password (max 10 characters):</label><br>
<input type="password" name="password" maxlength="10" style="width: 300px; padding: 5px;"><br><br>
<input type="submit" value="Submit" style="padding: 8px 16px;">
</form>
</body>
</html>
In this example, the email field allows up to 30 characters and the password field allows up to 10 characters. Users cannot type beyond these limits.
Using the minlength Attribute
The minlength attribute sets the minimum number of characters required for form validation. Unlike maxlength, it does not prevent typing but validates the input during form submission.
Example
Following example shows how to set minimum character requirements −
<!DOCTYPE html>
<html>
<head>
<title>Minimum Character Limit</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Login</h2>
<form action="#">
<label>Username (minimum 10 characters):</label><br>
<input type="text" name="username" minlength="10" required style="width: 300px; padding: 5px;"><br><br>
<label>Password (minimum 8 characters):</label><br>
<input type="password" name="password" minlength="8" required style="width: 300px; padding: 5px;"><br><br>
<input type="submit" value="Submit" style="padding: 8px 16px;">
</form>
</body>
</html>
If users try to submit the form with fewer characters than required, the browser will display a validation message and prevent form submission.
Using Both minlength and maxlength Together
Combining both attributes creates a character range for input validation, ensuring users enter text within the specified limits.
Example
Following example demonstrates using both minimum and maximum character limits −
<!DOCTYPE html>
<html>
<head>
<title>Character Range Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Account Setup</h2>
<form action="#">
<label>Username (10-20 characters):</label><br>
<input type="text" name="username" minlength="10" maxlength="20" required style="width: 300px; padding: 5px;"><br>
<small style="color: #666;">Must be between 10 and 20 characters</small><br><br>
<label>Password (8-12 characters):</label><br>
<input type="password" name="password" minlength="8" maxlength="12" required style="width: 300px; padding: 5px;"><br>
<small style="color: #666;">Must be between 8 and 12 characters</small><br><br>
<input type="submit" value="Create Account" style="padding: 8px 16px;">
</form>
</body>
</html>
This example creates a username field that accepts 10-20 characters and a password field that accepts 8-12 characters. The browser enforces both limits automatically.
JavaScript Character Counter
For enhanced user experience, you can add a JavaScript character counter to show remaining characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Character Counter</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Message Form</h2>
<form>
<label>Your Message (max 100 characters):</label><br>
<textarea id="message" maxlength="100" oninput="updateCounter()" style="width: 400px; height: 80px; padding: 8px;"></textarea><br>
<span id="counter" style="color: #666;">0 / 100 characters</span><br><br>
<input type="submit" value="Send Message" style="padding: 8px 16px;">
</form>
<script>
function updateCounter() {
var textarea = document.getElementById('message');
var counter = document.getElementById('counter');
var currentLength = textarea.value.length;
var maxLength = textarea.getAttribute('maxlength');
counter.textContent = currentLength + ' / ' + maxLength + ' characters';
if (currentLength > maxLength * 0.8) {
counter.style.color = '#ff6b6b';
} else {
counter.style.color = '#666';
}
}
</script>
</body>
</html>
This example shows a live character counter that updates as the user types and changes color when approaching the limit.
Message field with counter showing: "45 / 100 characters"
Key Differences Between minlength and maxlength
| maxlength Attribute | minlength Attribute |
|---|---|
| Prevents typing beyond the specified limit | Allows typing but validates minimum length |
| Enforced immediately during typing | Enforced during form submission |
| No validation message shown | Shows browser validation message |
| Works without 'required' attribute | Typically used with 'required' attribute |
| Supported by all browsers | HTML5 attribute with modern browser support |
Conclusion
The maxlength attribute prevents users from typing beyond a character limit, while minlength validates minimum requirements during form submission. Using both attributes together creates effective character range validation for better form control and user experience.
70K+ Views
