Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
We use <input> tag to get user input in HTML. To give a limit (or range) to the input field, we use the min and max attributes, which is to specify a maximum and minimum value for an input field respectively.
To set the maximum character limit in input field, we use <input> maxlength attribute. This attribute is used to specify the maximum number of characters enters the <input> field.
To set the minimum character limit in input field, we use <input> minlength attribute. This attribute is used to specify the minimum number of characters enters the <input> field.
First, we see how to set the maximum character limit in input field −
Syntax
Following is the syntax to set the maximum character limit in input field.
<input maxlength="enter_number">
Example
Following is the example program to set the maximum character limit in input field −
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form action = "#"> Email Id: <br> <input type = "text" name = "email_id" maxlength = "30" /> <br> Password: <br> <input type = "password" name = "password" maxlength = "10" /> <br> <input type = "submit" value ="Submit" /> </form> </body> </html>
Setting the MinimumCharacter Limit
Now, we see how to set the minimum character limit in input field;
Syntax
Following is the syntax to set minimum character limit in input field in JavaScript −
<input minlength="enter_number">
Example
Following is the example program to set minimum character limit in input field in JavaScript −
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form action="#"> Username: <input type="text" name="username" minlength="10"><br><br> Password: <input type="password" name="password" minlength="8"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
Using Both Maximum and Minimum Characters in an Input Field
Now let us see how to use both minimum limit character and maximum limit character in a input field −
Example
Following is the example program to set minimum and maximum character limit in input field in JavaScript −
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form action="#"> Username: <input type="text" name="username" minlength="10" maxlength="20"><br><br> Password: <input type="password" name="password" minlength="8" maxlength="10"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
65K+ Views
