Textarea and Buttons
Accept long text and add clickable buttons.
Syntax
<textarea rows="4"></textarea>The <textarea> element accepts multi-line text, such as comments or messages. You can set its size with the rows and cols attributes.
The <button> element creates a clickable button. Its type can be submit, reset, or button.
Example
Loading editor…
Press Run to see the result.
When to use it
- A support form uses <textarea> for the message body so users can write multi-line descriptions of their issue.
- A blog comment section uses <textarea> to capture long-form reader responses.
- A form uses type="reset" on a <button> to let users clear all fields and start their entry over.
More examples
Textarea for a message field
rows and cols set the visible size; maxlength limits total characters; placeholder hints at the expected content.
<label for="message">Message</label>
<textarea id="message" name="message"
rows="6" cols="40"
placeholder="Describe your issue..."
maxlength="500"></textarea>Submit and reset buttons
type="submit" sends the form data; type="reset" clears all fields back to their default values.
<form>
<input type="text" name="name" placeholder="Your name">
<div>
<button type="submit">Send message</button>
<button type="reset">Clear form</button>
</div>
</form>Button with icon and disabled state
Buttons can contain images or icons; disabled prevents clicks and submission while processing is in progress.
<button type="submit" id="send-btn">
<img src="send-icon.svg" alt="" aria-hidden="true">
Send message
</button>
<!-- Disabled while processing -->
<button type="submit" disabled aria-busy="true">
Sending...
</button>
Discussion