Why not use the <textarea> tag?
<textarea id="txtArea" rows="10" cols="70"></textarea>
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › HTML › Reference › Elements › textarea
<textarea>: The Textarea element - HTML | MDN
The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
W3Schools
w3schools.com › tags › tag_textarea.asp
HTML textarea tag
</textarea> </body> </html> Try it Yourself »
Videos
47. HTML Form Control Textarea element and its attributes - HTML ...
05:48
Learn HTML Textarea Element in 5 minutes - YouTube
04:08
Learn HTML - Textarea - YouTube
03:25
16. Adding Textarea Input in HTML Forms | HTML Tutorial for Beginners ...
05:23
HTML5 and CSS3 beginners tutorial 48 - textarea - YouTube
HTML form Tag Tutorial with input, textarea, select, button, and ...
Medium
medium.com › @JessRascal › how-to-make-a-textarea-automatically-resize-in-one-line-no-javascript-bf4d1ef6667c
How to Make a Textarea Automatically Resize in One Line (No JavaScript) | by Jess Rascal | Medium
July 16, 2025 - If you enter multiple lines of text in the textarea, you will notice it’s height doesn’t change, it will just provide a scrollbar.
4Geeks
4geeks.com › lesson › html-input-html-textarea
Understanding HTML Input HTML Text Area and Forms...
June 14, 2025 - HTML Forms, HTML input and HTML text-area are really easy to understand, and they are the ONLY way to make interactive websites without AJAX. These very basi...
Mimo
mimo.org › glossary › html › textarea
HTML Textarea: Syntax, Usage, and Examples
The HTML textarea element creates a multi-line text input field where users can type paragraphs of text. As one of the most versatile HTML tags for collecting user input, it offers more flexibility than simple text fields.
Top answer 1 of 4
86
Why not use the <textarea> tag?
<textarea id="txtArea" rows="10" cols="70"></textarea>
2 of 4
37
Although <input> ignores the rows attribute, you can take advantage of the fact that <textarea> doesn't have to be inside <form> tags, but can still be a part of a form by referencing the form's id:
<form method="get" id="testformid">
<input type="submit" />
</form>
<textarea form ="testformid" name="taname" id="taid" cols="35" wrap="soft"></textarea>
Of course, <textarea> now appears below "submit" button, but maybe you'll find a way to reposition it.
Top answer 1 of 12
352
I recommend to use both. Rows and cols are required and useful if the client does not support CSS. But as a designer I overwrite them to get exactly the size I wish.
The recommended way to do it is via an external stylesheet e.g.
textarea {
width: 300px;
height: 150px;
}<textarea> </textarea> 2 of 12
165
textarea { height: auto; }<textarea rows="10"></textarea>This will trigger the browser to set the height of the textarea EXACTLY to the amount of rows plus the paddings around it. Setting the CSS height to an exact amount of pixels leaves arbitrary whitespaces.
W3Schools
w3schools.com › tags › att_textarea_rows.asp
HTML textarea rows Attribute
Note: The size of a textarea can also be specified by the CSS height and width properties. ... If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: sales@w3schools.com · If you want to report an error, or if you want to make a suggestion, send us an e-mail: help@w3schools.com · HTML Tutorial CSS Tutorial JavaScript Tutorial How To Tutorial SQL Tutorial Python Tutorial W3.CSS Tutorial Bootstrap Tutorial PHP Tutorial Java Tutorial C++ Tutorial jQuery Tutorial
Mozilla
interactive-examples.mdn.mozilla.net › pages › tabbed › textarea.html
HTML Demo: <textarea>
label, textarea { font-size: 0.8rem; letter-spacing: 1px; } textarea { padding: 10px; max-width: 100%; line-height: 1.5; border-radius: 5px; border: 1px solid #ccc; box-shadow: 1px 1px 1px #999; } label { display: block; margin-bottom: 10px; } clear console · %html-content%
Formspree
formspree.io › blog › html-textarea
Improve Your Forms with HTML Textarea: An In-Depth Tutorial | Formspree
October 11, 2024 - Have you ever found yourself staring at a bland, single-line input field, wishing you had more room to type out your thoughts? Enter the HTML textarea tag! Perfect for capturing multi-line input, textareas are the go-to solution for comments, feedback, and more detailed user responses.
GeeksforGeeks
geeksforgeeks.org › html › html-textarea-tag
HTML <textarea> tag - GeeksforGeeks
July 12, 2025 - The <textarea> tag in HTML is used to create a multi-line text input field, allowing users to enter and edit text in a form.
W3C
w3.org › TR › 2012 › WD-html-markup-20121025 › textarea.html
textarea – text input area - HTML5
The textarea element represents a multi-line plain-text edit control for the element’s raw value.
React
react.dev › reference › react-dom › components › textarea
<textarea> – React
The built-in browser <textarea> component lets you render a multiline text input.
DotFactory
dofactory.com › html › textarea › rows
HTML textarea rows
In HTML, the rows attribute on a tag specifies the number of lines of text, i.e. rows, that are visible in the textarea.
W3C
w3.org › MarkUp › html3 › textarea.html
textarea
To let users enter more than one line of text, use the TEXTAREA element.
DotFactory
dofactory.com › html › textarea
HTML textarea Tag
A <textarea> with 12 rows and a 45 character row limit. The control has a scrollbar because the text exceeds 12 rows. Textareas honor spaces and line-breaks. You can see this by how the text inside the textarea indents and wraps the same as specified in the HTML.
GeeksforGeeks
geeksforgeeks.org › html › how-to-set-the-size-of-textarea-in-html
How to set the size of textarea in HTML ? - GeeksforGeeks
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>
Published July 23, 2025
W3Schools
w3schools.com › Jsref › prop_textarea_rows.asp
HTML DOM Textarea rows Property
HTML reference: HTML <textarea> rows attribute · ❮ Textarea Object · ★ +1 · Sign in to track progress · REMOVE ADS · PLUS · SPACES · GET CERTIFIED · FOR TEACHERS · BOOTCAMPS · CONTACT US · × · If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: sales@w3schools.com ·
Top answer 1 of 16
445
One line only. this.style.height = this.scrollHeight + "px" sets its true height, while this.style.height = "" allows the textarea to shrink as well as stretch.
<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea> 2 of 16
56
Not really. This is normally done using javascript.
there is a good discussion of ways of doing this here...
Autosizing textarea using Prototype
shadcn/ui
ui.shadcn.com › docs › components › radix › textarea
Textarea - shadcn/ui
Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.