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 create a multiline input control text area in HTML5
Overview
The text area is an HTML tag which is used to write a multiline text in it. So to control the multiline text inside the text area can be achieved with the help of some predefined HTML attribute. These HTML attributes are maxlength, minlength, rows, column and readonly. By using these attributes we can control the text inside the text area.
Syntax
The syntax to create a text area in the HTML is −
<textarea name="" id="" cols="" rows=""></textarea>
Algorithm
Step 1 − Create a HTML boilerplate in your text editor.
Step 2 − Add the text area tag to the body of HTML code.
<textarea></textarea>
Step 3 − Now to make a limit of maximum length use maxlength attribute to it and assign any numerical value to it.
<textarea maxlength="100"></textarea>
Step 4 − The text area is created successfully, and the text area will be shown in your browser.
Example
In this example we have created a text area whose text is controlled using maxlength attributes. This attribute helps us to take full control over the text written inside the text area. By using this attribute in a text area tag, it limits the number of characters that can be written inside the box. As in this example the maximum length of the character is ‘100’, so we cannot write the character more than the given limit
<html> <head> <title>Text Multiline Control</title> </head> <body> <h2>Text Box With Maxlength Control</h2> <textarea name="textcontrol" id="" cols="30" rows="10" maxlength="100"></textarea> </body> </html>
Algorithm
Step 1 − Create a HTML boilerplate in your text editor.
Step 2 − Add the text box inside the body tag using HTML text area tag
Step 3 − Now add the readonly attribute to the text area and add the number of rows and columns to the text box.
Step 4 − Add a placeholder attribute to the text area, now add some text inside it.
Step 5 − The textarea with readonly control is ready and can be viewed on a browser.
Example
In this example we have created a text area box which is multiline controlled and has a read only property, which means the text written inside the text area is not editable and can only be read and in this example we have also fix the size of the text area by using the rows and cols attribute. In these attributes the number of rows and columns are assigned as numerical values. The text is pre written inside a placeholder attribute.
<html> <head> <title>Text Multiline Control</title> </head> <body> <h2>Text Box With Read Only, Rows and Cols Control</h2> <textarea name="textcontrol" id="" cols="30" rows="5" readonly placeholder="This is a text box which limits the number of character written inside it. This text box is readonly"></textarea> </body> </html>
Conclusion
The controlling of multiline text sometimes becomes important in terms of the user interface of the website as the text area in HTML has a property to expand as the numbers of characters increase inside the text box which can make the interface of the website look ugly. Many times these text boxes are used in the feedback section of an application, so by limiting the number of characters inside the text box it can avoid the long spam messages.
348 Views
