HTML Textarea

The HTML <textarea> element is a versatile form control that allows users to input multiple lines of text. It's commonly used for comments, reviews, or any situation where longer text input is required.

Basic Syntax

Here's the simplest form of a textarea:

<textarea></textarea>

Key Attributes

• rows: Specifies the visible number of lines
• cols: Sets the visible width of the textarea
• name: Identifies the textarea in form submissions
• id: Provides a unique identifier for the element
• placeholder: Displays hint text when the textarea is empty

Example Usage

A more complete example with attributes:

<textarea name="comment" id="userComment" rows="4" cols="50" placeholder="Enter your comment here..."></textarea>

Styling with CSS

Textareas can be styled using CSS to match your website's design. Here's a simple example:

textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

Best Practices

• Always provide a name attribute for form submission
• Use placeholder text to guide users
• Consider setting a maximum length with the maxlength attribute
• Ensure the textarea is large enough for the expected input
• Use HTML Labels to associate the textarea with a description

Accessibility Considerations

To improve accessibility:

• Always use a <label> element to describe the textarea
• Consider using aria-describedby for additional instructions
• Ensure sufficient color contrast for visibility

Related Concepts

To further enhance your forms, explore these related HTML concepts:

• HTML Forms
• HTML Input Types
• HTML Form Attributes

Browser Support

The <textarea> element is supported in all modern browsers, making it a reliable choice for multi-line text input in web forms.

Conclusion

The HTML textarea is a fundamental component for collecting longer text input from users. By understanding its attributes and best practices, you can create effective and user-friendly forms for your web projects.