How to limit the number of characters entered in a textarea in an HTML

In HTML, we can create form to accept and store information entered by the user with the help of various elements. These elements are also known as form elements for e.g.: textfield (textbox), radio buttons, checkboxes, dropdown or combo box, reset and submit buttons.

TextArea is one of the elements that can be created within a form. The textarea is used as a multiline control wherein a user can enter data in many rows and columns.

The TextArea control is used for purposes like entering remarks, suggestions, address information, body of e-mail, comments etc. where the size of text is larger than the normal textfield because a textfield is a single line input control which takes data in one line.

Example

Let us understand the basic HTML code to create a textarea of default width and height.

<html>
<head><title>Feedback Form..</title>
   <style>
      h1{font-family:Algerian;font-size:20;color:blue;text-align:center}
   </style>
</head>
<body>
   <h1>Feedback Form..</h1>
   <form id="feedback_form">
      <label for="label1">Enter your feedback here:</label>
      <textarea id="t1"> </textarea>
   </form>
</body>
</html>

Example

To set the width and height of the textarea of your own choice, you can specify the desired number of rows and columns. For this, we can make use of rows and cols attributes of <textarea> tag. Following is the code shown below along with the output.

<html>
<head><title>Feedback Form..</title>
   <style>
      h1{font-family:Algerian;font-size:20;color:blue;text-align:center}
   </style>
</head>
<body>
   <h1>Feedback Form..</h1>
   <form id="feedback_form">
      <table>
         <tr>
            <td>
               <label for="label1">Enter your feedback:</label>
            </td>
            <td>
               <textarea id="t1" rows="10" cols="24">Type your valueable feedback here: </textarea>
            </td>
         </tr>
     </table>
   </form>
</body>
</html>

When the information entered in the textarea exceeds its height, then the vertical scrollbar gets activated automatically.

Note − By default, we can enter data in a textarea upto 5,24,288 characters.

In some cases, there is a need of putting a limit on the size of characters that can be typed in a textarea. So in that case, we can use maxlength attribute to control the number of characters entered in a textarea.

Example

Suppose, in websites where a person is typing his or her experience or an article or a speech, there must be some limit on number of characters. So web designers may use maxlength attribute to put a restriction on the limit of characters typed in a textarea. Let us understand with the help of an example −

<html>
<body>
   <form id="feedback_form">
      <label for="label1">Enter your feedback (150 words):</label>
      <textarea id="t1" maxlength="150"> </textarea>
   </form>
</body>
</html>

In this program, the limit on number of characters is set to 150 characters only which means it will stop typing as we are not allowed to type beyond “150” characters.

We have already discussed above that cols attribute can specify the width of the textarea which means we can type maximum upto the number of columns, but if we use cols and maxlength attributes together in a <textarea> tag, then cols attribute will only set the width of the textarea and it will not be able to put any restriction in terms of number of characters whereas maxlength property will be imposed and the limit is set.

Example

You can try this code −

<html>
<body>
   <form id="feedback_form">
      <label for="label1">Enter your feedback (150 words):</label>
      <textarea id="t1" cols="20" rows="10" maxlength="5"> </textarea>
   </form>
</body>
</html>

This attribute is very useful in putting the restriction on data size in a textarea and supported by all the browsers.

How to limit the number of characters entered in a textarea in an HTML form?

Example

Example

Example

Example