Textarea vs input.
Multi-line or single-line.
Both are form controls. Both accept text. But they behave differently in almost every way that matters: whether the text wraps, what Enter does, how the height is controlled, and how the default value is set. The rule is simple — <input> for single-line, <textarea> for multi-line — but the details around default values and resizing trip people up.
Short answer: Use <input> for single-line text (name, email, password, number, date). Use <textarea> for multi-line text (comments, messages, descriptions). Textarea's default value goes between the tags, not in a value attribute — <textarea>Default</textarea>, not <textarea value="Default">. Height is controlled by rows and CSS height.
✅ When to use each
The dividing line is simple: does the user need to type more than a sentence?
<input> — single-line
Text doesn't wrap. Enter submits the form (if inside a form). Use for names, emails, passwords, phone numbers, dates, numbers.
<textarea> — multi-line
Text wraps automatically. Enter inserts a newline. Height via rows or CSS. Use for comments, messages, descriptions, addresses.
rows on textarea
Visible height in lines. rows="4" shows four lines before scroll. A hint, not a limit — CSS height overrides.
resize in CSS
By default users can drag to resize a textarea. resize: vertical for height only. resize: none to disable.
✅ Before and after
The same field, both ways.
✅ Single line, no wrapping. ✅ Enter submits the form (if inside a form). ✅ Correct for names, emails, short answers.
✅ Multi-line — text wraps automatically. ✅ Enter inserts a newline, does not submit. ✅ rows="4" sets initial visible height. ✅ User can drag to resize (unless CSS disables it).
✅ Default value — the common mistake
value doesn't work on textarea.
❌ value="Hello" → empty textarea. ✅ Hello → "Hello" filled in. ⚠️ Multi-line indentation becomes whitespace. Use <textarea>Hello</textarea> on one line for no leading space.
Don't write <textarea value="text">. This is the single most common textarea mistake. The value attribute on <textarea> is invalid and ignored — the browser renders an empty textarea. In React and Vue, value works because the framework handles the translation. In raw HTML, the content must be between the tags. Same applies to placeholder — that one is valid, but the default value is not.
⚠️ Common mistakes
The textarea mistakes that cost real time.
value attribute on textareaIgnored by the browser. Fix: put the content between the tags.
The whitespace becomes part of the value. Fix: <textarea>text</textarea> on one line, no indentation.
The text doesn't wrap. Fix: use <textarea>.
Enter inserts a newline — wrong UX for a name field. Fix: <input type="text">.
rows or CSS heightDefault height is only ~2 lines — hard to use. Fix: rows="4" or CSS min-height.
resize: none when not neededUsers can't expand the textarea. Fix: use resize: vertical — allow height, not width.
Textarea Enter inserts a newline, not submit. Fix: use Ctrl/Cmd+Enter for submit, or submit via button.
nameThe value isn't sent to the server. Fix: add name.
❓ Frequently asked
What is the difference between textarea and input?
input is a single-line control — text doesn't wrap, Enter submits the form (or does nothing, depending on type). textarea is a multi-line control — text wraps automatically, Enter inserts a newline, and the height is controlled by rows. Use input for names, emails, passwords, numbers, and dates. Use textarea for comments, messages, descriptions, and anything the user might write more than a sentence of. The two are not interchangeable.
How do I set the default value of a textarea?
Put the text between the opening and closing tags: textarea Default text /textarea. The value attribute does not work on textarea — it is ignored. This is the most common textarea mistake. The textarea's content is its children, not an attribute. For React and other frameworks, they use value and onChange, but in raw HTML, the content goes between the tags. Whitespace inside the tags is preserved, so avoid indentation that adds leading spaces.
What does the rows attribute do on a textarea?
rows sets the visible height of the textarea in lines — rows=4 shows four lines before scrolling. It does not limit the input length; the user can type as much as they want and the textarea scrolls. Combine with cols for visible width in characters. Both are hints, not limits — CSS width and height override them. To limit input length, use maxlength. Rows is purely about visible size.
Can I make a textarea resizable?
By default, yes — most browsers let the user drag the bottom-right corner to resize the textarea. CSS resize controls this: resize: vertical (only height), resize: horizontal (only width), resize: both (both), resize: none (no resizing). The default is both on most browsers. Many sites disable resizing with resize: none for a fixed layout, but that can frustrate users who want more space. Prefer allowing at least vertical resize.
Why doesn't Enter work in my textarea?
Two common causes. (1) JavaScript calls preventDefault on keydown for Enter — the newline is blocked. Fix: remove the preventDefault for Enter, or check the Shift key modifier for submit-on-Enter behavior. (2) The textarea is inside a form and Enter submits the form (textarea does not, but if focus is in an input above it, Enter submits). Fix: make sure focus is on the textarea, or use Ctrl/Cmd+Enter for submit. Textarea itself never submits on Enter.
Can a textarea have a maxlength?
Yes. maxlength on textarea limits the total character count, same as on input. The browser blocks typing beyond the limit and shows a validation message if the form is submitted with too many characters. minlength works the same way — it requires at least that many characters. Combine with required for a field that must have content. Note that maxlength is a hard limit in the browser, but always validate on the server too.