Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we display a text area in HTML?
The textarea element in HTML is used to create a multi-line text input control that allows users to enter larger amounts of text. Unlike regular input fields, textareas can display multiple lines of text and are commonly used for comments, descriptions, messages, and other extended text content in forms.
The textarea displays text in a fixed-width font (typically Courier) and can hold an unlimited number of characters. It is essential for collecting user feedback, reviews, addresses, and any content that requires more than a single line of text.
Syntax
Following is the basic syntax for creating a textarea in HTML −
<textarea name="fieldName" rows="number" cols="number"> Default text content </textarea>
Common Attributes
The textarea element supports several important attributes −
name − Specifies the name of the textarea for form submission
rows − Defines the visible height (number of lines)
cols − Defines the visible width (number of characters per line)
placeholder − Shows hint text when the textarea is empty
readonly − Makes the textarea non-editable
disabled − Disables the textarea completely
maxlength − Sets maximum number of characters allowed
Basic Textarea Example
Following example demonstrates a simple textarea with form submission −
<!DOCTYPE html>
<html>
<head>
<title>Basic Textarea Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Form</h2>
<form action="https://www.tutorialspoint.com/index.htm">
<label for="name">NAME:</label><br>
<input type="text" id="name" name="name" style="width: 300px; padding: 5px;"><br><br>
<label for="comment">About Yourself:</label><br>
<textarea id="comment" name="comment" rows="5" cols="40" style="padding: 5px;">I'm from Hyderabad, Telangana</textarea><br><br>
<input type="submit" value="Submit" style="padding: 8px 16px; background-color: #4CAF50; color: white; border: none; cursor: pointer;">
</form>
</body>
</html>
The output displays a form with a name input field and a textarea for user description −
Contact Form NAME: [Text input field] About Yourself: [Textarea containing: I'm from Hyderabad, Telangana] [Submit Button]
Textarea with JavaScript Manipulation
Following example shows how to dynamically change textarea content using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Textarea with JavaScript</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Address Information</h3>
<label for="address">Address:</label><br>
<textarea id="address" rows="4" cols="50" style="padding: 5px; margin: 10px 0;">Kavuri Hills, HITEC City
Hyderabad, Telangana
India - 500081</textarea><br>
<button type="button" onclick="changeAddress()" style="padding: 8px 16px; background-color: #2196F3; color: white; border: none; cursor: pointer; margin-right: 10px;">Change Address</button>
<button type="button" onclick="clearAddress()" style="padding: 8px 16px; background-color: #f44336; color: white; border: none; cursor: pointer;">Clear</button>
<script>
function changeAddress() {
document.getElementById("address").value = "Madhapur, HITEC City\nHyderabad, Telangana\nIndia - 500033";
}
function clearAddress() {
document.getElementById("address").value = "";
}
</script>
</body>
</html>
The output shows an address textarea with buttons to modify its content −
Address Information Address: [Textarea with initial address] [Change Address] [Clear]
Textarea with Advanced Attributes
Following example demonstrates various textarea attributes including placeholder, maxlength, and readonly states −
<!DOCTYPE html>
<html>
<head>
<title>Advanced Textarea Features</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Feedback Form</h2>
<form action="/submit-feedback" method="post">
<label for="feedback">Your Feedback (max 200 characters):</label><br>
<textarea id="feedback" name="feedback" rows="4" cols="60"
placeholder="Please share your thoughts about our service..."
maxlength="200" style="padding: 8px; resize: vertical;"></textarea><br><br>
<label for="terms">Terms and Conditions (Read Only):</label><br>
<textarea id="terms" rows="3" cols="60" readonly
style="padding: 8px; background-color: #f5f5f5; border: 1px solid #ccc;">By submitting this form, you agree to our privacy policy and terms of service. Your feedback may be used to improve our services.</textarea><br><br>
<input type="submit" value="Submit Feedback" style="padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer;">
</form>
</body>
</html>
This example shows a feedback textarea with character limit and a read-only terms textarea −
Feedback Form Your Feedback (max 200 characters): [Textarea with placeholder text] Terms and Conditions (Read Only): [Read-only textarea with terms text] [Submit Feedback]
Common Use Cases
Textareas are commonly used in the following scenarios −
Comments and Reviews − User feedback on products, articles, or services
Contact Forms − Message fields where users describe their inquiries
Address Fields − Multi-line addresses with street, city, and postal information
Content Creation − Blog posts, article drafts, or any long-form content
Code Input − HTML, CSS, or JavaScript code snippets
Survey Responses − Open-ended questions requiring detailed answers
Styling Textareas
Following are some common CSS properties used to style textareas −
| CSS Property | Purpose | Example |
|---|---|---|
resize |
Controls user resizing | resize: vertical; |
font-family |
Changes the font | font-family: Arial; |
padding |
Internal spacing | padding: 10px; |
border |
Border styling | border: 1px solid #ccc; |
background-color |
Background color | background-color: #f9f9f9; |
Conclusion
The textarea element is essential for collecting multi-line text input from users in HTML forms. It supports various attributes like rows, cols, placeholder, and maxlength to control its behavior and appearance. Combined with JavaScript, textareas provide dynamic and interactive text input capabilities for web applications.
3K+ Views
