HTML <textarea> Tag

The HTML <textarea> tag is used to create multi-line text input fields within forms. Unlike the <input> tag, which is typically used for single-line text inputs, the <textarea> element allows users to input larger amounts of text, making it ideal for collecting comments, feedback, or messages. This tag is an essential part of form design in web development, ensuring a user-friendly interface for data collection.

The <textarea> tag supports a variety of attributes that allow developers to customize the size, behavior, and appearance of the input field. It is a versatile tool for creating text areas with specific functionality, contributing to improved user experience and accessibility.

Syntax of the <textarea> Tag

html
<textarea name="name" rows="number" cols="number">Default Text</textarea>
  • name: Identifies the textarea when the form is submitted.
  • rows: Defines the number of visible text lines.
  • cols: Specifies the width of the textarea in terms of the number of characters.
  • Default text: (Optional) Pre-filled text that appears within the textarea when the page loads.

Attributes of the <textarea> Tag

The <textarea> tag supports a wide range of attributes, making it highly customizable:

AttributeDescription
nameAssigns a unique name to the textarea, which is used to identify the field when the form is submitted.
rowsSpecifies the number of visible rows in the textarea (height).
colsSpecifies the number of visible columns in the textarea (width).
placeholderProvides a hint to the user about what to enter in the textarea.
maxlengthDefines the maximum number of characters allowed in the textarea.
disabledDisables the textarea, making it uneditable.
readonlyMakes the textarea content read-only, meaning it cannot be modified by the user.
requiredSpecifies that the textarea must be filled out before the form can be submitted.
wrapSpecifies how the text inside the textarea should wrap when it reaches the end of the line. Can be set to "soft", "hard", or "off" for different behavior.

These attributes provide flexibility for developers, allowing them to design text areas that cater to the specific needs of a form or webpage.

Examples of HTML <textarea> Tag

Example 1: Simple Textarea with Placeholder

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textarea Example</title>
</head>
<body>
    <form>
        <label for="comments">Your Comments:</label><br>
        <textarea id="comments" name="comments" rows="5" cols="40" placeholder="Enter your comments here"></textarea>
    </form>
</body>
</html>

In this example, a basic textarea with a placeholder is provided for users to enter their comments. The rows and cols attributes define the size of the textarea.

Example 2: Disabled Textarea with Pre-Filled Text

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disabled Textarea Example</title>
</head>
<body>
    <form>
        <label for="description">Description (Read-only):</label><br>
        <textarea id="description" name="description" rows="4" cols="50" readonly>This textarea is read-only. You cannot modify its content.</textarea>
    </form>
</body>
</html>

In this example, the textarea is pre-filled with content and is set to "read-only" using the readonly attribute. Users can view the content but cannot edit it.

FAQs About HTML <textarea> Tag

Q1: What is the purpose of the HTML <textarea> tag?
A: The <textarea> tag is used to create multi-line text input fields, allowing users to input larger blocks of text, such as comments or feedback.

Q2: How is the <textarea> different from the <input> tag?
A: The <input> tag typically creates single-line text fields, whereas the <textarea> tag creates multi-line text fields, suitable for larger amounts of input.

Q3: Can the size of a <textarea> be adjusted by the user?
A: Yes, by default, users can resize the textarea in most browsers. However, developers can disable this by using CSS (resize:none;).

Q4: Is it possible to limit the number of characters a user can input in a <textarea>?
A: Yes, by using the maxlength attribute, you can set a limit on the number of characters that can be entered in the textarea.

Q5: Can a <textarea> be made mandatory for form submission?
A: Yes, by using the required attribute, you can make the textarea mandatory, ensuring that the form cannot be submitted without filling out this field.

tools

HTML

Related Articles