Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

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 to 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. The rows attribute determines how many lines of text are visible without scrolling.

Syntax

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

<textarea rows="value">Content</textarea>

The rows attribute specifies the number of visible text lines for the control. It determines the textarea's visible height in terms of character lines. The default value is typically 2 rows if not specified.

Basic Usage with Rows Attribute

Example 1

In the following example we are using the <textarea> with rows and cols attributes −

<!DOCTYPE html>
<html>
<head>
   <title>Textarea Rows Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h3>Address Information</h3>
   <form>
      <textarea rows="7" cols="40">Door No: 11/2
Kavuri Hills Phase 2
Madhapur, Hyderabad
Telangana - 500081
India</textarea>
      <br><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

The output displays a textarea with 7 visible rows and 40 columns, showing the address text −

Address Information

[Door No: 11/2                          ]
[Kavuri Hills Phase 2                   ]
[Madhapur, Hyderabad                     ]
[Telangana - 500081                      ]
[India                                   ]
[                                        ]
[                                        ]

[Submit]

Dynamically Changing Rows with JavaScript

Example 2

In the following example we are using JavaScript to change the number of visible rows dynamically −

<!DOCTYPE html>
<html>
<head>
   <title>Dynamic Textarea Rows</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h3>Cricket Player Information</h3>
   <textarea id="playerInfo" rows="4" cols="60">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>
   <br><br>
   <p>Click to change number of visible rows:</p>
   <button type="button" onclick="increaseRows()">Increase to 8 Rows</button>
   <button type="button" onclick="decreaseRows()">Reset to 4 Rows</button>
   <script>
      function increaseRows() {
         document.getElementById("playerInfo").rows = "8";
      }
      function decreaseRows() {
         document.getElementById("playerInfo").rows = "4";
      }
   </script>
</body>
</html>

The output displays a textarea with buttons to dynamically change the visible rows. Initially shows 4 rows, clicking "Increase" expands it to 8 rows −

Cricket Player Information

[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.             ]

[Increase to 8 Rows] [Reset to 4 Rows]

Form Integration with Multiple Textarea Elements

Example 3

In the following example we are using multiple textarea elements with different row values in a form −

<!DOCTYPE html>
<html>
<head>
   <title>Contact Form with Multiple Textareas</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h3>Contact Form</h3>
   <form action="/submit-form" method="post">
      <label for="subject">Subject (2 rows):</label><br>
      <textarea rows="2" cols="50" name="subject" id="subject" placeholder="Enter subject here..."></textarea>
      <br><br>
      
      <label for="message">Message (6 rows):</label><br>
      <textarea rows="6" cols="50" name="message" id="message" placeholder="Enter your detailed message here..."></textarea>
      <br><br>
      
      <input type="submit" value="Send Message">
   </form>
</body>
</html>

The output shows a contact form with two textarea elements having different row heights −

Contact Form

Subject (2 rows):
[Enter subject here...          ]
[                               ]

Message (6 rows):
[Enter your detailed message    ]
[here...                        ]
[                               ]
[                               ]
[                               ]
[                               ]

[Send Message]
Textarea Rows Attribute rows="3" 3 visible lines rows="6" 6 visible lines Higher row values create taller textarea elements

Key Points

Here are important points to remember about the rows attribute −

  • The rows attribute accepts positive integer values only.

  • If content exceeds the visible rows, a vertical scrollbar appears automatically.

  • The rows attribute works together with cols to define textarea dimensions.

  • You can modify the rows value dynamically using JavaScript's DOM manipulation.

  • CSS height property can override the rows attribute if specified.

Conclusion

The rows attribute in HTML textarea elements controls the number of visible text lines without scrolling. Use appropriate row values based on expected content length − smaller values (2-3) for short inputs like subjects, and larger values (5-10) for detailed messages or descriptions. You can also dynamically adjust rows using JavaScript for enhanced user experience.

Updated on: 2026-03-16T21:38:53+05:30

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements