How do we set the visible number of lines in a text area in HTML?

HTML Web Development Front End Technology

This article will teach you how do we set the visible number of lines in a textarea in HTML. The HTML <textarea> element is useful for multi-line editing control and allows the user to enter a sizeable amount of free-form text.

Syntax

Following is the syntax to set the visible number of lines in text area −

<textarea rows = "value">

To display the number of rows, or number of visible text lines for the control, is specified using the HTML textarea rows attribute. Additionally, it specifies the textarea’s visible height.

Following are the examples to set the visible number of lines in a textarea in HTML.

Example 1

In the following example we are using the <textarea> row attribute mentioned with rows and cols.

<!DOCTYPE html>
<html>
<body>
   <textarea rows="7" cols="25">
      Doorno:11/2
      kavuri hills phase2
      madhapur,hyderabad
      telangana
   </textarea>
   <input type = "submit" value = "submit" />
</body>
</html>

On executing the above script, it will generate output consisting of text in a textarea field, making the lines visible as obtained by using the textarea row attribute.

Example 2: Using Javascript

In the following example we are running a script to make the lines visible in the textarea.

<!DOCTYPE html>
<html>
<body>
   <textarea id="mytutorial" rows="6" cols="50">
      Mahendra Singh Dhoni is an Indian former professional cricketer
      who was captain of the Indian national cricket team in limited-overs
      formats from 2007 to 2017 and in Test cricket from 2008 to 2014.
   </textarea>
   <p>Click To Change Number Of Visible Rows</p>
   <button type="button" onclick="mytutorial1()">Click</button>
   <script>
      function mytutorial1() {
         document.getElementById("mytutorial").rows = "10";
      }
   </script>
</body>
</html>

On running the above script, it will generate an output with a textarea field filled with text along with a prompt and a click button on the webpage.

When the user clicks the button, the event gets triggered and increases the number of visible rows in the textarea.

Example 3

In the following example we are using the <textarea> row attribute to set the visible number of lines.

<!DOCTYPE html>
<html>
<head>
   <title>HTML rows attribute</title>
</head>
<body>
   <form action = "/cgi-bin/hello_get.cgi" method = "get">Enter subject<br />
      <textarea rows = "5" cols = "50" name = "description"></textarea><br>
      <input type = "submit" value = "submit" />
   </form>
</body>
</html>

When the script gets executed, it will generate an output consisting of a textarea field for the user to enter the text mentioned, along with a row attribute to allow visible lines on the webpage.