Home 〉 HTML Tutorials 〉 HTML '<textarea>' Tag - Attributes, Examples, and Styling | Complete Guide

HTML '<textarea>' Tag - Attributes, Examples, and Styling | Complete Guide !

HTML '<textarea>' Tag - Attributes, Examples, and Styling | Complete Guide !

Are you looking to collect long text inputs like feedback or comments in your HTML form? The '<textarea>' tag helps you do just that with multi-line input capability and flexible attributes like 'rows', 'cols', 'placeholder', and more. Whether you're creating contact forms, feedback sections, or comment boxes, understanding how to use the HTML '<textarea>' tag will help you design forms better. This step-by-step blog post on the HTML '<textarea>' tag covers everything from syntax, attributes, examples, and styling.

Introduction

The '<textarea>' tag in HTML is used to create a multi-line text input field. It is commonly used in forms where the user is expected to enter longer text like comments, feedback, or messages.

Unlike the '<input>' tag, which is limited to a single line, '<textarea>' allows users to type multiple lines of text, making it an essential part of form creation.

Syntax and Explanation

Syntax ✍

<textarea name="message" rows="4" cols="50">Enter your message here...</textarea>

  • '<textarea>': The opening tag to define the text area.
  • 'name': Specifies the name of the textarea input (used when submitting forms).
  • 'rows': Defines the number of visible text lines.
  • 'cols': Defines the visible width (in character columns).
  • The text between the opening and closing '<textarea>' tags is the default content.

Is it a Block, Inline, or Empty Element?

  • ✅ The '<textarea>' is a block-level element.
  • ❌ It is not an empty element because it has opening and closing tags.

HTML '<textarea>' Tag Attributes

The HTML '<textarea>' Tag has the following Attributes :

  • 'name': Assigns a name to the textarea, which is submitted with the form.
  • 'rows': Sets the number of visible text lines.
  • 'cols': Sets the visible width (in characters).
  • 'placeholder': Shows temporary text inside the field until the user types something.
  • 'maxlength': Sets the maximum number of characters allowed.
  • 'readonly': Makes the field non-editable.
  • 'disabled': Disables the textarea so it cannot be interacted with.
  • 'required': Makes the field mandatory before form submission.
  • 'wrap': Controls how the text is wrapped when submitted ('soft' or 'hard').
  • 'autofocus': Automatically focuses the field when the page loads.
  • 'form': Links the textarea to a specific form by ID if placed outside a '<form>'.

Examples with Explanation

1. 'placeholder' Example

Code : 1 📝

<!DOCTYPE html>
<html>
<body>

<textarea placeholder="Write your feedback here..." rows="4" cols="50"></textarea>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This shows placeholder text until the user types something.

2. 'maxlength' Example

Code : 2 📝

<!DOCTYPE html>
<html>
<body>

<textarea maxlength="100">Max 100 characters allowed.</textarea>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Limits input to 100 characters.

3. 'readonly' Example

Code : 3 📝

<!DOCTYPE html>
<html>
<body>

<textarea readonly>This field is not editable.</textarea>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This field can be seen but not edited.

4. 'disabled' Example

Code : 4 📝

<!DOCTYPE html>
<html>
<body>

<textarea disabled>This field is disabled.</textarea>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

The field is disabled and won't be submitted.

5. Inline CSS Styling Example

Code : 5 📝

<!DOCTYPE html>
<html>
<body>

<textarea style="width:300px; height:120px; padding:10px; font-size:16px; color:#333; background-color:#f9f9f9; border:1px solid #ccc; border-radius:5px;">
Enter your message...
</textarea>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This styles the textarea to look clean and readable using simple inline CSS.

Conclusion

The '<textarea>' tag in HTML is essential when you need users to input multiple lines of text. It's flexible, supports various attributes for form control, and can be styled easily using CSS. With the right usage and proper form validation, it can improve user experience and gather accurate data.

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs)

Can '<textarea>' be self-closed like '<input />'?

No, '<textarea>' must have an opening and closing tag because it contains content.

How do I limit the number of characters in a '<textarea>'?

Use the 'maxlength' attribute to set the maximum number of characters.

Can I use the '<textarea>' tag outside a '<form>'?

Yes, but it won't be submitted unless linked with a 'form' attribute.

Is the '<textarea>' tag supported by all browsers?

Yes, it's fully supported in all major browsers.

Previous Post Next Post