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>
   <form action="">
      <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
      <input type="submit" value="Submit">

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>
   <textarea id="tutorial">
      kavuri incore 9
   <button type="button" onclick="myFunction()">Click To Change</button>
      function myFunction() {
         document.getElementById("tutorial").value = "Madhapur , Telangana";

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>
   <title>HTML textarea Tag</title>
   <form action = "/cgi-bin/hello_get.cgi" method = "get">
      Enter subjects
      <textarea rows = "5" cols = "50" name = "description"></textarea>
      <input type = "submit" value = "submit" />

When the script gets executed, the output window will pop up, providing the input type for textara along with a submit button.

Updated on: 15-Dec-2022

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started