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

Conclusion

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