<textarea> / <select> / <option>

Since:		HTML 4（1997）

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

sample_textarea_select_option.html

<!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.

View sample page

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.

Customizing textarea and select with CSS

How to override browser defaults and create a unified, polished design.

/* textarea customization */
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;  /* inherit font from parent (important) */
  line-height: 1.5;
  resize: vertical;      /* allow vertical resize only */
  box-sizing: border-box;
  transition: border-color 0.2s;
}
textarea:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
textarea:disabled { background-color: #f5f5f5; cursor: not-allowed; }

/* select customization */
select {
  width: 100%;
  padding: 10px 36px 10px 12px;  /* right padding for custom arrow */
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background-color: #fff;
  /* Custom dropdown arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  appearance: none;  /* remove browser default arrow */
  cursor: pointer;
  box-sizing: border-box;
}

Dynamic Manipulation with JavaScript

// Character counter for textarea
var textarea = document.getElementById("msg");
var counter = document.getElementById("char-count");
textarea.addEventListener("input", function() {
  counter.textContent = this.value.length + " characters";
});

// Reset textarea content
document.getElementById("reset-btn").addEventListener("click", function() {
  textarea.value = "";
  textarea.focus();
});

// Get the selected value from a select
var select = document.getElementById("lang");
select.addEventListener("change", function() {
  console.log("Selected value:", this.value);
  console.log("Display text:", this.options[this.selectedIndex].text);
});

// Dynamically add an option to a select
var newOption = document.createElement("option");
newOption.value = "rust";
newOption.textContent = "Rust";
select.appendChild(newOption);

// Get all selected values from a multiple select
var multiSelect = document.getElementById("skills");
multiSelect.addEventListener("change", function() {
  var selected = Array.from(this.selectedOptions).map(function(opt) {
    return opt.value;
  });
  console.log("Selected:", selected);
});