In this article, we will discuss how to set the size of the textarea in HTML. The <textarea> tag in HTML defines a multi-line plain-text editing control. A text space will hold an infinite range of characters, and therefore the text renders in a set-width font (usually Courier).
In the below code you can check the textarea size is not set yet.
<!DOCTYPE html><html>
<body>
<form action="#">
<textarea name="blog">Hi Geek</textarea>
<br>
<input type="submit" value="submit">
</form>
</body>
</html>
|
Set Size of Textarea Element Using HTML
We can set the size for the text area using HTML by using rows and columns. rows*columns will be the size of the text area.
- cols: It is used to tell the browser how many average-width characters should fit on a single line i.e. the number of columns to display.
- rows: It is used to specify the number of visible text lines for the control i.e. the number of rows to display.
Example: In this example, we are going to create a text area with 4 rows and 7 columns.
<!DOCTYPE html><html>
<body>
<form action="#">
<textarea name="blog" rows="5" cols="15">Hi Geek</textarea>
<br>
<input type="submit" value="submit">
</form>
</body>
</html>
|
Output:
Set Size of Textarea Element Using HTML
Set Size of Textarea Element Using CSS
In this we have to set the height and width of textarea by CSS properties either using inline CSS or external css.
Example: In this example, we are going to create a text area with height and width property of CSS.
<!DOCTYPE html><html>
<head>
<style>
textarea {
height: 200px;
width: 300px;
}
</style>
</head>
<body>
<form action="#">
<textarea name="blog">Hi Geek</textarea>
<br>
<input type="submit" value="submit">
</form>
</body>
</html>
|
Output:
Set Size of Textarea Element Using CSS