How to restrict user character input limit in ReactJS ?

How to Set Character Limits in HTML Input Fields?

Last Updated : 11 Oct, 2024

It’s often necessary to restrict the number of characters a user can input. This ensures data consistency and prevents users from entering values that are too long or too short. In this article, we will learn how to set the minimum and maximum number of characters allowed in an HTML input field.

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

How to Set Character Limits in HTML Input Fields

HTML provides built-in attributes for specifying the minimum and maximum character limits for input fields:

maxlength Attribute: Sets the maximum number of characters allowed.
minlength Attribute: Sets the minimum number of characters required.

Example 1: Setting a Maximum Character Limit

In this example, we will create an input field with a maximum character limit of 12.

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: Setting Both Minimum and Maximum Character Limits

In this example, we will set a minimum character limit of 12 and a maximum character limit of 20 for an input field.

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 &amp; 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:

How to restrict user character input limit in ReactJS ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to Add Input Field inside Table Cell in HTML ?

In HTML, adding input fields inside the table cells can be done to make the application user interactive and useful in the scenarios of building forms, data entry systems, etc. Below are the approaches to add input field inside a Table Cell in HTML: Table of Content Using 'input' tagUsing data Attri

How to restrict user character input limit in ReactJS ?

To restrict the user character input limit in React JS we can simply set a max input limit to the input box or we can also monitor the input length and make a custom function to set the restriction. Pre-requisite:NPM & Node.jsReact.jsReact HooksHTML onchange EventApproaches to restrict user char

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 <input> 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. Synta

How to create a multiline input control text area in HTML5 ?

The HTML <textarea> tag is used to specify a multiline input control text area in HTML5. Â The <cols> and <rows> attributes specify size of a textarea. Syntax <textarea rows="" cols=""> Contents... </textarea> The <textarea> tag contains 5 attributes that are liste

How to Convert Special Characters to HTML in JavaScript?

In JavaScript, special characters like less-than (<), greater-than (>), and others can cause rendering issues in HTML because they are interpreted as tags. To display these characters correctly in HTML, it's necessary to convert them into their respective HTML entities. This process prevents t

How to set float input type in HTML5 ?

HTML5 is the latest version of Hypertext Markup Language (HTML), the standard language for creating web pages and web applications. With HTML5, new input types were introduced to make web form creation easier and more accessible. These input types include text, password, checkbox, radio, submit, res

How to define keyboard input in HTML5 ?

The phrase tag is used to define the keyboard input. The text enclosed by <kbd> tag is typically displayed in the browserâ€™s default monospace font. In this article, we define the keyboard input by using various types of tags like <kbd>, <code>, <em>, <var>, and <samp

How to Hide Value or Text From Input Control in HTML ?

Hiding a value or text from an input control is a common requirement in web development. Whether for security purposes, such as password fields, or to maintain a clean user interface, HTML and CSS offer several methods to achieve this. This article explores various approaches to hide text or values

How to limit character input in textarea including count in jQuery ?

In this article, we will set the limit character input in the textarea including count in the jQuery. To set the limit character in the input textarea, we use length property. Approach: We create an input text area with a given maxlength and then use jQuery code to limit the characters. First, we se

How to set character encoding for document in HTML5 ?

In this article, we will learn how to set character encoding for document in HTML5. Character encoding is a method of defining a mapping between bytes and text. To display an HTML document correctly, we must choose a proper character encoding. The different types of character encoding include: ASCII