What is HTML <textarea> Tag?
The HTML textarea tag is used to create a multi-line text input field that allows users to enter large amounts of text, such as messages, comments, or feedback. Unlike the input tag, which only accepts single-line input, the textarea tag can handle long text content and provides a scroll bar if the text exceeds the visible area.
It is one of the most important form elements in web development because it allows better user interaction and input flexibility. The textarea tag is used inside forms for collecting text-based data from users such as descriptions, reviews, or queries.
Syntax of the HTML <textarea> Tag
<textarea name="fieldname" rows="4" cols="50">
Your text goes here
</textarea>
The textarea tag starts with the opening tag <textarea> and ends with the closing tag </textarea>. The attributes like name, rows, and cols define the text area’s behavior and appearance.
Examples of HTML <textarea> Tag
Example 1: Basic HTML Textarea Tag
<!DOCTYPE html>
<html lang="en">
<body>
<form action="submit.php">
<label for="message">Enter your message:</label><br><br>
<textarea name="message" rows="4" cols="40">Type your message here...</textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In this example, a simple textarea field allows users to type a message that will be submitted through the form.
Example 2: SEO Optimized Textarea Example
<!DOCTYPE html>
<html lang="en">
<body>
<form action="feedback.php">
<label for="feedback">Share your feedback about Scholar247:</label><br><br>
<textarea name="feedback" rows="6" cols="60" placeholder="Write your experience with Scholar247 here..."></textarea><br><br>
<input type="submit" value="Send Feedback">
</form>
</body>
</html>
In this SEO-optimized example, the placeholder text includes the keyword “Scholar247,” making it relevant to the page topic. This helps users know what kind of feedback to provide and also supports keyword relevance in form-based pages.
Attributes of the HTML <textarea> Tag
• name: Defines the name of the textarea, used for form submission.
• rows: Specifies the number of visible text lines in the box.
• cols: Defines the visible width of the text area in characters.
• placeholder: Displays a hint or guide text before the user types anything.
• readonly: Makes the textarea uneditable but still visible.
• disabled: Disables the textarea, preventing user input.
• maxlength: Limits the number of characters that can be entered.
• required: Ensures the field must be filled before form submission.
Best Practices for HTML <textarea> Tag
• Always include a placeholder or label to guide the user.
• Use rows and cols to create an appropriate size for the content expected.
• Add maxlength to prevent excessively long input.
• Include descriptive name attributes for form processing.
• Avoid using fixed sizes; make it responsive using CSS for better accessibility.
• Use SEO-friendly placeholders or labels if the page is indexed.
FAQs About the HTML <textarea> Tag
What is the purpose of the HTML textarea tag?
The textarea tag creates a multi-line text input field where users can enter longer content such as comments, feedback, or descriptions.
Can the textarea tag have default text?
Yes, any text placed between the opening <textarea> and closing </textarea> tags will appear as default text inside the box.
Does the textarea tag support attributes like input fields?
Yes, it supports several attributes like name, rows, cols, placeholder, and maxlength to control behavior and layout.
Can a textarea be resized by users?
Yes, by default, users can resize a textarea vertically or horizontally. You can control this behavior using the CSS resize property.
Is the textarea tag necessary for SEO?
Indirectly, yes. While the textarea tag itself doesn’t affect SEO, using meaningful placeholder text, labels, or descriptions can help create better user experience and context, improving page quality signals.