The textarea in HTML is where the user can type in his answers or responses to the queries in free text.
Unlike radio buttons, checkboxes and dropdowns, there are no fixed options, it is like the answer sheets we have during our exams. Wait, we know what you are thinking? “I usually write the same things multiple times for the same question in different ways to ensure the length of my answer goes up, what if the user does the same in the textarea?”
Well, in HTML forms, it would not be the quantity but the preciseness and the quality that will bring us more laurels, and it is highly unlikely that users would fill in long essays in a textarea when they are not getting marks for it, however; the points stands totally valid and as a designer we must be prepared for the worst scenarios.
In fact, the entire use case is totally possible in certain scenarios. One such case would be when the user is submitting a proposal for a job application portal and he needs to fill in the textarea with the question, ‘Tell us about yourself?’
Now, a user might finish this question in one line and another might need more than a thousand to finish the story of his life. However, it is highly unlikely that the reader who is expected to shortlist candidates on the bases on these questions is interested in your life story. Instead, he is interested in a short and precise answer which can help him in analyzing the person and his attributes.
Now, even if the candidates are not willing to take their hands off the lid and limit their storytelling prowess, but we, as web designers, must ensure that we limit their hands and provide a useful platform for both the applicants as well as the company. This is where the maxlength attribute comes to our rescue.
How does the maxlength attribute limit the characters in a textarea?
The maxlength attribute invariable puts the brakes on the free-flowing writer in us and lets us know that the textarea is certainly not the place to try our hands on something new.
Here is the code example with the maxlength attribute used:
<textarea rows="4" cols="50" maxlength="50" placeholder="Enter text here"></textarea>
- The maxlength attribute specifies a fixed number of characters that a textarea can take. The user can still choose to enter fewer characters than the maximum limit, but he/she cannot enter more.
- The maxlength attribute is supported by all modern browsers
- Even though maxlength limits the number of characters entered by the user, it is not the ideal way to perform validations and should only be used for character limitations on textarea for the end user.
Okay, I am curious, what happens when the user enters more characters than the limit specified with the maxlength?
Well, when the web designer uses the maxlength attribute on the text area, the user would not be able to type more than the specified limit.
So, keep pressing that keyword key until it breaks loose but you would not get any success.
Alright, not bad, but don’t you think a message saying, ‘The limit has reached’ or something would have been better?
Certainly, and like always, whatever HTML can’t do, Javascript does. A simple Javascript message is a basic and often underrated utility that more often than not proves to be the savior.
The code example throws a message just before the user reaches the maxlength. so the user gets to know why the new keys are not appearing in the textarea.