<textarea>
A multi-line text field for longer input: messages, reviews, descriptions.
- Display
- inline-block
- Closing tag
- Required
- Permitted content
- Text that becomes the field’s initial value
Example
#<style>
label { display: block; margin-bottom: 6px; }
textarea { width: 100%; max-width: 420px; }
</style>
<label for="feedback">What can we improve in the course?</label>
<textarea id="feedback" name="feedback" rows="4" maxlength="500" placeholder="Write a few sentences…"></textarea>Definition and usage
#The <textarea> element creates a field where you can write many lines of text: a message in a contact form, a comment, a project description or a snippet of code. Unlike <input>, it has a closing tag, and you write the initial value between the tags rather than in a value attribute.
The text between the tags is taken literally, including whitespace. Indentation from your source code will end up in the field, so close </textarea> right after the content, with no extra spacing.
You set the size with the rows and cols attributes, or in CSS. By default, the user can resize the field by dragging its corner, controlled by the CSS resize property. Since 2026, in all major browsers the field can also grow with its content on its own thanks to field-sizing: content.
Syntax
#<textarea name="name" rows="4"></textarea>Attributes
#number
The field’s height in lines of text and its width in characters, 2 lines and 20 characters by default. This is only the initial size, which you can override in CSS.text
A hint visible in an empty field. Just like in<input>, it doesn’t replace a label.number of characters
The shortest and longest text length allowed.maxlengthblocks further typing, andminlengthis checked when the form is submitted.boolean attribute
The field must be filled in before the form submits.boolean attribute
readonlylets you read and copy the text, but not change it, and the value will be sent.disabledturns the field off completely and skips it when submitting.wrap
soft | hard
Decides whether long lines wrapped in the field should be sent with extra newline characters.soft(the default) only wraps the text on screen, whilehardinserts real newline characters on submit and requirescolsto be given.
The element also supports all global attributes, such as class, id, style and hidden.
Attributes in practice
#rows / cols
numberThe field’s height in lines of text and its width in characters, 2 lines and 20 characters by default. This is only the initial size, which you can override in CSS.
<textarea rows="5" cols="36" aria-label="Notes">Lesson 3: forms
- a label connects to a field through for
- a button with no type submits the form</textarea>placeholder
textA hint visible in an empty field. Just like in <input>, it doesn’t replace a label.
<textarea rows="3" cols="36" aria-label="Project description" placeholder="What did you learn building this project?"></textarea>minlength / maxlength
number of charactersThe shortest and longest text length allowed. maxlength blocks further typing, and minlength is checked when the form is submitted.
<form>
<textarea name="bio" rows="3" cols="36" minlength="20" maxlength="160" required aria-label="About me"></textarea>
<p><button>Save bio</button></p>
</form>required
boolean attributeThe field must be filled in before the form submits.
<form>
<textarea name="question" rows="2" cols="36" required aria-label="Question for the mentor"></textarea>
<p><button>Ask the question</button></p>
</form>readonly / disabled
boolean attributereadonly lets you read and copy the text, but not change it, and the value will be sent. disabled turns the field off completely and skips it when submitting.
<p><textarea rows="2" cols="36" readonly aria-label="Assignment text">Build a page with three sections and a menu.</textarea></p>
<p><textarea rows="2" cols="36" disabled aria-label="Mentor comment">The mentor hasn't graded the assignment yet.</textarea></p>Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Don’t set the content with a
valueattribute, because<textarea>doesn’t have one. Write the initial value between the tags. - If the user should only be able to resize the field’s height, set
resize: verticalin CSS. - For fields with a character limit, show a counter, for example "120/500", so the limit doesn’t catch the user off guard mid-sentence.
Related entries
#- <input>A form field: text, email, password, number, date, slider, checkbox, file and many more.
- <label>A form field’s label. Clicking the label moves the cursor to the field.
- <form>A form that collects data from the user and sends it to a given address.
- <button>A clickable button: submits a form, clears it, or runs an action on the page.
Spotted a mistake or missing an example? Write to us.