Limit Characters 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: 2023-09-02T10:53:26+05:30

69K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements