HTML textarea Tag

HTML <textarea> Tag: Multi-line Text Input

The <textarea> tag in HTML is used to create a multi-line text input field where users can enter large amounts of text, such as comments, feedback, or messages. Unlike the <input> tag, which is used for single-line input, <textarea> allows for scrollable text areas.

1. Basic Syntax

<form>
  <label for="message">Your Message:</label><br>
  <textarea id="message" name="message" rows="4" cols="50">
    Enter your message here...
  </textarea>
</form>

✅ Displays a text box with 4 rows and 50 columns for input.

2. Attributes of <textarea>

Attribute	Description	Example
rows	Specifies the number of visible text lines (height).	rows="4"
cols	Specifies the visible width of the text area (number of characters per line).	cols="50"
placeholder	Specifies placeholder text to show before user input.	placeholder="Enter text here"
disabled	Disables the textarea (makes it uneditable).	disabled
readonly	Makes the textarea read-only, users can't modify it.	readonly
maxlength	Sets the maximum number of characters allowed.	maxlength="200"
wrap	Specifies how text should be wrapped within the textarea.	wrap="soft" or wrap="hard"

3. Example with Attributes

<form>
  <label for="comment">Your Comment:</label><br>
  <textarea id="comment" name="comment" rows="5" cols="40" placeholder="Write your comment here..." maxlength="300">
  </textarea>
</form>

✅ Provides a 5-row, 40-column text box with placeholder text and a character limit of 300.

4. Styling <textarea> with CSS

You can style the <textarea> using CSS:

<style>
  textarea {
    width: 100%;
    height: 150px;
    border: 2px solid #ccc;
    padding: 10px;
    font-family: Arial, sans-serif;
  }
</style>

<form>
  <label for="feedback">Feedback:</label><br>
  <textarea id="feedback" name="feedback" rows="4" cols="50"></textarea>
</form>

✅ Makes the textarea responsive (100% width) with custom padding and border.

5. Example with wrap Attribute

The wrap attribute controls whether text inside the <textarea> is wrapped when it reaches the edge.

Soft Wrap (Default)

<textarea wrap="soft" rows="4" cols="50"></textarea>

✅ Text will wrap visually but will not be submitted with line breaks.

Hard Wrap

<textarea wrap="hard" rows="4" cols="50"></textarea>

✅ Text will wrap and include line breaks when submitted.

6. Conclusion

• The <textarea> tag is used to create a multi-line text input for user input.

• It is useful for longer responses like comments, reviews, or messages.

• Attributes like rows, cols, placeholder, maxlength, and wrap help customize its behavior.

• CSS can be used to style the textarea for better presentation.