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.
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.
More HTML Tips
Can I Build a Website without HTML? How to Create a Basic HTML 5 Web Page Template How to Create a Download Link in HTML Full List of HTML Language Codes HTML Basics Part 9: HTML Main Elements HTML Basics Part 8: HTML Attributes HTML Basics Part 7: HTML Elements HTML Basics Part 6: HTML Tags HTML Basics Part 5: HTML Syntax HTML Basics Part 4: Getting Started with HTMLHTML Tips