Runnable HTML Docs: Textarea

Q: How do you create a textarea in HTML?

Write inside a form, with a . Unlike , it has a closing tag, and anything between the tags is the starting text.

Q: How do I set the default value of a textarea?

Put the text between the tags: Hello . A textarea has no value attribute in HTML. In JavaScript, read and set textarea.value.

Q: How do I stop a textarea from being resized?

Set resize: none in CSS. resize: vertical is usually friendlier: the reader can still make it taller for long text, but cannot break your layout by dragging it wider.

Q: How do I limit the number of characters in a textarea?

Add maxlength="280". The browser stops accepting input at that length. Show a counter next to it, updated on the input event, so the reader knows how much room is left, and check the length on the server too.

How to make a textarea

<textarea> is a text field for more than one line: messages, comments, descriptions. rows sets its visible height in lines. Type a few lines and press Send:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Textarea</title>
</head>
<body>
  <form>
    <label for="msg">Message</label><br>
    <textarea id="msg" name="message" rows="4" cols="40" placeholder="What would you like to ask?"></textarea>
    <br>
    <button type="submit">Send</button>
  </form>
</body>
</html>

Two things differ from <input>: a textarea needs a closing tag, and its starting text goes between the tags instead of in a value attribute. Its name is sent with the text as the value, line breaks included.

Textarea attributes

Attribute	Does
`name`	The key the text is sent under
`rows`	Visible height in lines (default 2)
`cols`	Visible width in characters (default 20); CSS `width` is usually better
`placeholder`	A hint shown while it is empty
`maxlength`, `minlength`	Length limits in characters
`required`	Must not be empty
`readonly`	Can be selected and copied, not edited; still sent
`disabled`	Cannot be used; not sent
`wrap`	`soft` (default) or `hard`, see below
`spellcheck`	`true` or `false`

Default text goes between the tags

Everything between <textarea> and </textarea> is the starting text, exactly as written: spaces, tabs and line breaks included. Only one line break directly after the opening tag is ignored. That makes indentation a trap:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Default text</title>
  <style>
    textarea { display: block; margin-bottom: 12px; font: inherit; }
  </style>
</head>
<body>
  <textarea rows="2">Hello, this is the default text.</textarea>

  <textarea rows="3">
    Indented to match the HTML
  </textarea>

  <p id="out"></p>
  <script>
    const [a, b] = document.querySelectorAll('textarea');
    document.querySelector('#out').textContent =
      'Lengths: ' + a.value.length + ' and ' + b.value.length +
      ' (the second adds 4 leading spaces, a line break and 2 more spaces)';
  </script>
</body>
</html>

The second textarea starts with four spaces and ends with a line break and two more, all of which the reader has to delete. Write the default text right against the tags.

HTML inside a textarea is not rendered; <b>hi</b> between the tags shows up as that literal text.

Width, resizing and auto-grow

Browsers let the reader drag the corner to resize a textarea. CSS resize limits that, and width: 100% with box-sizing: border-box makes it fill its container exactly:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Resize</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin: 4px 0 14px;
      padding: 8px;
      font: inherit;
      border: 2px solid #9ca3af;
      border-radius: 8px;
    }
    .vertical { resize: vertical; min-height: 60px; }
    .none { resize: none; }
    .grow { resize: none; overflow: hidden; }
  </style>
</head>
<body>
  <label>resize: vertical <textarea class="vertical" rows="2"></textarea></label>
  <label>resize: none <textarea class="none" rows="2"></textarea></label>
  <label>grows as you type <textarea class="grow" rows="2" id="grow"></textarea></label>

  <script>
    const grow = document.querySelector('#grow');
    grow.addEventListener('input', () => {
      grow.style.height = 'auto';
      const border = grow.offsetHeight - grow.clientHeight;
      grow.style.height = grow.scrollHeight + border + 'px';
    });
  </script>
</body>
</html>

The last one resets its height and then sets it to scrollHeight (the height of its content and padding) plus its borders, on every keystroke. Type several lines into it: it never shows a scrollbar. resize: vertical is the friendliest default: long answers get room, and nobody can drag the field wider than the layout.

