HTML Tutorial / Use textarea, select, option, and button

Use textarea for multi-line text, select with option for a prepared list of choices, and button for an explicit action. These elements have different ways of holding values and submitting a form.

Enter several lines with textarea

A textarea's initial value goes between its opening and closing tags rather than in a value attribute.

<label for="message">Your message</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

rows and cols influence the initial displayed size; CSS can make the control fit the available width. The name is needed if its content should be submitted. Text between the tags becomes a real initial value. If you only want to show an example, use a placeholder as a supplementary hint and keep the label. Use textarea instead of a single-line input when readers need room to edit a longer response.

Offer choices with select and option

<label for="topic">Topic</label>
<select id="topic" name="topic">
  <option value="order">Orders</option>
  <option value="delivery">Delivery</option>
  <option value="other">Other</option>
</select>

The screen shows “Orders,” but the submitted value is order. id="topic" connects the control to its label, while name="topic" names the submitted data. Choose option values that match what the server expects. With no interaction, the first option is selected. If users must consciously choose, start with <option value="">Choose a topic</option> and add required to select. If a sensible default exists, the first real option may be preferable.

State each button's type

Inside a form, a button defaults to submission. Use type="button" for a different scripted action so it does not submit accidentally.

<form action="" method="get">
  <label for="note">Note</label>
  <textarea id="note" name="note" rows="4"></textarea>
  <button type="submit">Submit</button>
  <button type="reset">Reset entries</button>
</form>

Opening this in a browser lets you submit to the current URL and inspect the query string without a server. Reset returns controls to their initial values; it does not always make them empty. If a textarea began with text, reset restores that text. A reset button can erase someone's work, so include it in a real form only when it has a clear purpose and placement. See the MDN HTML element reference for individual attributes.

type="button" prevents form submission but does not create a new action by itself. Without a script connected to it, clicking that button does nothing. Distinguish HTML's built-in submit and reset actions from actions that need a script.