How to Limit the Number of Characters for Input Fields in HTML

In this tutorial, I will show you how you can easily apply a character limit to form input fields in HTML with a couple of examples.

Thumbnail Blaster - Video Thumbnail Creation Software

There is no clear information about the absolute maximum number of characters that can be entered into an input field; Mozilla Developer Network says it's infinite, W3Schools says it's 524288. Whichever is the case, even if there is no limit from the form side, the amount a user can enter will most probably be limited by the script that handles the input data or the database that is used to store the entered info.

The maximum number of characters an input field can have is also limited by the method you are using to get the information submitted via the form. For example, the GET method accepts up to 2048 characters, whereas the POST method may have a much higher limit depending on the server settings.

You may also set your own character number limits for the input fields on your forms. If you have a web form on your website with input fields such as username, password or phone number, you may want to set limits to the maximum numbers of characters a user may enter into these fields. For example, if the usernames on your system can have a maximum of 30 characters, the username input field on your new account registration form should have a limit of 30 characters.

Similarly, if the passwords can be 20 characters in length, the password input field should have a maximum length limit of 20. Another example is phone numbers, which usually have a standard length, e.g. 10 characters.

Now, let's see how to set a limit to the number of characters of input fields.

HTML Input Field Character Limit

You can use the maxlength attribute for the <input> HTML element when the type of the input element is one of the following: text, password, email, url, tel, search. You can also use the maxlength attribute for the textarea element to limit the number of characters a user can enter into the text box.

Below is an example for the use of maxlength attribute:

<form action="register.php" method="post">
  Username: <input type="text" name="username" maxlength="30">
  Password: <input type="password" name="password" maxlength="20">
  Phone: <input type="text" name="phone" maxlength="10">

Keep in mind that maxlength will work properly only when you enter integer values. If you leave it empty or if you use a negative value, it will have the default maximum number of characters value.

TIP: Do not confuse the maxlength attribute with the size attribute which sets the visible width of the input field in characters. You don't need to specify the size attribute if you are styling your input fields with CSS.

Let's do another example with textarea element.

<form action="contact.php" method="post">
  Name: <input type="text" name="name">
  Email: <input type="text" name="email">
  Message: <textarea name="message" maxlength="200">

The above code limits the number of characters (including punctuation and white spaces) a user can enter into the message box, which is defined by the textarea element.

This is how you can easily specify limits for the maximum number of characters users are allowed to enter into the input fields. This can also be achieved via JavaScript, but let's leave that topic to another tutorial. Please let me know if you have any questions and if you liked this tutorial, please share it.

Was this post helpful?

Please consider sharing it, and supporting us with a small tip. Thank you :)

f t g+ in