<textarea> Tag in HTML – Syntax, Attributes & Live Example

Quick facts

Category	Flow content, phrasing content, interactive content, form-associated (listed, labelable, submittable, resettable)
Content model	Text only (no elements)
Tag omission	Neither the start nor the end tag can be omitted
Permitted parents	Any element that accepts phrasing content (usually inside a <form>)
DOM interface	`HTMLTextAreaElement`

Syntax

<label for="msg">Message</label>
<textarea id="msg" name="message" rows="4" maxlength="500"></textarea>

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

Attribute	Description
name	The name sent with the text when the form is submitted
rows / cols	The visible height in lines and width in characters
placeholder	A hint shown while the box is empty
maxlength / minlength	The most and fewest characters allowed
required	The box must be filled in before the form can be sent
readonly	The text can be read and copied but not changed
disabled	The box is turned off and not submitted
wrap	`soft` (default) or `hard`, which keeps line breaks at the box width when submitted (needs cols)

Common examples

Get and clear the text with JavaScript

A textarea’s text is in its .value property, both for reading and changing it.

<textarea id="note" rows="3"></textarea>
<button type="button" id="clear">Clear</button>

<script>
  document.getElementById("clear").addEventListener("click", () => {
    const box = document.getElementById("note");
    console.log(box.value);   // the current text
    box.value = "";           // empty it
  });
</script>

A label with a helpful hint

Connect a hint to the field with aria-describedby so screen readers read it along with the label.

<label for="bio">About you</label>
<p id="bio-hint">A sentence or two that appears on your profile.</p>
<textarea id="bio" name="bio" rows="4" aria-describedby="bio-hint"></textarea>

A full-width box on any screen

Make the textarea fill its container and include padding in the width, so it never overflows on phones.

<textarea name="message" rows="6"></textarea>

<style>
  textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 0.6rem; }
</style>

<textarea> vs contenteditable

A <textarea> is a form field for plain text: it has no bold or links, its value is sent with the form automatically, and it works with labels, validation and every screen reader. Adding the contenteditable attribute to an element makes its HTML editable in place, which is how rich-text editors (bold, lists, links) are built.

For comments, messages and most forms, use a textarea — it’s simpler and safer. Reach for contenteditable only when people genuinely need formatting, and then you must collect the content with JavaScript and clean the HTML on the server before saving it.

	<textarea>	contenteditable
Content	Plain text	Formatted HTML
Sent with forms	Automatically	Needs JavaScript
Best for	Messages, comments	Rich-text editors

Common mistakes to avoid

Using a value attribute. It does nothing on a textarea; put the default text between the tags.
Accidental spaces in the default text. Everything between <textarea> and </textarea> is content, including line breaks and indentation, so keep the tags together when it should start empty.
No label. A placeholder like “Your message…” disappears as soon as someone types; add a real <label>.
Fixed widths. cols="80" overflows small screens; set the width in CSS instead.

Accessibility & SEO tips

If you limit the length with maxlength, show a visible character counter so people aren’t surprised when typing stops.
Allow vertical resizing (resize: vertical) rather than turning resizing off completely — people with large fonts or long messages rely on it.
Keep spellcheck on for normal writing, and turn it off with spellcheck="false" for code or usernames.

Browser support

Supported in every browser. Newer extras such as the CSS field-sizing property (auto-growing boxes) are only in some browsers, so treat them as a bonus.

Tutorials: How to make a contact form, HTML forms tutorial

Related tags

Frequently asked questions

How do I set the default text of a <textarea>?

Put the text between the opening and closing tags: <textarea>Hello</textarea>. A textarea has no value attribute in HTML. In JavaScript you can read or set it with the .value property.

How do I stop users from resizing a <textarea>?

Use CSS: resize: none turns off resizing, and resize: vertical allows only height changes, which keeps your layout from breaking.

Can a <textarea> grow automatically as people type?

Newer browsers support the CSS property field-sizing: content, which makes the box grow with its text. For older browsers, use a few lines of JavaScript that adjust the height on input.

Why is there extra space in my textarea?

Anything between the opening and closing tags becomes the starting text, including spaces, tabs and line breaks from indenting your HTML. Write <textarea></textarea> with nothing between the tags.

How do I get the text from a textarea with JavaScript?

Use the value property, for example document.querySelector("textarea").value. Set it the same way to change the text.

How do I make a textarea full width?

Set width: 100% and box-sizing: border-box in CSS. The box then fills its container, including padding, and adapts to any screen size.