Open In App

How to specify minimum &maximum number of characters allowed in an input field in HTML ?

Last Updated : 12 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to specify the minimum and maximum of characters allowed in an input field in HTML. Given an input field the task is to set the minimum/maximum number of characters allowed in an input field in HTML.

To set the maximum character limit in the input field, we use <input> maxlength attribute. This attribute is used to specify the maximum number of characters entered into the <input> element.

To set the minimum character limit in the input field, we use <input> minlength attribute. This attribute is used to specify the minimum number of characters entered into the <input> element.

Syntax: 

<input maxlength="number1">
<input minlength="number2">

Attribute Value: 

  • number1: It contains a single value number which allows the maximum number of characters in <input> element. Its default value is 524288.
  • number2: The minimum number of characters required in input fields.

Example 1: We will set the limit of a maximum number of characters allowed in input fields.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h3>
        How to specify the maximum number
        of characters <br>allowed in an
        input field in HTML?
    </h3>
    <form action="#">
        Username:
        <input type="text"
               name="username"
               maxlength="12">
          <br><br>
        Password:
        <input type="password"
               name="password"
               maxlength="10">
          <br><br>
        <input type="submit"
               value="Submit">
    </form>
</body>
 
</html>


Output: 

frt

Example 2: we will set the limit of the maximum & minimum number of characters allowed in input fields.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>
          GeeksforGeeks
      </h1>
    <h3>
        How to specify the maximum & minimum number
        of characters <br>allowed in an
        input field in HTML?
    </h3>
    <form action="#">
        Username:
        <input type="text"
               name="username"
               minlength="12"
               maxlength="20"><br><br>
        Password:
        <input type="password"
               name="password"
               minlength="10"
               maxlength="20">
          <br><br>
        <input type="submit" value="Submit">
    </form>
</body>
 
</html>


Output:



Similar Reads

How to specify an input field must be filled out before submitting the form in HTML ?
In this article, we will specify an input field that must be filled out before submitting the form. The HTML required attribute is a Boolean attribute which is used to specify that the input element must be filled out before submitting the form. This attribute works with other types of input like radio, checkbox, number, text, etc. Syntax: &lt;inpu
1 min read
How to specify an input field is read-only in HTML ?
In this article, we will specify an input field is read-only in HTML. The readonly attribute of &lt;input&gt; element is used to specify that the input field is read-only. If an input is readonly, then it’s content cannot be changed but can be copied and highlighted. It is a boolean attribute. Syntax: &lt;input readonly&gt; Example: This example us
1 min read
How to specify the legal number intervals for an input field in HTML5 ?
In this article, we learn how to set the legal number intervals in the input field. This helps the user to enter numbers that follow the given interval and disallows any other value during validation. We have to use the step attribute of the &lt;input&gt; element to set up the legal intervals in the input field. We will first create a form that con
2 min read
How to validate if input in input field has alphanumeric characters only using express-validator ?
In HTML forms, we often required validation of different types. Validate existing email, validate password length, validate confirm password, validate to allow only integer inputs, these are some examples of validation. In a certain input field, only alphanumeric characters are allowed i.e. there not allowed any special characters. We can also vali
4 min read
How to validate if input in input field has ASCII characters using express-validator ?
In HTML forms, we often required validation of different types. Validate existing email, validate password length, validate confirm password, validate to allow only integer inputs, these are some examples of validation. In a certain input field, only Ascii characters are allowed i.e. there is not allowed any Non-ASCII characters (Ex: ñ). We can als
4 min read
How to specify multiple forms the select field belongs to in HTML ?
The task is to specify multiple forms the select field belongs to. In simple wording, we have to find out which form the specific select belongs to. You can achieve this task by using the form attribute. select element - It is used to create a drop-down list in HTML.form element - It is used to create a form for user input.form attribute - This att
2 min read
Which input type is used to hide the input field to be displayed in HTML Form ?
The form tag is generally used to create forms for entering data. We can use different form tag attributes like text boxes, text area, checkboxes, radio buttons, buttons, dropdown list, etc. to collect data from the users. We need to use the HTML &lt;input type=”hidden”&gt; type for hiding the input field. Using this attribute, the input field will
1 min read
How to validate if input in input field has integer number only using express-validator ?
In HTML forms, we often required validation of different types. Validate existing email, validate password length, validate confirm password, validate to allow only integer inputs, these are some examples of validation. In a certain input field, only integer numbers are allowed i.e. there not allowed any strings, special characters, or anything oth
5 min read
How to validate if input in input field has decimal number only using express-validator ?
In HTML forms, we often required validation of different types. Validate existing email, validate password length, validate confirm password, validate to allow only integer inputs, these are some examples of validation. In a certain input field, only decimal numbers are allowed i.e. there not allowed any strings, special characters, or anything oth
5 min read
How to validate if input in input field is divisible by or multiple of a number using express-validator ?
In HTML forms, we often required validation of different types. Validate existing email, validate password length, validate confirm password, validate to allow only integer inputs, these are some examples of validation. In a certain input field, only numbers that are multiples of a particular number are allowed i.e. there not allowed any letters, s
5 min read