Textareas, Select & Buttons: <textarea>, <select>, <option>, <button>

<input> handles single-line text. For multi-line text, dropdown menus, and submit actions, HTML provides three more elements: <textarea>, <select>, and <button>.

<textarea> — multi-line text

<textarea> creates a resizable multi-line text field. Unlike <input>, it is not self-closing — it has an opening and closing tag.

<label for="message">Message</label>
<textarea id="message" name="message"></textarea>

The element is empty by default. If you want default text inside it, place it between the tags:

<textarea id="message" name="message">Write your message here...</textarea>

Associate <textarea> with a <label> using for and id, exactly as you do with <input>.

<select> and <option> — dropdown menus

<select> creates a dropdown menu. <option> elements inside it define the choices. The user can pick one option at a time.

<label for="topic">Topic</label>
<select id="topic" name="topic">
  <option value="general">General question</option>
  <option value="feedback">Feedback</option>
  <option value="support">Support request</option>
</select>

• <select> is the container. Give it id and name.
• Each <option> has a value — this is what gets submitted with the form.
• The text between the <option> tags is what the user sees in the dropdown.

The first <option> is selected by default. To show a prompt instead, add a disabled placeholder option:

<select id="topic" name="topic">
  <option value="" disabled selected>Choose a topic...</option>
  <option value="general">General question</option>
  <option value="feedback">Feedback</option>
</select>

<button> — the submit button

<button> submits the form when clicked. Place it at the end of the form.

<button type="submit">Send message</button>

The type="submit" attribute tells the browser this button submits the form. If you omit type, the button defaults to submit when inside a <form> — but writing it explicitly is clearer.

A form with all three elements

<form>
  <label for="contact-name">Your name</label>
  <input type="text" id="contact-name" name="name">

  <label for="contact-email">Email address</label>
  <input type="email" id="contact-email" name="email">

  <label for="topic">Topic</label>
  <select id="topic" name="topic">
    <option value="" disabled selected>Choose a topic...</option>
    <option value="general">General question</option>
    <option value="feedback">Feedback</option>
    <option value="support">Support request</option>
  </select>

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Send message</button>
</form>

Exercise

Open index.html in VS Code.

Find the <form> in your Contact section. You are going to add three more elements: a dropdown, a textarea, and a submit button.

1. After the email input, add a <select> with at least two relevant <option> choices. Use a topic that fits your page.

2. After the select, add a labeled <textarea> for a message.

3. At the end of the form, add a <button type="submit"> with text like “Send” or “Submit”.

Your form should now look similar to this:

<form>
  <label for="contact-name">Your name</label>
  <input type="text" id="contact-name" name="name">

  <label for="contact-email">Email address</label>
  <input type="email" id="contact-email" name="email">

  <label for="topic">Topic</label>
  <select id="topic" name="topic">
    <option value="" disabled selected>Choose a topic...</option>
    <option value="question">Question</option>
    <option value="feedback">Feedback</option>
  </select>

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Send</button>
</form>

4. Save and open index.html in your browser. You should see the dropdown, the textarea, and the button. Try clicking the submit button — the browser will try to submit (and likely show an error or reload since there is no backend). That is expected.

Recap

• <textarea> creates a multi-line text field. It is not self-closing. Associate it with a <label> using for/id.
• <select> creates a dropdown. <option> elements inside it define the choices. The value attribute on each option is what gets submitted.
• <button type="submit"> submits the form. Place it at the end of the form.
• All three elements need associated <label> elements just like <input> does.