How to limit the number of characters allowed in form input text field?

HTML Web Development Front End Technology

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 andMinimum 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>