<textarea> / <select> / <option>

textarea is a form control for multi-line text input. select and option are used to create dropdown lists.

Syntax

<!-- Multi-line text input -->
<textarea name="message" rows="5" cols="40">Default text</textarea>

<!-- Dropdown list -->
<select name="country">
  <option value="">Please select</option>
  <option value="jp">Japan</option>
  <option value="us" selected>United States</option>
</select>

<!-- Grouping options with optgroup -->
<select name="food">
  <optgroup label="Japanese">
    <option value="sushi">Sushi</option>
    <option value="tempura">Tempura</option>
  </optgroup>
  <optgroup label="Western">
    <option value="pasta">Pasta</option>
  </optgroup>
</select>

Attribute List

Attribute	Description
rows (textarea)	Specifies the height of the text area in number of lines.
cols (textarea)	Specifies the width of the text area in number of characters.
multiple (select)	Enables multiple selection. Users can select multiple items by holding Ctrl/Cmd and clicking.
size (select)	Specifies how many options are visible at once.
selected (option)	Pre-selects the option when the page loads.
disabled (option)	Grays out the option and makes it unselectable.
label (optgroup)	Specifies the label text for the group.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>textarea / select / option</title>
</head>
<body>

  <form>
    <!-- Multi-line text input -->
    <p>
      <label for="msg">Message:</label><br>
      <textarea id="msg" name="message" rows="4" cols="50"
        placeholder="Enter your questions or requests here"></textarea>
    </p>

    <!-- Dropdown with optgroup grouping -->
    <p>
      <label for="lang">Programming language:</label>
      <select id="lang" name="language">
        <option value="">Please select</option>
        <optgroup label="Web Frontend">
          <option value="html">HTML</option>
          <option value="css">CSS</option>
          <option value="js" selected>JavaScript</option>
        </optgroup>
        <optgroup label="Server-side">
          <option value="php">PHP</option>
          <option value="python">Python</option>
        </optgroup>
      </select>
    </p>

    <!-- Multi-select list -->
    <p>
      <label for="skills">Areas of expertise (multiple selections allowed):</label><br>
      <select id="skills" name="skills[]" multiple size="4">
        <option value="frontend">Frontend</option>
        <option value="backend">Backend</option>
        <option value="design">Design</option>
        <option value="infra">Infrastructure</option>
      </select>
    </p>

    <p><button type="submit">Submit</button></p>
  </form>

</body>
</html>

Result

A 4-row textarea, a grouped dropdown (with "JavaScript" pre-selected), and a multi-select listbox are displayed stacked vertically.

HTML Rendering Preview

Overview

Use textarea when you want users to enter long text, such as a message field in a contact form. The initial value is written as the element's content — not as a value attribute. You can control the visual size with the CSS width and height properties. To prevent users from resizing the textarea by dragging its bottom-right corner, set resize: none in CSS.

The select element supports two modes: a standard dropdown and a listbox when the multiple attribute is added. When using multiple selection, it is recommended to use array notation for the name attribute (e.g., name[]) so the server can receive multiple values. This works with PHP and most other server-side languages.

Using optgroup lets you visually group related options. The group label itself cannot be selected. This helps users find the right option when the list is long.