<textarea>

textarea tag

The <textarea> tag in HTML creates a multi-line text input field, allowing users to input and edit larger amounts of text. Unlike the <input> tag, which is for single-line input, <textarea> is designed to handle longer text entries and can expand across multiple lines.

Syntax

<textarea name="name" rows="number" cols="number">Default text</textarea>

textarea Demo

<label for="story">Tell us your story:</label>
<textarea id="story" name="story" rows="5" cols="33">
  It was a dark and stormy night...
</textarea>

Attributes

• id: Links the textarea to a <label> for accessibility.
• name: Defines the name for data submission in a form.
• rows & cols: Set the visible size of the textarea (default varies by browser).
• Default Content: Placed between the tags; does not use the value attribute.
• Common Attributes:
  • autocapitalize: Controls text capitalization.
  • autocomplete: Suggests previously entered values.
  • autofocus: Automatically focuses the textarea on page load.
  • disabled: Prevents user input.
  • maxlength & minlength: Limits the number of characters allowed.
  • placeholder: Displays a hint when empty.
  • readonly: Prevents editing but allows selection.
  • required: Ensures input before form submission.
  • spellcheck: Enables or disables spell checking.
  • wrap: Controls text wrapping (soft or hard).

See also

Other form-related elements:

<form> <button> <datalist> <legend> <label> <select> <optgroup> <option> <input> <fieldset> <output> <progress> <meter>

Conclusion

The <textarea> tag is crucial for handling multi-line text input in forms, making it suitable for longer text entries like comments or messages. It offers various attributes, such as rows, cols, maxlength and placeholder, to customize the user experience. By associating it with a <label>, accessibility is improved. Overall, it provides an efficient and flexible solution for gathering extended user input.