Attributes minlength and maxlength

The minlength and maxlength attributes set the minimum and maximum number of characters that can be entered in <input> or <textarea> fields.

In this example, you can enter a minimum of 4 characters and a maximum of 8 in <input>, and a minimum of 50 and a maximum of 1000 in <textarea>.

        
          
          <input minlength="4" maxlength="8"><textarea minlength="50" maxlength="1000">
          <input minlength="4" maxlength="8">

<textarea minlength="50" maxlength="1000">

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Now let's create a password field and limit the number of allowed characters:

        
          
          <label for="password">  Enter password (from 8 to 16 characters):</label><input  type="password"  id="password"  name="password"  minlength="8"  maxlength="16"  required>
          <label for="password">
  Enter password (from 8 to 16 characters):
</label>

<input
  type="password"
  id="password"
  name="password"
  minlength="8"
  maxlength="16"
  required
>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Values for minlength and maxlength are whole numbers from 0 and above. For example, 0, 14 or 1000. If no value is specified or if it is specified incorrectly, there will be no length limitations on the field. Also, the value of maxlength cannot be less than the value of minlength. The field will always be incorrectly filled if the maximum value is less than the minimum.

Browsers use UTF-16 encoding to calculate the length of the field. This means that the length is equal to the number of characters in the case of letters, numbers, and punctuation marks. For example, if you set minlength="3", then a field filled with abc and 123 matches the minimum character restriction.

minlength and maxlength are often used together with another attribute required, which makes the field mandatory.

In JavaScript, there is a special interface ValidityState, which provides access to field validations. Using the properties tooLong and tooShort, you can check the length of a field with the attributes minlength and maxlength. Both properties return true if the user entered too many or too few characters, and false when the entered data has the correct length. It is better to validate the form after clicking the submit button.

When setting length limits on a field of type number, the minlength and maxlength attributes do not limit the minimum and maximum number of characters that can be entered from the keyboard.

Try entering more than 3 digits in this demo.

        
          
          <label for="items">  Select quantity (maximum 999):</label><input  type="number"  min="1"  max="999"  maxlength="3"  id="items">
          <label for="items">
  Select quantity (maximum 999):
</label>
<input
  type="number"
  min="1"
  max="999"
  maxlength="3"
  id="items"
>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

To bypass this peculiarity, use JavaScript or regular expressions. For example, in this field, we can only enter 3 characters thanks to the onKeyPress event handler. When you try to enter more characters, the script simply prevents it.

        
          
          <label for="items">  Select quantity (maximum 999):</label><input  type="number"  id="items"  pattern="\d+"  min="1"  max="999"  onKeyPress="if(this.value.length === 3) return false">
          <label for="items">
  Select quantity (maximum 999):
</label>
<input
  type="number"
  id="items"
  pattern="\d+"
  min="1"
  max="999"
  onKeyPress="if(this.value.length === 3) return false"
>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Fields with incorrect data can be styled using the pseudo-classes :invalid or :user-invalid for all fields or :out-of-range for fields with type="number".

Styles applied to the field styled via :invalid will apply in an empty state and in a state when an incorrect number of characters has been entered.

        
          
          input:invalid {  border-color: #2E9AFF;  background-color: rgb(46, 154, 255, 0.1);  outline: none;}
          input:invalid {
  border-color: #2E9AFF;
  background-color: rgb(46, 154, 255, 0.1);
  outline: none;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Styles from :user-invalid will apply to the field only when the user has entered an incorrect number of characters and has started interacting with other elements on the page.

        
          
          input:user-invalid {  border-color: #2E9AFF;  background-color: rgb(46 154 255 / 0.1);  outline: none;}
          input:user-invalid {
  border-color: #2E9AFF;
  background-color: rgb(46 154 255 / 0.1);
  outline: none;
}

        
        
          
            
            Copy
            Copied
            Failed to copy