How to limit characters of an input in HTML
In this article we will learn how to limit characters of an input, both a minimum and a maximum number, just using HTML in a practical way.
Hey you, programmer, okay? Let’s learn something new?
Watch this content on YouTube:
We can often solve validations in HTML instead of just in the backend
One is the minimum and maximum number of characters that users must fill in inputs
Of course, this doesn’t mean you shouldn’t validate on the backend, as it’s a matter of security, execute both validations.
Since the front-end has fewer features for this and can be bypassed by more advanced users or users who understand a minimum of programming
That said, let’s look at the minlength and maxlength attributes that limit the number of digits for the input
Also doing a validation, see how it works:
<div> <input type="text" name="test1" minlength="3"> </div> <div> <input type="text" name="test2" maxlength="10"> </div>
And now the validations that are displayed to the user in the browser:
Maxlength does not allow you to enter more than what is proposed in the attribute.
And with these two attributes we can limit input characters, whatever type is
In this article we learned that we have a possibility to regulate the minimum and maximum number of digits that the user will fill in any field of the forms
For the minimum quantity we use minlength, and for the maximum quantity the maxlength
Keeping in mind that attributes are a good way out for fast front validation, but the backend must also have its own validation
This is to avoid malicious users and any bugs