Chromium browsers can do the auto-grow in CSS alone with field-sizing: content. Browsers that do not support it ignore the line and keep the normal size, so it is safe to add, but keep the script if every reader should get the growing box.

maxlength and a character counter

maxlength stops input at a number of characters. On its own it gives no warning, so the reader only notices when typing stops working. A counter fixes that:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Character counter</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; padding: 8px; }
    .count { font-size: 14px; color: #4b5563; }
    .count.near { color: #b45309; font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <label for="bio">Short bio</label>
    <textarea id="bio" name="bio" rows="3" maxlength="100" aria-describedby="bio-count"></textarea>
    <p class="count" id="bio-count" aria-live="polite">100 characters left</p>
    <button type="submit">Save</button>
  </form>

  <script>
    const bio = document.querySelector('#bio');
    const count = document.querySelector('#bio-count');
    bio.addEventListener('input', () => {
      const left = bio.maxLength - bio.value.length;
      count.textContent = left + ' characters left';
      count.classList.toggle('near', left <= 20);
    });
  </script>
</body>
</html>

aria-describedby makes screen readers read the counter along with the field, and aria-live="polite" announces changes to it between keystrokes. maxlength is enforced only by the browser, so the server has to check the length too.

Line breaks in the submitted text

The reader's line breaks are sent with the text. In the submitted data each one becomes a carriage return and line feed pair (%0D%0A in a URL-encoded form), which is what most servers expect. To show the text on a page later with its line breaks, either convert them to <br> on output or style the element with white-space: pre-line.

wrap="hard" (which needs cols) goes further: it also inserts line breaks where the text wrapped visually, so the server receives lines no longer than cols characters. The default, wrap="soft", sends only the breaks the reader typed.

Styling a textarea

Chrome and Firefox give textareas a monospace font at about 13px, which is why a textarea often looks out of place. font: inherit fixes it. Keep a visible focus style if you change the border:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled textarea</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; }
    textarea { display: block; margin: 4px 0 12px; }
    .styled {
      font: inherit;
      padding: 10px 12px;
      border: 1px solid #9ca3af;
      border-radius: 8px;
      resize: vertical;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }
    .styled::placeholder { color: #6b7280; }
  </style>
</head>
<body>
  <label>Browser default <textarea rows="2">Monospace, small</textarea></label>
  <label>Styled <textarea class="styled" rows="2">Same font as the page</textarea></label>
</body>
</html>

Placeholder text should reach a readable contrast; the light gray many designs use is hard to read. And, like on every field, the placeholder is not a label: it disappears as soon as the reader types. Labels are covered in HTML label.

Common mistakes

<textarea value="...">. There is no value attribute; put the text between the tags.
Indenting the default text along with the HTML. The spaces become part of the value.
A self-closing <textarea />. It is not a void element; without </textarea>, the rest of the page is swallowed into it as text.
No font: inherit, so the field uses a small monospace font.
resize: none with a small fixed height. Long answers end up in a tiny scrolling box.
Relying on maxlength alone. Validate the length on the server as well.

Frequently Asked Questions

How do you create a textarea in HTML?

Write <textarea name="message" rows="4"></textarea> inside a form, with a <label>. Unlike <input>, it has a closing tag, and anything between the tags is the starting text.

How do I set the default value of a textarea?

Put the text between the tags: <textarea name="bio">Hello</textarea>. A textarea has no value attribute in HTML. In JavaScript, read and set textarea.value.

How do I stop a textarea from being resized?

Set resize: none in CSS. resize: vertical is usually friendlier: the reader can still make it taller for long text, but cannot break your layout by dragging it wider.

How do I limit the number of characters in a textarea?

Add maxlength="280". The browser stops accepting input at that length. Show a counter next to it, updated on the input event, so the reader knows how much room is left, and check the length on the server too.

Why does my textarea use a different font?

Chrome and Firefox give textareas a monospace font at about 13px by default. Add font: inherit to make it match the rest of the page.

Related concepts