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

Next lesson: Selection fields

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies