HTML TextArea

The HTML <textarea> element is used to collect multi-line text input such as messages, comments, descriptions, addresses, and feedback.

---

1. What is textarea?

The <textarea> element creates a multi-line text input control.

<textarea></textarea>

Unlike a normal text input, a textarea can contain multiple lines of text.

2. Basic textarea Syntax

<textarea>
</textarea>

3. rows Attribute

The rows attribute specifies the approximate number of visible text lines in the textarea.

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

4. cols Attribute

The cols attribute specifies an approximate visible width of the textarea in character columns.

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

5. rows and cols Together

<textarea
    rows="6"
    cols="50">
</textarea>

6. name Attribute

The name attribute identifies the textarea value during form submission.

<textarea
    name="message"
    rows="5">
</textarea>

7. id Attribute

The id attribute uniquely identifies the textarea and can be used to associate a label with it.

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

8. Label with textarea

A label should be associated with the textarea using matching for and id values.

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

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

9. placeholder Attribute

The placeholder attribute displays a temporary hint inside an empty textarea.

<textarea
    name="message"
    placeholder="Enter your message here..."
    rows="5">
</textarea>

10. required Attribute

The required attribute indicates that the textarea must contain a value before the form can be submitted.

<textarea
    name="message"
    rows="5"
    required>
</textarea>

11. maxlength Attribute

The maxlength attribute limits the maximum number of characters that can be entered.

<textarea
    name="message"
    rows="5"
    maxlength="500">
</textarea>

12. minlength Attribute

The minlength attribute specifies the minimum number of characters expected.

<textarea
    name="message"
    rows="5"
    minlength="20">
</textarea>

13. readonly Attribute

The readonly attribute prevents the user from editing the textarea content.

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

14. disabled Attribute

The disabled attribute makes the textarea inactive.

<textarea
    name="message"
    rows="5"
    disabled>
</textarea>

15. autofocus Attribute

The autofocus attribute requests that the browser focus the textarea when the page loads.

<textarea
    name="message"
    rows="5"
    autofocus>
</textarea>

16. autocomplete Attribute

The autocomplete attribute can provide a hint about whether previously entered data may be suggested.

<textarea
    name="address"
    autocomplete="street-address"
    rows="4">
</textarea>

17. wrap Attribute

The wrap attribute controls how text wrapping is handled when textarea data is submitted.

<textarea
    name="message"
    rows="5"
    wrap="soft">
</textarea>

Common values include soft and hard.

18. Soft Wrapping

With wrap="soft", visual line wrapping does not necessarily insert line break characters into the submitted value.

<textarea
    name="message"
    rows="5"
    wrap="soft">
</textarea>

19. Hard Wrapping

With wrap="hard", line wrapping can be reflected in submitted text when the required column configuration is used.

<textarea
    name="message"
    rows="5"
    cols="40"
    wrap="hard">
</textarea>

20. cols vs CSS Width

The cols attribute provides a character-based sizing hint, while CSS can provide more flexible visual sizing.

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

CSS example:

<textarea
    rows="5"
    style="width:100%;">
</textarea>

21. Responsive textarea

CSS can make a textarea fit different screen widths.

<textarea
    class="message-box"
    rows="5">
</textarea>

<style>

    .message-box {
        width: 100%;
        max-width: 700px;
        box-sizing: border-box;
    }

</style>

22. Styling textarea with CSS

<style>

    .custom-textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ced4da;
        border-radius: 8px;
        resize: vertical;
    }

</style>

<textarea
    class="custom-textarea"
    rows="5"
    placeholder="Enter your message">
</textarea>

23. resize Property

CSS allows you to control whether the user can resize a textarea.

<style>

    .resize-both {
        resize: both;
    }

    .resize-horizontal {
        resize: horizontal;
    }

    .resize-vertical {
        resize: vertical;
    }

    .resize-none {
        resize: none;
    }

</style>

24. Textarea Without Resize

<textarea
    rows="5"
    style="resize:none;"
    placeholder="Enter message">
</textarea>

25. Initial Text Content

Textarea content is placed between the opening and closing <textarea> tags.

<textarea
    name="message"
    rows="5">
Welcome to the HTML course.
</textarea>

26. Important Difference from input

