<select></select>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素リスト化サブミット可能リセット可能再関連付け可能ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 0個以上のoption要素またはoptgroup要素 / スクリプトサポート要素

select要素は、プルダウンメニューを作成します。メニューの選択肢は、この要素内に配置するoption要素で示すことになります。


<select name="example">
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
</select>

属性
任意属性
name="" 部品の名前 文字列 部品を識別するための名前
size="" 表示する選択肢の数 数値 1以上の整数 (初期値は 1 (multiple属性がある場合は 4))
multiple 複数の選択を可能にする multiple 値は省略可能
disabled 部品の無効化 disabled 値は省略可能
form="" [+]フォームとの関連付け ID名 関連付けるform要素に指定したID名
autofocus [+]自動フォーカスの指定 autofocus 値は省略可能、1つの文書に1つだけ指定可能
required [+]入力必須 required 値は省略可能

name属性について

name属性は、フォーム部品を識別するための名前を指定します。

この属性の値は、option要素の値とセットで送信されることになります。

<select name="pref">
<option value="Tokyo">東京</option>
</select>

上記の場合は、pref=Tokyo といった感じで送信されます。

size属性について

size属性は、表示される選択肢の数を指定します。

この属性の初期値は、multiple属性が指定されている場合は 4、指定されていない場合は 1 になります。

次の例では、右側のメニューに size="5" を指定しています。(左側はデフォルトのまま)

<select name="example2" size="5">
<option value="">5つの選択肢を表示</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
<option value="選択肢4">選択肢4</option>
<option value="選択肢5">選択肢5</option>
<option value="選択肢6">選択肢6</option>
<option value="選択肢7">選択肢7</option>
</select>

multiple属性について

multiple属性は、複数の選択が可能であることを指定します。

  • Windowsの場合は、Ctrl キーを押しながらクリックすると、複数を選択することができます。

<select name="example3" size="5" multiple>
<option value="選択肢1">選択肢1</option>
<option value="選択肢2" selected>選択肢2</option>
<option value="選択肢3">選択肢3</option>
<option value="選択肢4" selected>選択肢4</option>
<option value="選択肢5">選択肢5</option>
</select>

この属性を指定しない場合は、1つしか選択することができません。

disabled属性について

disabled属性は、フォーム部品の無効化を指定します。

この属性が指定された部品は、選択することができなくなります。また、データも送信されなくなります。

<select name="example" disabled>
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
</select>
  • この属性が指定されたフォーム部品は、妥当性のチェックから除外されます。

form属性について

form属性は、そのフォーム部品をどのform要素に関連付けるかを指定します。この属性の値には、対応するform要素に指定したID名を記述します。

  • この属性は、部品をform要素の外に配置する場合に使用します。(form要素の中に配置する場合は不要です)
<p>都道府県:<select name="pref" form="example">
<option value="Tokyo">東京</option>
<option value="Osaka">大阪</option>
<option value="Fukuoka">福岡</option>
</select></p>

<form method="post" action="example.cgi" id="example">
<p><input type="submit" value="送信する"></p>
</form>
  • ただし、この機能に対応していないブラウザもあります。
  • form属性の使用例は、form要素のページでご覧になれます。

autofocus属性について

autofocus属性は、フォーム部品の自動フォーカスを指定します。

この属性が指定された部品は、文書の読み込み時に自動的にフォーカスされることになります。

  • この属性は、1つの文書に1つだけ指定することができます。
<select name="example" autofocus>
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
</select>

required属性について

required属性は、そのフォーム部品が入力必須であることを指定します。

次の例では、2番目以降の選択肢(value属性の値が空でない選択肢)を選択する必要があります。

<select name="example" required>
<option value="">選択してください</option>
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
</select>

プレースホルダ・ラベル・オプションについて

プレースホルダ・ラベル・オプションとは、簡単に言ってしまえば値が設定されていないメニュー項目のことです。例えば、▼項目を選択してくださいといった感じで表示される項目がそれにあたります。

<select name="example" required>
<option value="">選択してください</option>
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
</select>

上記の例では、選択してくださいと書かれているoption要素プレースホルダ・ラベル・オプションになります。

条件は次のようになります。

  1. select要素required属性が指定されていて、かつmultiple属性が指定されていない。
  2. select要素size属性1 の状態である。(初期値)
  3. select要素の直下にoption要素が置かれている。(optgroup要素を使用していない)

上記の条件下において、最初のoption要素のvalue属性の値が空の場合には、そのoption要素がプレースホルダ・ラベル・オプションとなります。

そして、上記の 12 の条件に当てはまるselect要素は、プレースホルダ・ラベル・オプション持たなければならないとされています。

HTML5における変更点
  • form属性、autofocus属性、required属性が追加されました。
  • プレースホルダ・ラベル・オプションが定義されました。

使用例

5つの選択肢を配置した例

<p>
<select name="example">
<option value="選択肢1">選択肢のサンプル1</option>
<option value="選択肢2">選択肢のサンプル2</option>
<option value="選択肢3">選択肢のサンプル3</option>
<option value="選択肢4">選択肢のサンプル4</option>
<option value="選択肢5">選択肢のサンプル5</option>
</select>
</p>

表示例

size属性を指定した例

<p>
<select name="example" size="5">
<option value="選択肢1">選択肢のサンプル1</option>
<option value="選択肢2">選択肢のサンプル2</option>
<option value="選択肢3">選択肢のサンプル3</option>
<option value="選択肢4">選択肢のサンプル4</option>
<option value="選択肢5">選択肢のサンプル5</option>
<option value="選択肢6">選択肢のサンプル6</option>
<option value="選択肢7">選択肢のサンプル7</option>
</select>
</p>

表示例

multiple属性を指定した例

<p>
<select name="example" multiple>
<option value="選択肢1">選択肢のサンプル1</option>
<option value="選択肢2">選択肢のサンプル2</option>
<option value="選択肢3">選択肢のサンプル3</option>
<option value="選択肢4">選択肢のサンプル4</option>
<option value="選択肢5">選択肢のサンプル5</option>
<option value="選択肢6">選択肢のサンプル6</option>
<option value="選択肢7">選択肢のサンプル7</option>
</select>
</p>

表示例

  • Windowsの場合は、Ctrl キーを押しながらクリックします。
disabled属性を指定した例

<p>
<select name="example" disabled>
<option value="選択肢1">選択肢のサンプル1</option>
<option value="選択肢2">選択肢のサンプル2</option>
<option value="選択肢3">選択肢のサンプル3</option>
</select>
</p>

表示例

required属性を指定した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<form method="get" action="select.html">

<p>
<select name="example" required>
<option value="">選択してください</option>
<option value="選択肢1">選択肢のサンプル1</option>
<option value="選択肢2">選択肢のサンプル2</option>
<option value="選択肢3">選択肢のサンプル3</option>
<option value="選択肢4">選択肢のサンプル4</option>
<option value="選択肢5">選択肢のサンプル5</option>
</select>
 <strong>必須</strong>
</p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

必須

  • 対応しているブラウザでは、送信時に入力内容の妥当性がチェックされ、不備があればエラーメッセージが表示されます。