How to Set a Minimum Character Limit on an HTML input Element?

You can use the minlength attribute (which is very well-supported across different browsers) on the HTML <input> element to enforce minimum number of characters that a user must enter for the input to be valid. For example:

<input type="text" minlength="3" />

This would limit an <input> element to a minimum of 3 (UTF-16 code units) characters.

For a more visual example, you could try the following HTML/CSS code:

<style>
input:invalid { border: 1px solid red; outline: none; }
</style>

<input type="text" minlength="3" required />

This would turn the border of the <input> element red, as long as the input is invalid/empty.

Please note that if no minlength is set on the <input> element, or a non-positive integer value is set, then no minimum character limit is imposed.