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 entered in a textarea in an HTML form?
In HTML, we can create forms to accept and store information entered by the user with the help of various elements. The textarea is one such element that allows users to enter multiline text data, unlike regular text fields which are single-line input controls.
The textarea control is commonly used for entering remarks, suggestions, address information, email body content, comments, or any text that requires multiple lines. By default, a textarea can accept up to 524,288 characters, but we can limit this using the maxlength attribute.
Syntax
Following is the basic syntax for creating a textarea with character limit −
<textarea maxlength="number">Default text</textarea>
Here, number represents the maximum number of characters allowed in the textarea.
Basic Textarea Example
Let us understand the basic HTML code to create a textarea with default dimensions −
<!DOCTYPE html>
<html>
<head>
<title>Basic Textarea</title>
<style>
h1 { font-family: Arial, sans-serif; font-size: 24px; color: blue; text-align: center; }
body { font-family: Arial, sans-serif; padding: 20px; }
</style>
</head>
<body>
<h1>Feedback Form</h1>
<form id="feedback_form">
<label for="t1">Enter your feedback here:</label><br><br>
<textarea id="t1" name="feedback"></textarea>
</form>
</body>
</html>
This creates a basic textarea with default dimensions that users can resize and type into without any character restrictions.
Setting Textarea Dimensions
To set custom width and height for the textarea, we can use the rows and cols attributes −
<!DOCTYPE html>
<html>
<head>
<title>Custom Textarea Dimensions</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
h1 { color: blue; text-align: center; }
label { font-weight: bold; }
</style>
</head>
<body>
<h1>Feedback Form</h1>
<form id="feedback_form">
<label for="t1">Enter your feedback:</label><br><br>
<textarea id="t1" name="feedback" rows="10" cols="40" placeholder="Type your valuable feedback here..."></textarea>
</form>
</body>
</html>
When the information entered exceeds the textarea height, a vertical scrollbar appears automatically to accommodate additional content.
Limiting Characters with maxlength Attribute
The maxlength attribute restricts the number of characters that can be entered in a textarea. This is particularly useful for social media posts, comments, or any content that requires character limitations.
Example − Basic Character Limit
<!DOCTYPE html>
<html>
<head>
<title>Textarea with Character Limit</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.form-group { margin-bottom: 15px; }
label { font-weight: bold; color: #333; }
textarea { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
</style>
</head>
<body>
<h2>Tweet Your Thoughts</h2>
<form>
<div class="form-group">
<label for="tweet">Enter your tweet (max 280 characters):</label><br><br>
<textarea id="tweet" name="tweet" maxlength="280" rows="4" cols="50" placeholder="What's happening?"></textarea>
</div>
</form>
</body>
</html>
In this example, users cannot type more than 280 characters. The textarea will stop accepting input once the limit is reached.
Example − Combining Dimensions with Character Limit
<!DOCTYPE html>
<html>
<head>
<title>Textarea with Dimensions and Limit</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.container { max-width: 600px; margin: 0 auto; }
textarea { padding: 10px; border: 2px solid #ddd; border-radius: 5px; font-size: 14px; }
.char-info { color: #666; font-size: 12px; margin-top: 5px; }
</style>
</head>
<body>
<div class="container">
<h2>Product Review</h2>
<form>
<label for="review">Write your review (maximum 500 characters):</label><br><br>
<textarea id="review" name="review" rows="8" cols="60" maxlength="500" placeholder="Share your experience with this product..."></textarea>
<div class="char-info">Character limit: 500</div>
</form>
</div>
</body>
</html>
Here, the cols attribute sets the textarea width to 60 columns, rows sets the height to 8 rows, while maxlength restricts input to 500 characters. The cols and rows attributes only control visual dimensions, while maxlength enforces the character restriction.
Interactive Character Counter
We can enhance user experience by showing remaining characters dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Textarea with Character Counter</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.form-container { max-width: 500px; margin: 0 auto; }
textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; resize: vertical; }
.counter { text-align: right; margin-top: 5px; font-size: 14px; color: #666; }
.counter.warning { color: #ff6b6b; }
</style>
</head>
<body>
<div class="form-container">
<h2>Leave a Comment</h2>
<form>
<label for="comment">Your comment:</label><br><br>
<textarea id="comment" name="comment" maxlength="200" rows="5" placeholder="Share your thoughts..." oninput="updateCounter()"></textarea>
<div id="counter" class="counter">200 characters remaining</div>
<br>
<button type="submit">Post Comment</button>
</form>
</div>
<script>
function updateCounter() {
var textarea = document.getElementById('comment');
var counter = document.getElementById('counter');
var remaining = 200 - textarea.value.length;
counter.textContent = remaining + ' characters remaining';
if (remaining <= 20) {
counter.classList.add('warning');
} else {
counter.classList.remove('warning');
}
}
</script>
</body>
</html>
This example shows a real-time character counter that updates as users type. When fewer than 20 characters remain, the counter text turns red as a warning.
Leave a Comment [Textarea with placeholder text] 200 characters remaining [Post Comment button] (As user types, counter updates: "195 characters remaining", "190 characters remaining", etc.)
Key Points
The
maxlengthattribute prevents users from entering more characters than specifiedUnlike
rowsandcolswhich only control visual dimensions,maxlengthenforces actual content restrictionsCharacter limits include spaces, line breaks, and special characters
The
maxlengthattribute is supported by all modern browsersCombining
maxlengthwith JavaScript provides better user experience through real-time feedback
Browser Compatibility
The maxlength attribute for textarea is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. This makes it a reliable solution for character limitation across different platforms.
Conclusion
The maxlength attribute provides a simple and effective way to limit characters in HTML textarea elements. This attribute works independently of visual sizing attributes like rows and cols, making it essential for controlling user input length in forms, comments, and content submission areas.
15K+ Views
