Learning Objectives

After this tutorial, you will be able to:

• Understand what <textarea> is.
• Create multi-line input fields.
• Use rows and cols.
• Connect a textarea with a label.
• Use placeholder, name, and other useful attributes.
• Build a practical contact form.

Table of Contents

1. Introduction
2. What Is <textarea>?
3. Basic Textarea
4. Connecting a Label
5. Using rows and cols
6. Adding a Placeholder
7. Using name
8. Setting Minimum and Maximum Length
9. Making Textarea Required
10. Real-World Contact Form
11. Best Practices
12. Common Beginner Mistakes
13. Practice Exercise
14. Assignment
15. Summary
16. Frequently Asked Questions
17. Next Tutorial

Introduction

In the previous tutorial, you learned different <input> types.

However, most <input> elements are designed for single-line information.

For example:

<input type="text">

is suitable for:

Name
Username
City

But what if you want users to write a complete message?

For example:

Hello, I need help with my website.
I have a question about the HTML tutorial...

A normal text input is not suitable for this.

For multi-line content, HTML provides the:

<textarea></textarea>

element.

What Is <textarea>?

<textarea> creates a multi-line text input area.

Basic syntax:

<textarea></textarea>

Unlike <input>, <textarea> has an opening and closing tag.

Example:

<label for="message">Message</label>

<textarea id="message"></textarea>

This creates a larger area where the user can enter multiple lines of text.

Basic Textarea

The simplest example is:

<textarea></textarea>

A user can type something like:

I want to learn web design.
I have completed the HTML tutorials.
I would now like to start CSS.

This makes <textarea> useful for longer user input.

Common uses include:

• Contact messages
• Comments
• Feedback
• Reviews
• Descriptions
• Support requests
• Blog content
• Application details

Connecting a Label

Just like <input>, a <textarea> should have a clear label.

Example:

<label for="message">Message</label>

<textarea id="message"></textarea>

Notice:

for="message"
       ↓
id="message"

The values match.

This creates a clear relationship between the label and the textarea.

Using rows and cols

You can control the initial size of a textarea using:

rows
cols

Example:

<textarea rows="5" cols="40"></textarea>

Here:

rows="5"  → Approximately 5 lines high
cols="40"  → Approximately 40 characters wide

For example:

<label for="message">Message</label>

<textarea
    id="message"
    rows="5"
    cols="40">
</textarea>

These attributes are useful for defining the initial dimensions.

Later, when you learn CSS, you'll normally use CSS for more precise sizing and responsive layouts.

Adding a Placeholder

You can provide a helpful hint using placeholder.

Example:

<textarea
    id="message"
    placeholder="Write your message here...">
</textarea>

The user will see the hint until they start typing.

A more complete example:

<label for="message">Message</label>

<textarea
    id="message"
    rows="6"
    placeholder="Tell us how we can help...">
</textarea>

A good placeholder gives the user useful guidance without replacing the label.

Using name

The name attribute becomes important when the form data is submitted.

Example:

<textarea
    id="message"
    name="message">
</textarea>

The important distinction is:

id
→ Used to identify the element in the document and connect the label.

name
→ Used as the field's name when form data is submitted.

A professional form will often use both.

Example:

<label for="message">Message</label>

<textarea
    id="message"
    name="message">
</textarea>

Setting Minimum and Maximum Length

You can control how much text a user can enter.

minlength

Example:

<textarea
    id="message"
    name="message"
    minlength="10">
</textarea>

The browser can require at least 10 characters when validation occurs.

maxlength

Example:

<textarea
    id="message"
    name="message"
    maxlength="500">
</textarea>

This limits the input to 500 characters.

You can combine them:

<textarea
    id="message"
    name="message"
    minlength="10"
    maxlength="500">
</textarea>

This can be useful for feedback forms where you want to control the amount of submitted text.

Making Textarea Required

If a message is mandatory, use the required attribute.

Example:

<label for="message">Message</label>

<textarea
    id="message"
    name="message"
    required>
</textarea>

If the user tries to submit the form without entering anything, the browser can prevent submission and ask for the required field.

Real-World Contact Form

