HTML textarea: Multiline Input, Length Limits, readonly, and Submitted Values

HTML Reference

Created 2026-10-30 Last Modified 2026-10-30

HTML textarea accepts multiple lines of plain text. Put initial content between its opening and closing tags, use rows/cols for display size, and minlength/maxlength for input length. Set name to submit the value with a form.

Display size, initial content, and input limits

textarea needs a closing tag. Unlike input, it does not use an HTML value attribute for the initial value. Line breaks and spaces between its tags affect the content, so check that formatting indentation does not introduce unwanted input.

Attribute	Role and limitations
`rows`, `cols`	Set the visible row count and width measured in average character widths using positive integers. They do not cap input lines or characters; CSS width and height also affect display.
`placeholder`	A hint shown when the value is empty. It is not submitted as the actual value and disappears when typing, so it does not replace a separate label.
`required`	Blocks ordinary form submission when empty. It does not decide whether whitespace-only text is meaningful.
`minlength`, `maxlength`	Limit the minimum and maximum length of user-entered values in UTF-16 code units. One emoji can use two or more units. A minimum alone permits an empty value; combine it with required for mandatory input.
`readonly`	Prevents user editing but allows focus and copying. With a name, it remains included in form data.
`disabled`	Disables the control and excludes it from form data and constraint validation.

Run a complete multiline-input example

Save this complete code as textarea.html and open it in a browser. No server or extra library is needed. The submit button shows the browser’s name/value entries instead of sending them.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>textarea input and submitted values</title>
  <style>
    body { font-family: sans-serif; margin: 24px; }
    label, textarea { display: block; }
    textarea { max-width: 100%; box-sizing: border-box; margin: 8px 0 20px; resize: vertical; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Write an enquiry</h1>
  <form id="demo">
    <label for="message">Message (5–200 code units)</label>
    <textarea id="message" name="message" rows="4" cols="32"
      minlength="5" maxlength="200" required
      placeholder="Describe the problem and the result you want.">This is the first line.
This is the second line.</textarea>
    <label for="reference">Read-only guidance</label>
    <textarea id="reference" name="reference" rows="2" readonly>Please include the order number.</textarea>
    <label for="locked">Disabled field</label>
    <textarea id="locked" name="locked" rows="2" disabled>This value is excluded from submission.</textarea>
    <button type="submit">Show submitted values</button>
    <button type="reset">Reset</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const result = document.querySelector('#result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

Submit the initial form: message and reference appear. The JSON \n indicates a line break in the value; locked is omitted.
Clear the message and submit: required validation blocks it. Then directly type two or three ordinary characters and submit to check minimum-length validation.
Enter <b>Practice</b> as the message and submit. Because input and output are text, the result shows tag-shaped text instead of bold text.
Reset restores the original two-line message and clears the result. Reset returns to the HTML defaults rather than making the value empty.

Native browser validation helps with user input and ordinary form submission. The same checks are not guaranteed for values assigned by script, so real applications must validate required values, allowed lengths, and formats on the server too.

Distinguish visual wrapping from actual line breaks

Wrapping on screen because of the field width differs from an Enter key line break. The default wrap="soft" does not add submitted line breaks just because text wraps visually. wrap="hard" adds submitted line breaks according to the specified column width and requires cols. To fit a narrow screen, start with default wrapping and CSS width.

The example’s max-width: 100% helps keep the field within its parent on narrow screens, while resize: vertical lets users change its height. The pixel width of cols="32" depends on font, character widths, and browser, so do not assume exactly 32 characters fit on one line.

Read values in JavaScript and validate them on the server

Read the current input through textarea.value and the default through textarea.defaultValue. To read user edits, use value rather than the tag’s textContent. The example writes results to textContent so input is not executed as HTML.

readonly and disabled are not security controls. Users can alter values through developer tools or separate requests, so verify unchangeable order numbers or permission data against trusted server data. If the server counts bytes or another character unit, check whether its limit uses the same measure as the browser’s maxlength.

The MDN textarea reference explains the attributes and constraints.

HTML Reference