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>

Updated on: 02-Sep-2023

64K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements