Textarea in HTML

Textarea in HTML is used when a form needs multi-line text input from the user. A normal text input is good for short values like name, email, city, or username, but it is not suitable for long messages. When the user needs to write a comment, review, address, feedback, support request, project description, or article draft, the correct element is <textarea>.

The textarea element is part of HTML forms, but it can also be used in JavaScript applications where the value is processed without a traditional server submit. It gives the browser a proper editable text area, supports keyboard input, supports copy and paste, works with labels, and can be controlled with attributes such as rows, cols, maxlength, required, placeholder, and readonly.

Basic Syntax of Textarea in HTML

The textarea tag uses an opening and closing tag. This is different from the input tag, which is usually a void element. Any default text should be placed between the opening and closing textarea tags, not inside a value attribute.

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

In this example, the label is connected using for="message" and id="message". The name attribute is the key submitted with the form data. The rows and cols attributes suggest the visible size of the text area, although CSS is normally used for final layout control.

Textarea vs Input Type Text

Both textarea and text input accept text, but they are meant for different situations. A text input is single-line. A textarea is multi-line. If the expected value can naturally become long, textarea is the better choice. If the expected value is short and structured, use an input field.

Feature	input type=”text”	textarea
Line support	Single line only	Multiple lines
Best for	Name, username, city	Message, comment, address
Default value	Uses value attribute	Text between tags
Resizing	Not normally resizable	Often resizable by browser
Common attributes	type, value, maxlength	rows, cols, maxlength

For example, a contact form may use text input for name and email, but textarea for message. A product review form may use input for rating title, but textarea for full review. Choosing the right control makes the form easier to understand before the user even starts typing.

Textarea with Default Text

Unlike input fields, textarea does not use a value attribute for its initial content. If you want to show default content, write it between the tags. This is useful for edit forms where the user is changing an existing comment, profile bio, or address.

<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="6">
I like embedded systems, web development, and technical writing.
</textarea>

Be careful with extra spaces and line breaks inside textarea content. The browser treats the content between the tags as real text. If your HTML contains indentation inside the textarea, that indentation may appear in the field. For clean default values, keep the text content intentional.

Important Textarea Attributes

Attribute	Purpose	Example
name	Key used when form data is submitted	name=”message”
id	Unique identifier for label and scripts	id=”message”
rows	Suggested visible number of text lines	rows=”5″
cols	Suggested visible width in characters	cols=”40″
maxlength	Maximum number of characters	maxlength=”500″
minlength	Minimum number of characters	minlength=”20″
required	Field must not be empty	required
placeholder	Short hint or example text	placeholder=”Write your message”

The most important attributes are usually name, id, and a connected label. Validation attributes such as required, minlength, and maxlength improve user experience, but they do not replace server-side validation.

Textarea Placeholder

The placeholder attribute shows a hint before the user types. It can be helpful when you want to show an example format, but it should not replace the label. A placeholder disappears when the user starts typing, while a label stays visible and tells the user what the field means.

<label for="feedback">Feedback</label>
<textarea
  id="feedback"
  name="feedback"
  rows="4"
  placeholder="Tell us what worked well and what can be improved."></textarea>

This pattern is much better than using only placeholder text. The label gives the field name, and the placeholder gives a small hint. If the user clears the text or returns to the field later, the form still remains understandable.

Required Textarea and Length Validation

Textarea supports built-in validation attributes. The required attribute stops the form from being submitted when the field is empty. The minlength and maxlength attributes guide the acceptable length. These attributes are useful for comment boxes, support forms, and review forms where too-short or too-long messages are not useful.

<label for="review">Product Review</label>
<textarea
  id="review"
  name="review"
  rows="6"
  minlength="30"
  maxlength="800"
  required></textarea>

This field requires at least 30 characters and allows a maximum of 800 characters. The browser can help the user correct mistakes before submission. Still, the server must check the submitted length again because browser validation can be bypassed.

