<select></select>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素リスト化サブミット可能リセット可能自動大文字化と自動修正継承ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 0個以上のoption要素optgroup要素hr要素 / スクリプトサポート要素

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


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

属性
任意属性
name="" 部品の名前 文字列 部品を識別するための名前
size="" 表示する選択肢の数 数値 1以上の整数(既定値は 1(multiple属性がある場合は 4))
multiple 複数の選択を可能にする multiple 値は省略可能
form="" フォームとの関連付け ID名 関連付けるform要素に指定したID名
autocomplete="" オートコンプリート on オートコンプリートを有効にする
off オートコンプリートを無効にする
詳細トークン (詳しくは仕様書をご覧ください)
disabled 部品の無効化 disabled 値は省略可能
required 入力必須 required 値は省略可能

name属性について

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

この属性の値は、選択されたoption要素の値とセットで送信されます。

<select name="pref">
<option value="Tokyo">東京</option>
<option value="Osaka">大阪</option>
<option value="Fukuoka">福岡</option>
</select>

例えば、上記のメニューで東京が選択された場合は、pref=Tokyo といった感じで送信されることになります。

size属性について

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

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

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

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

multiple属性について

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

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

<select name="example3" size="5" multiple>
<option>選択肢のサンプル1</option>
<option selected>選択肢のサンプル2</option>
<option>選択肢のサンプル3</option>
<option selected>選択肢のサンプル4</option>
<option>選択肢のサンプル5</option>
</select>

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

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要素のページでご覧になれます。

autocomplete属性について

autocomplete属性は、オートコンプリート機能(入力内容の自動補完)を有効にするかどうかを指定します。

値には on(有効にする)または off(無効にする)を指定します。この属性を省略した場合は、form要素の設定内容が使用されます。(form要素にも指定されていない場合は on の状態が適用されます)

<select name="example" autocomplete="off">
<option>選択肢のサンプル1</option>
<option>選択肢のサンプル2</option>
<option>選択肢のサンプル3</option>
</select>
  • フォーム部品のautocomplete属性には、on / off 以外の値(詳細トークン)も指定することができます(詳しくは仕様書をご覧ください)。これにより、詳細な設定を行うことができます。
  • オートコンプリートの動作については、form要素のautocomplete属性のページでご確認いただけます。

disabled属性について

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

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

<select name="example" disabled>
<option>選択肢のサンプル1</option>
<option>選択肢のサンプル2</option>
<option>選択肢のサンプル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>選択肢のサンプル1</option>
<option>選択肢のサンプル2</option>
<option>選択肢のサンプル3</option>
</select>

プレースホルダ・ラベル・オプションの条件は次のようになります。

  1. select要素required属性が指定されていて、かつmultiple属性が指定されておらず、
  2. select要素size属性1 の状態であって、(既定値は 1
  3. select要素の直下にoption要素が置かれており、(optgroup要素を使用していない)
  4. select要素内の最初のoption要素に空のvalue属性が指定されている場合は、

その最初のoption要素はプレースホルダ・ラベル・オプションになります。

そして、

  1. select要素required属性が指定されていて、かつmultiple属性が指定されておらず、
  2. select要素size属性1 の状態である場合は、

そのselect要素にプレースホルダ・ラベル・オプションを配置しなければなりません

option要素間の区切りについて

select要素内にhr要素を入れると、option要素間の区切りを表すことができます。

文字コード:
<select name="code">
<option value="auto">自動判定</option>
<hr>
<option value="utf8">UTF-8</option>
<option value="sjis">Shift-JIS</option>
<option value="euc">EUC-JP</option>
</select>
旧HTMLからの変更点
  • HTML5:form属性、autofocus属性、required属性が追加されました。
  • HTML5:プレースホルダ・ラベル・オプションの意味が追加されました。
  • HTML5.2:autocomplete属性が追加されました。
  • HTML LS:autofocus属性がグローバル属性として再定義されました。
  • HTML LS:select要素内にhr要素を配置できるようになりました。

使用例

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

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

表示例
size属性を指定した例

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

表示例
multiple属性を指定した例

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

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

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

表示例
required属性を指定した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。
  • 1つ目のoption要素はプレースホルダ・ラベル・オプションになります。

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

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

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

</form>

表示例

必須

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

文字コード:
<select name="example">
<option value="auto">自動判定</option>
<hr>
<option value="utf8">UTF-8</option>
<option value="sjis">Shift-JIS</option>
<option value="euc">EUC-JP</option>
</select>

表示例
文字コード: