Textarea and button
Learn to use <textarea> and <button>.
Long text with textarea
Sometimes the user needs to write several lines: a message, a comment or a note. You use the <textarea> tag for this. Unlike <input>, <textarea> has a closing tag, and any text between the tags becomes the default value.
Example: <textarea name="message" rows="4">Please write...</textarea>. rows says how many rows show, cols says how wide it is.
Send the form with a button
To send the form, you need a button. The usual way is <button type="submit">Send</button>. With type="submit", pressing the button sends the form data to the action address.
The <button>'s type attribute takes three values: submit (send), reset (clear) and button (no behaviour, waits for JavaScript). For sending, use submit. Example: <button type="submit">Save</button>.
Exercise Add a message area and a button
Add a <textarea> to the form; its name should be message. Then add a <button type="submit"> with the text Send.
Show example solution
<form>
<textarea name="message"></textarea>
<button type="submit">Send</button>
</form>Test yourself
-
Which case is best suited to a <textarea>?
- Single-line first and last name
- A username
- A dropdown list
- A long comment
Show answer
A long comment — Correct. textarea suits long, multi-line text.
-
Complete the placeholder
<textarea name="message" placeholder=____></textarea>Show answer
<textarea name="message" placeholder="Type your message..."></textarea> -
Match each tag to its role
- <textarea>
- Multi-line text
- </textarea>
- Textarea closing
- <button>
- Button
- type="submit"
- Sends the form