Learn HTML – Part 40 – textarea Tag – Multi-line Input

Learn HTML – Part 40 – textarea Tag – Multi-line Input

The HTML textarea tag is used to create a multi-line text input field in a form.

It allows users to enter longer pieces of text such as messages, comments, or descriptions.


What is the textarea Tag?

The textarea element defines a text input area that can contain multiple lines of text.

Unlike the input tag, which is used for single-line inputs, textarea is designed for larger text content.


Basic Syntax

<textarea></textarea>

Example – Simple Textarea

<form>

   <label>Message:</label><br>
   <textarea></textarea>

</form>

Output:




Using rows and cols Attributes

The size of the textarea can be controlled using the rows and cols attributes.

<textarea rows="4" cols="40"></textarea>

Example – Textarea with Size

<textarea rows="5" cols="40">
Enter your message here...
</textarea>

Output:


Common textarea Attributes

AttributeDescription
rowsDefines the visible number of text lines
colsDefines the width of the textarea
placeholderDisplays hint text inside the textarea
nameSpecifies the textarea name
requiredMakes the field mandatory

Example – Textarea with Placeholder

<textarea
rows="4"
cols="40"
placeholder="Enter your message">
</textarea>

Why Use textarea?

  • Allows users to enter longer text
  • Useful for messages or comments
  • Commonly used in contact forms
  • Improves form usability

The textarea tag is ideal for collecting longer text input from users.


Common Mistakes Beginners Make

  • Using input instead of textarea for long text
  • Not setting rows and cols properly
  • Forgetting to include the name attribute

Conclusion

The HTML textarea tag is used to create multi-line text input fields.

It is commonly used in forms for messages, feedback, or comments.

What’s Next?

Now that you understand the textarea tag, the next step is learning about the select tag, which is used to create dropdown lists in HTML forms.

Next: Learn HTML – Part 41 – select Tag – Dropdown Lists →


Series: Learn HTML Series

Facebook
WhatsApp
Twitter
LinkedIn
Pinterest

Leave a Comment

Your email address will not be published. Required fields are marked *

Related Articles from the Series

learn-html-part-63-complete-html-project-thumbnail
Learn HTML – Part 63 – Complete HTML Project (Build a Web Page)
Learn HTML – Part 63 – Complete HTML Project In this final lesson, we will build a complete HTML webpage...
learn-html-part-62-time-tag-date-time-thumbnail
Learn HTML – Part 62 – time Tag – Date & Time
Learn HTML – Part 62 – time Tag – Date & Time The HTML time tag is used to represent dates and times...
learn-html-part-61-mark-tag-highlight-text-thumbnail
Learn HTML – Part 61 – mark Tag – Highlight Text
Learn HTML – Part 61 – mark Tag – Highlight Text The HTML mark tag is used to highlight text that is...
learn-html-part-60-figcaption-tag-figure-caption-thumbnail
Learn HTML – Part 60 – figcaption Tag – Figure Caption
Learn HTML – Part 60 – figcaption Tag – Figure Caption The HTML figcaption tag is used to define a caption...
learn-html-part-59-figure-tag-media-content-thumbnail
Learn HTML – Part 59 – figure Tag – Media Content
Learn HTML – Part 59 – figure Tag – Media Content The HTML figure tag is used to group media content...
learn-html-part-58-track-tag-video-subtitles-thumbnail
Learn HTML – Part 58 – track Tag – Video Subtitles
Learn HTML – Part 58 – track Tag – Video Subtitles The HTML track tag is used to add subtitles, captions,...
learn-html-part-57-source-tag-media-sources-thumbnail
Learn HTML – Part 57 – source Tag – Media Sources
Learn HTML – Part 57 – source Tag – Media Sources The HTML source tag is used to define multiple media...
learn-html-part-56-picture-tag-responsive-images-thumbnail
Learn HTML – Part 56 – picture Tag – Responsive Images
Learn HTML – Part 56 – picture Tag – Responsive Images The HTML picture tag is used to display responsive...
learn-html-part-55-dialog-tag-modal-dialog-thumbnail
Learn HTML – Part 55 – dialog Tag – Modal Dialog
Learn HTML – Part 55 – dialog Tag – Modal Dialog The HTML dialog tag is used to create modal or popup...
learn-html-part-54-summary-tag-details-caption-thumbnail
Learn HTML – Part 54 – summary Tag – Details Caption
Learn HTML – Part 54 – summary Tag – Details Caption The HTML summary tag is used to define a visible...
Scroll to Top