Readonly and Disabled Textarea

The readonly and disabled attributes look similar, but they behave differently. A readonly textarea can be focused and its value is usually submitted with the form. A disabled textarea cannot be edited, usually cannot be focused, and its value is not submitted.

<textarea name="terms" rows="5" readonly>
These are the terms and conditions for using this service.
</textarea>

<textarea name="admin_note" rows="3" disabled>
Only administrators can edit this note.
</textarea>

Use readonly when the user should be able to read and copy the content but not change it. Use disabled when the control is not currently available and should not be submitted as part of the form.

Styling Textarea with CSS

The rows and cols attributes give a basic size, but CSS gives better control. In real websites, textarea width is commonly set to 100 percent of the form container, and height or min-height is adjusted according to the design. The resize property can control whether the user is allowed to resize the box.

textarea {
  width: 100%;
  min-height: 160px;
  padding: 12px;
  font: inherit;
  resize: vertical;
}

Allowing vertical resize is usually a good experience because users can expand the field for long text without breaking the layout horizontally. Avoid fixed tiny text areas for fields where users may need to write detailed messages.

Textarea in JavaScript

JavaScript can read and update textarea content using the value property. This is commonly used for character counters, live previews, validation messages, markdown editors, chat boxes, and comment forms.

const message = document.querySelector("#message");
const counter = document.querySelector("#counter");

message.addEventListener("input", () => {
  counter.textContent = `${message.value.length} characters`;
});

The input event runs whenever the textarea value changes through typing, pasting, cutting, or similar actions. This makes it better than relying only on keyboard events because text can enter the field in many ways.

Common Mistakes with Textarea

• Using value attribute for default textarea text.
• Using textarea for short single-line values where input is better.
• Using placeholder as the only label.
• Forgetting the name attribute, which prevents useful form submission.
• Making the textarea too small for the expected message.
• Trusting minlength and maxlength without backend validation.

Textarea is simple, but it has details that matter. Use it when the user needs space to write. Connect it with a label, give it a meaningful name, size it properly, and validate the submitted value on the server. A well-designed textarea makes long-form input feel natural instead of cramped.

Can textarea have a value attribute?

Textarea should not use the value attribute for default content. Put the default text between the opening and closing textarea tags.

Is textarea submitted with form data?

Yes, if it has a name attribute and is not disabled, its current text value is submitted with the form.

Textarea for Comments, Address and Feedback

Textarea is most useful when the exact length of the user’s answer is not known. A shipping address may need several lines. A support message may need a full explanation. A comment may be short or long depending on the user’s point. In all of these cases, forcing the user into a single-line input creates a poor experience because the text scrolls horizontally and becomes harder to review before submission.

For address fields, some websites use multiple separate inputs such as address line one, address line two, city, state, and pin code. That is useful when the backend needs structured data. For a free-form message or feedback box, textarea is better because the user can write naturally. The decision depends on whether the data must be structured or descriptive.

Textarea Security and Backend Validation

Any text submitted from a textarea should be treated as untrusted input. Users can enter normal sentences, HTML-like text, scripts, links, spam, or extremely long content. The backend should validate length, sanitize output where needed, and escape content before displaying it on a page. This prevents stored cross-site scripting issues when user-submitted messages are shown later.

HTML attributes such as maxlength are useful for guiding normal users, but they are not a security boundary. A malicious request can ignore the browser and submit a longer value directly. That is why textarea handling should always include server-side checks, especially for comments, reviews, contact messages, and admin notes.

Textarea Best Practices

Use textarea only when multi-line input is expected. Keep the label visible, choose a comfortable height, and give users enough room to review what they typed. If the field is for a support message or feedback, a larger default height is better than a tiny box that hides most of the text.

For professional forms, combine textarea with clear helper text. Tell users what kind of information to include, but do not overload the label itself. For example, the label can be Message, while help text can say Include the error message, device name, and what you tried before contacting support.

---