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 do we display a text area in HTML?
The task we are going to perform in this article is how do we display a text area in HTML. Let’s dive into the article for getting a clear idea on how we display text area.
An HTML textarea tag defines a multi-line plain-text editing control. The text appears in a set-width font since a text space can carry an endless number of characters (usually Courier). In a form, the textarea is typically used to gather user inputs like comments or reviews. After the form is submitted, the reference in the form data will require the name property.
Let’s look into the following examples to know more about how do we display a textarea in HTML.
Example 1
In the following example we are using the multi-line input control.
<!DOCTYPE html>
<html>
<body>
<form action="https://www.tutorialspoint.com/index.htm">
<label for="name">NAME:</label><br>
<input type="text" id="name" name="name"><br>
<p><label for="comment">About Yourself:</label></p>
<textarea id="comment" name="comment" rows="5" cols="35">
I'm from Hyderabad,Telengana
</textarea><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
On running the above script, the output window pops up, displaying the input field for name and a textarea for about yourself, along with a submit button. If you click on the submit button, the form gets submitted.
Example 2:Using JavaScript
Considering the following example we are running script to change the context in the text area.
<!DOCTYPE html>
<html>
<body>
Address:<br>
<textarea id="tutorial">
kavuri incore 9
Hyderabad
</textarea>
<button type="button" onclick="myFunction()">Click To Change</button>
<script>
function myFunction() {
document.getElementById("tutorial").value = "Madhapur , Telangana";
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of a textarea for the address field filled with text along with a click to change button.
If the user clicks on the button, the text in the textarea gets changed.
Example 3
Lets consider the another example where we are using the textarea tag
<!DOCTYPE html>
<html>
<head>
<title>HTML textarea Tag</title>
</head>
<body>
<form action = "/cgi-bin/hello_get.cgi" method = "get">
Enter subjects
<br/>
<textarea rows = "5" cols = "50" name = "description"></textarea>
<input type = "submit" value = "submit" />
</form>
</body>
</html>
When the script gets executed, the output window will pop up, providing the input type for textara along with a submit button.
2K+ Views
