<textarea> / <select> / <option>

対応:		HTML 4（1997）

『textarea』は複数行のテキストを入力するフォームコントロールで、『select』と『option』はドロップダウンリストを作成するために使用します。

構文

<!-- 複数行テキスト入力 -->
<textarea name="message" rows="5" cols="40">初期テキスト</textarea>

<!-- ドロップダウンリスト -->
<select name="country">
  <option value="">選択してください</option>
  <option value="jp">日本</option>
  <option value="us" selected>アメリカ</option>
</select>

<!-- optgroupでグループ分け -->
<select name="food">
  <optgroup label="和食">
    <option value="sushi">寿司</option>
    <option value="tempura">天ぷら</option>
  </optgroup>
  <optgroup label="洋食">
    <option value="pasta">パスタ</option>
  </optgroup>
</select>

属性一覧

属性	概要
rows（textarea）	テキストエリアの高さを行数で指定します。
cols（textarea）	テキストエリアの幅を文字数で指定します。
multiple（select）	複数選択を可能にします。Ctrl/Cmdキーを押しながらクリックで複数選択できます。
size（select）	一度に表示する選択肢の件数を指定します。
selected（option）	ページ表示時にあらかじめ選択された状態にします。
disabled（option）	その選択肢をグレーアウトして選択不可にします。
label（optgroup）	グループのラベルテキストを指定します。

サンプルコード

sample_textarea_select_option.html

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

  <form>
    <!-- 複数行テキスト入力 -->
    <p>
      <label for="msg">お問い合わせ内容：</label><br>
      <textarea id="msg" name="message" rows="4" cols="50"
        placeholder="ご質問・ご要望をご記入ください"></textarea>
    </p>

    <!-- ドロップダウン（optgroupでグループ分け） -->
    <p>
      <label for="lang">プログラミング言語：</label>
      <select id="lang" name="language">
        <option value="">選択してください</option>
        <optgroup label="Webフロントエンド">
          <option value="html">HTML</option>
          <option value="css">CSS</option>
          <option value="js" selected>JavaScript</option>
        </optgroup>
        <optgroup label="サーバーサイド">
          <option value="php">PHP</option>
          <option value="python">Python</option>
        </optgroup>
      </select>
    </p>

    <!-- 複数選択のselectリスト -->
    <p>
      <label for="skills">得意な分野（複数選択可）：</label><br>
      <select id="skills" name="skills[]" multiple size="4">
        <option value="frontend">フロントエンド</option>
        <option value="backend">バックエンド</option>
        <option value="design">デザイン</option>
        <option value="infra">インフラ</option>
      </select>
    </p>

    <p><button type="submit">送信</button></p>
  </form>

</body>
</html>

実行結果

4行のテキストエリア、グループ分けされたドロップダウン（「JavaScript」が初期選択）、複数選択可能なリストボックスが縦に並んで表示されます。

サンプルページはこちら

概要

『textarea』は問い合わせフォームのメッセージ欄など、長い文章を入力させたいときに使います。初期値はタグの内容として記述します（value属性ではありません）。見た目のサイズはCSSの『width』・『height』でも制御できますが、ユーザーが右下をドラッグしてリサイズできる動作を制限したい場合は、CSSで『resize: none』を指定します。

『select』要素には通常のドロップダウン形式と、『multiple』属性を付けたリストボックス形式があります。複数選択を使う場合、サーバー側で複数の値を受け取るために『name』属性の値を『name[]』のように配列形式にすることを推奨します（PHPなど多くのサーバーサイド言語で有効です）。

『optgroup』を使うと、選択肢を視覚的にグループ分けできます。グループのラベル自体は選択できません。選択肢が多い場合にユーザーが目的の項目を見つけやすくなります。

CSSによるtextareaとselectのカスタマイズ

ブラウザのデフォルトスタイルを上書きして統一感のあるデザインにする方法です。

/* textareaのカスタマイズ */
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;  /* フォントを親要素から継承（重要） */
  line-height: 1.5;
  resize: vertical;      /* 縦方向のみリサイズ可能 */
  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のカスタマイズ */
select {
  width: 100%;
  padding: 10px 36px 10px 12px;  /* 右側に矢印アイコン分の余白 */
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background-color: #fff;
  /* カスタム矢印アイコン */
  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;  /* ブラウザデフォルトの矢印を消す */
  cursor: pointer;
  box-sizing: border-box;
}

JavaScriptによる動的操作

// textareaの文字数カウント
var textarea = document.getElementById("msg");
var counter = document.getElementById("char-count");
textarea.addEventListener("input", function() {
  counter.textContent = this.value.length + " 文字";
});

// textareaの内容をリセットする
document.getElementById("reset-btn").addEventListener("click", function() {
  textarea.value = "";
  textarea.focus();
});

// selectの選択値を取得する
var select = document.getElementById("lang");
select.addEventListener("change", function() {
  console.log("選択値:", this.value);
  console.log("表示テキスト:", this.options[this.selectedIndex].text);
});

// selectのoptionをJavaScriptで動的に追加する
var newOption = document.createElement("option");
newOption.value = "rust";
newOption.textContent = "Rust";
select.appendChild(newOption);

// 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);
});