🌱BeginnerForms
Textarea and Buttons
Collect multi-line text with <textarea> and trigger actions with <button>.
Overview
For multi-line text input comments, messages, descriptions, code use <textarea> instead of an <input>. Unlike <input>, <textarea> has a closing tag and its default value goes between the tags (not in a value attribute).
Buttons in forms come in three types:
- type="submit": submits the form to the server
- type="reset": resets all fields to their default values
- type="button": does nothing by default used with JavaScript
The <button> element is preferred over <input type="submit"> because it can contain HTML content (icons, styled text).
Key Points
- •<textarea name="..." rows="5" cols="40"></textarea> rows and cols set default size
- •Default text in <textarea> goes between the tags, not in a value attribute
- •Browsers allow resizing textareas by default CSS resize property controls this
- •<button type="submit"> submits the form; type="button" does nothing without JS
- •<button> can contain HTML (icons, styled text); <input type="submit"> cannot
- •A <button> inside a <form> defaults to type="submit" if type is not specified
Examples
A textarea for messages
<label for="message">Your message</label>
<textarea id="message" name="message" rows="5" cols="50"
placeholder="Type your message here...">
</textarea>rows and cols set the initial visible size. CSS can override these.
Textarea with default text
<textarea name="bio" rows="4">
I am a web developer with 3 years of experience.
</textarea>Default value goes between the opening and closing tags whitespace is included.
All three button types
<form action="/submit" method="POST">
<input type="text" name="data">
<!-- Submits the form -->
<button type="submit">Submit</button>
<!-- Resets all fields to defaults -->
<button type="reset">Clear</button>
<!-- Runs JavaScript only does not submit -->
<button type="button" onclick="alert('Hi!')">Click Me</button>
</form><button> with icon content
<button type="submit">
<svg>...</svg>
Send Message
</button><input type="submit"> cannot contain HTML; <button> can.
Common Mistakes
- Putting default text in a value attribute on textarea (it doesn't work use inner text)
- Forgetting type on buttons inside a form defaults to submit and may submit unexpectedly
- Using type="reset" carelessly it clears all fields, which users often find frustrating
Note
Always specify type on your <button> elements. If it's in a form and you only want JavaScript to run (not form submission), use type="button". Otherwise you'll accidentally submit the form.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4