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 input text length using CSS3?
With HTML, you can easily limit input length using the maxlength attribute. However, with CSS3, it is not possible to limit the number of input characters, since CSS deals with presentation (how your web page looks) rather than functionality or behavior.
CSS cannot impose functional restrictions like character limits. The maxlength attribute is an HTML attribute that controls behavior, not presentation.
Syntax
/* CSS cannot limit input text length */ /* Use HTML maxlength attribute instead */
HTML Solution
To limit input text length, you must use the HTML maxlength attribute −
Example
The following example demonstrates how to limit input text length using the HTML maxlength attribute −
<!DOCTYPE html>
<html>
<head>
<title>HTML maxlength attribute</title>
<style>
form {
padding: 20px;
font-family: Arial, sans-serif;
}
input[type="text"] {
padding: 10px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
width: 250px;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<label for="name">Student Name (Max 20 characters):</label><br><br>
<input type="text" id="name" name="name" maxlength="20"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
A form with a styled text input field appears. The input field accepts a maximum of 20 characters and stops accepting input once the limit is reached. The form includes a green submit button.
Key Points
| Method | Purpose | Implementation |
|---|---|---|
| CSS | Styling and presentation | Cannot limit input length |
| HTML maxlength | Functional behavior | Limits character input effectively |
Conclusion
CSS3 cannot limit input text length as it handles presentation, not functionality. Use the HTML maxlength attribute to restrict the number of characters users can enter in input fields.
1K+ Views