A textarea does not use a value attribute to define its initial text content.

textarea

<textarea>
Initial text
</textarea>

input

<input type="text"
       value="Initial text">

27. Textarea in a Contact Form

<form action="/contact"
      method="post">

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

    <br>

    <textarea
        id="message"
        name="message"
        rows="6"
        cols="50"
        placeholder="Enter your message"
        required>
    </textarea>

    <br><br>

    <button type="submit">
        Send Message
    </button>

</form>

28. Textarea for Address

<label for="address">
    Address:
</label>

<textarea
    id="address"
    name="address"
    rows="4"
    cols="50"
    placeholder="Enter complete address">
</textarea>

29. Textarea for Feedback

<label for="feedback">
    Feedback:
</label>

<textarea
    id="feedback"
    name="feedback"
    rows="6"
    maxlength="500"
    placeholder="Share your feedback">
</textarea>

30. Textarea for Description

<label for="description">
    Description:
</label>

<textarea
    id="description"
    name="description"
    rows="8"
    minlength="20"
    maxlength="1000"
    required>
</textarea>

31. Textarea with Counter Concept

JavaScript can be used to display the current character count while the user types.

<textarea
    id="message"
    maxlength="200"
    rows="5"
    oninput="updateCount()">
</textarea>

<p id="counter">
    0 / 200
</p>

<script>

    function updateCount() {

        const message =
            document.getElementById("message");

        const counter =
            document.getElementById("counter");

        counter.textContent =
            message.value.length + " / 200";
    }

</script>

32. Textarea with Disabled State

<textarea
    rows="5"
    disabled>
This field is unavailable.
</textarea>

33. Textarea with Readonly State

<textarea
    rows="5"
    readonly>
This content can be read but not edited.
</textarea>

34. Textarea with Required Validation

<form>

    <label for="feedback">
        Feedback:
    </label>

    <textarea
        id="feedback"
        name="feedback"
        rows="5"
        required>
    </textarea>

    <button type="submit">
        Submit
    </button>

</form>

35. Multiple Textareas in One Form

<form>

    <label for="address">
        Address:
    </label>

    <textarea
        id="address"
        name="address"
        rows="4">
    </textarea>

    <br><br>

    <label for="comments">
        Comments:
    </label>

    <textarea
        id="comments"
        name="comments"
        rows="5">
    </textarea>

</form>

36. Textarea Accessibility

Textareas should have clear labels and appropriate instructions when necessary.

• Use a meaningful label.
• Associate the label using for and id.
• Use suitable placeholder text as a supplementary hint.
• Use required and length constraints when appropriate.
• Provide clear validation messages.

37. Common Mistakes

• Forgetting the closing </textarea> tag.
• Using a value attribute to set initial textarea content.
• Forgetting the name attribute.
• Using placeholder text as the only label.
• Using excessive fixed width that breaks responsive layouts.
• Applying unnecessary restrictions to users.
• Forgetting server-side validation.

38. Best Practices

• Use textarea for genuinely multi-line input.
• Use clear labels.
• Set a reasonable initial size.
• Use responsive CSS for width.
• Use maxlength and minlength when appropriate.
• Allow useful resizing when it improves usability.
• Validate submitted content on the server.

39. Complete Contact Form Example

<!DOCTYPE html>
<html>

<head>

    <title>Contact Form</title>

    <style>

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 6px;
        }

        textarea {
            width: 100%;
            max-width: 700px;
            box-sizing: border-box;
            resize: vertical;
            padding: 10px;
        }

    </style>

</head>

<body>

    <h1>Contact Us</h1>

    <form action="/contact"
          method="post">

        <div class="form-group">

            <label for="name">
                Full Name:
            </label>

            <input type="text"
                   id="name"
                   name="name"
                   required>

        </div>

        <div class="form-group">

            <label for="email">
                Email:
            </label>

            <input type="email"
                   id="email"
                   name="email"
                   required>

        </div>

        <div class="form-group">

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

            <textarea
                id="message"
                name="message"
                rows="6"
                maxlength="1000"
                placeholder="Enter your message"
                required>
            </textarea>

        </div>

        <button type="submit">
            Send Message
        </button>

    </form>

</body>

</html>

40. Practice Task