Now let's combine the concepts you've learned.

<h1>Contact Us</h1>

<form>

    <label for="name">Full Name</label>
    <input
        type="text"
        id="name"
        name="name"
        required>

    <br><br>

    <label for="email">Email Address</label>
    <input
        type="email"
        id="email"
        name="email"
        required>

    <br><br>

    <label for="message">Message</label>

    <textarea
        id="message"
        name="message"
        rows="6"
        placeholder="Write your message here..."
        minlength="10"
        maxlength="500"
        required></textarea>

    <br><br>

    <input type="submit" value="Send Message">

</form>

This is the basic HTML structure of a real contact form.

It contains:

Name
Email
Message
Submit button

The form is still visually basic because we haven't learned CSS yet.

That is intentional.

First, learn the structure.

Then you'll learn how to transform that structure into a professional design.

Important Difference: <input> vs <textarea>

This distinction is important.

<input>

Usually used for single-line information:

<input type="text">

Example:

John Smith

<textarea>

Used for multi-line information:

<textarea></textarea>

Example:

Hello,

I would like to know more about
your web development course.

Think of it this way:

Short information → <input>

Longer multi-line information → <textarea>

Best Practices

Always use a label

Good:

<label for="message">Message</label>
<textarea id="message"></textarea>

Don't rely only on a placeholder.

Use a meaningful name

Good:

<textarea
    id="message"
    name="message">
</textarea>

This makes the field easier to process when the form is submitted.

Use required when appropriate

If a message is mandatory:

<textarea
    id="message"
    name="message"
    required>
</textarea>

Don't make every field required unless the information is actually necessary.

Use maxlength when appropriate

For example:

<textarea
    maxlength="500">
</textarea>

This can prevent excessively long submissions.

Common Beginner Mistakes

Mistake 1: Using <input> for long messages

Avoid:

<input type="text" id="message">

for a long message.

Use:

<textarea id="message"></textarea>

Mistake 2: Forgetting the label connection

Incorrect:

<label for="message">Message</label>

<textarea id="comment"></textarea>

The values don't match.

Correct:

<label for="message">Message</label>

<textarea id="message"></textarea>

Mistake 3: Putting a value attribute on textarea

Beginners sometimes write:

<textarea value="Hello"></textarea>

That's not how you set the initial text of a <textarea>.

Instead:

<textarea>Hello</textarea>

For user-facing hints, use:

<textarea placeholder="Write your message..."></textarea>

Practice Exercise

Create a simple feedback form.

It should contain:

• Name
• Email
• Feedback

The feedback field should:

• Use <textarea>
• Have a label
• Have a placeholder
• Be required
• Allow up to 300 characters

Try to write the form yourself before checking an example.

Assignment

Create a Student Support Form.

Include:

Student Information

• Full Name
• Email

Support Request

• Subject
• Detailed Message

The detailed message should use:

<textarea>

Add:

• placeholder
• required
• maxlength
• name
• id

Build the complete form yourself.

Summary

Today you learned how to create multi-line text fields with:

<textarea></textarea>

You also learned several useful attributes:

rows
cols
placeholder
name
minlength
maxlength
required

A professional textarea might look like:

<label for="message">Message</label>

<textarea
    id="message"
    name="message"
    rows="6"
    placeholder="Write your message..."
    maxlength="500"
    required>
</textarea>

You now know how to handle both short and long text input in HTML forms.

Frequently Asked Questions

What is <textarea> used for?

It is used for multi-line text input such as messages, comments, feedback, and descriptions.

Can <textarea> have a placeholder?

Yes.

<textarea placeholder="Write your message..."></textarea>

Can <textarea> be required?

Yes.

<textarea required></textarea>

What is maxlength?

It defines the maximum number of characters the user can enter.

Should I use rows and cols or CSS?

rows and cols are useful HTML attributes for the initial dimensions. Later, CSS will give you much better control over responsive sizing and visual design.

Next Tutorial

HTML Select and Option – Creating Dropdown Menus

Next, you'll learn how to create dropdown menus using <select> and <option>. These are commonly used for country selection, categories, courses, languages, and many other forms.