search

Home  >  Article  >  Web Front-end  >  How can we display text area in HTML?

How can we display text area in HTML?

王林
王林forward
2023-08-21 23:25:081977browse

How can we display 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.

HTML textarea tag defines a multi-line plain text editing control. Because the text space can hold an unlimited number of characters (usually Courier), the text is displayed in a fixed-width font. In forms, textareas are often used to collect user input, such as comments or ratings. After the form is submitted, the name attribute will be required for references in the form data.

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 use a 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>

When running the above script, the output window pops up, showing an input field for entering a name and a text area for introducing yourself, as well as a submit button. If you click the submit button, the form will be 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 is executed, it generates an output that contains a textarea with the address field populated with text, and a click-to-change button

If the user clicks on the button, the text in the textarea gets changed.

The Chinese translation of

Example 3

is:

Example 3

Let us consider another example, we are using 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.

The above is the detailed content of How can we display text area in HTML?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Which browsers support canvasNext article：Which browsers support canvas

Related articles

See more