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

How can we display text area in HTML?

王林
Release: 2023-08-21 23:25:08
forward
1999 people have browsed it

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>
Copy after login

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>
Copy after login
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>
Copy after login

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!

Related labels:
source:tutorialspoint.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template