Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to limit the number of characters entered in a textarea in an HTML form?
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, drop down 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 in order 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.
14K+ Views
