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 do we add the maximum number of characters allowed in an element in HTML?
In HTML, the maxlength attribute is used to limit the maximum number of characters that can be entered in an input field or textarea element. This attribute helps control user input and ensures data consistency in forms by preventing users from entering more characters than allowed.
Syntax
Following is the syntax for the maxlength attribute −
<input type="text" maxlength="number">
Following is the syntax for textarea elements −
<textarea maxlength="number"></textarea>
Here, number represents the maximum number of characters allowed. The value must be a non-negative integer.
Basic Usage with Input Fields
The maxlength attribute works with various input types including text, password, email, url, tel, and search.
Example − Login Form with Character Limits
<!DOCTYPE html>
<html>
<head>
<title>Maxlength Attribute Example</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
form {
display: inline-block;
text-align: left;
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
}
input[type="text"], input[type="password"] {
padding: 8px;
margin: 5px 0;
width: 200px;
}
</style>
</head>
<body>
<h2>User Registration</h2>
<form>
<label>Username: </label><br>
<input type="text" name="username" maxlength="15" placeholder="Max 15 characters"><br><br>
<label>Password: </label><br>
<input type="password" name="password" maxlength="20" placeholder="Max 20 characters"><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
The output displays a registration form where the username field accepts a maximum of 15 characters and the password field accepts up to 20 characters −
User Registration
Username: [_______________] (Max 15 characters)
Password: [_______________] (Max 20 characters)
[Register]
Using Maxlength with Textarea
The maxlength attribute is particularly useful for textarea elements where users can input longer text content like comments, descriptions, or messages.
Example − Comment Form with Character Limit
<!DOCTYPE html>
<html>
<head>
<title>Textarea Maxlength Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 600px;
margin: 0 auto;
}
textarea {
width: 100%;
padding: 10px;
border: 2px solid #ddd;
border-radius: 5px;
resize: vertical;
}
.char-info {
color: #666;
font-size: 14px;
margin-top: 5px;
}
</style>
</head>
<body>
<h2>Leave a Comment</h2>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" maxlength="50" style="width: 300px; padding: 8px;"><br><br>
<label for="comment">Comment:</label><br>
<textarea id="comment" name="comment" rows="5" maxlength="250" placeholder="Share your thoughts..."></textarea>
<div class="char-info">Maximum 250 characters allowed</div><br>
<input type="submit" value="Post Comment" style="padding: 10px 20px;">
</form>
</body>
</html>
The output shows a comment form where the name field is limited to 50 characters and the textarea accepts up to 250 characters −
Leave a Comment
Name: [_________________________]
Comment: [________________________]
[ ]
[ ]
[________________________]
Maximum 250 characters allowed
[Post Comment]
Combining Maxlength with Different Input Types
The maxlength attribute can be used with various input types for different validation purposes.
Example − Contact Form with Multiple Input Types
<!DOCTYPE html>
<html>
<head>
<title>Contact Form with Maxlength</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f5f5f5;
}
.form-container {
background: white;
padding: 30px;
border-radius: 10px;
max-width: 500px;
margin: 0 auto;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Contact Us</h2>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" maxlength="100">
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" maxlength="15">
</div>
<div class="form-group">
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" maxlength="100">
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="6" maxlength="500"></textarea>
</div>
<input type="submit" value="Send Message">
</form>
</div>
</body>
</html>
This example demonstrates different maxlength values for various input types: email (100 chars), phone (15 chars), subject (100 chars), and message (500 chars).
JavaScript Integration with Maxlength
You can enhance the maxlength attribute functionality with JavaScript to provide real-time character count feedback to users.
Example − Character Counter with Maxlength
<!DOCTYPE html>
<html>
<head>
<title>Maxlength with Character Counter</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 600px;
margin: 0 auto;
}
textarea {
width: 100%;
padding: 10px;
border: 2px solid #ddd;
border-radius: 5px;
resize: vertical;
box-sizing: border-box;
}
.counter {
text-align: right;
color: #666;
font-size: 14px;
margin-top: 5px;
}
.counter.warning {
color: #ff6600;
}
.counter.danger {
color: #ff0000;
}
</style>
</head>
<body>
<h2>Product Review</h2>
<form>
<label for="review">Write your review:</label><br>
<textarea id="review" name="review" rows="6" maxlength="300" placeholder="Share your experience with this product..."></textarea>
<div id="charCounter" class="counter">0 / 300 characters</div><br>
<input type="submit" value="Submit Review">
</form>
<script>
const textarea = document.getElementById('review');
const counter = document.getElementById('charCounter');
const maxLength = 300;
textarea.addEventListener('input', function() {
const currentLength = this.value.length;
counter.textContent = currentLength + ' / ' + maxLength + ' characters';
// Change color based on character count
counter.className = 'counter';
if (currentLength > maxLength * 0.8) {
counter.classList.add('warning');
}
if (currentLength > maxLength * 0.95) {
counter.classList.add('danger');
}
});
</script>
</body>
</html>
This example shows a dynamic character counter that changes color as the user approaches the character limit.
426 Views
