Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do we set the visible number of lines in a text area in HTML?
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.
3K+ Views
To Continue Learning Please Login