Introduction
A textarea lets users type in multiple lines of text, like writing a note or message.
A textarea lets users type in multiple lines of text, like writing a note or message.
<textarea name="example" rows="4" cols="50">Default text here</textarea>
<textarea></textarea>
<textarea rows="5" cols="30">Write your message here...</textarea>
<textarea name="feedback" aria-label="Feedback box" placeholder="Type your feedback"></textarea>
This example shows a labeled textarea with placeholder text. The box is styled to be wide and tall enough for comfortable typing. It also highlights when focused for better accessibility.
<!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> <style> body { font-family: Arial, sans-serif; padding: 1rem; background-color: #f9f9f9; } label { font-weight: 600; display: block; margin-bottom: 0.5rem; } textarea { width: 100%; max-width: 600px; height: 8rem; padding: 0.5rem; font-size: 1rem; border: 2px solid #ccc; border-radius: 0.25rem; resize: vertical; } textarea:focus { border-color: #007acc; outline: none; box-shadow: 0 0 5px #007acc; } </style> </head> <body> <main> <form> <label for="comments">Your Comments:</label> <textarea id="comments" name="comments" aria-label="Comments box" placeholder="Type your comments here..."></textarea> </form> </main> </body> </html>
<label> or aria-label to describe the textarea for screen readers.placeholder attribute shows a hint inside the box but disappears when typing starts.The <textarea> tag creates a multi-line text input box.
Use rows and cols or CSS to set its size.
Always label your textarea for better accessibility.
<textarea> tag in HTML?<textarea> tag function<textarea> tag is designed to allow users to enter multiple lines of text, unlike <input> which is usually single line.<textarea> using HTML attributes?<textarea> size attributesrows and cols attributes define the visible height and width in lines and characters.<textarea rows='4' cols='50'></textarea> uses rows and cols correctly. Options A, B, and C use invalid or non-existent attributes.<label for='msg'>Message:</label> <textarea id='msg' rows='3' cols='20'>Hello World</textarea>
label with for='msg' links to the textarea with id='msg', so the label 'Message:' appears next to the textarea.<textarea rows='5' cols='30'>Enter your comment here</textarea
</textarea tag is missing the closing '>' character, which is required to properly close the tag.rows and cols attributes are correctly used, default text inside textarea is allowed, and textarea is not self-closing.<label> with for attribute matching the textarea's id helps screen readers and keyboard users.em or % makes the textarea adapt to different screen sizes.Pass the test and this pattern moves unknown