Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

トップページ
HTMLタグ辞典
<textarea> / <select> / <option>

<textarea> / <select> / <option>

『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）	グループのラベルテキストを指定します。

サンプルコード

<!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」が初期選択）、複数選択可能なリストボックスが縦に並んで表示されます。

<!-- ブラウザ上での表示イメージ -->
お問い合わせ内容：
┌────────────────────────────────┐
│ ご質問・ご要望をご記入ください  │
│                                │
└────────────────────────────────┘

プログラミング言語：[ JavaScript ▼ ]

得意な分野（複数選択可）：
┌────────────────┐
│ フロントエンド  │
│ バックエンド    │
│ デザイン       │
│ インフラ       │
└────────────────┘

概要

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

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

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