select要素とは

<select（セレクト）>要素は、option（オプション） selector（セレクター）の意味で、 フォームの セレクトボックス （選択式のメニュー）を表す要素です。この<select>要素は、選択肢全体を囲みます。選択肢は、<option>要素でマークアップ、なお、<option>要素は、<optgroup>要素でグループ化することも出来ます。

意味・役割
セレクトボックス （選択式のメニュー）を表す要素
利用できるバージョン（HTML4.01以降）
全てのバージョン
コンテンツ・カテゴリ
（HTML5より前：インライン要素）
コンテンツ・モデル（梱包できる要素）
0個以上の<option>要素または、<optgroup>要素
この要素を配置できる親要素
フレージング・コンテンツが配置できる要素

サンプルコード

select要素のコード例
<form action="" method="post">
  <dl>
    <dt><label for="job">職業</label></dt>
    <dd>
      <select name="job" id="job">
        <option value="WEBディレクター">WEBディレクター</option>
        <option value="WEBデザイナー">WEBデザイナー</option>
        <option value="WEBプログラマー">WEBプログラマー</option>
        <option value="フロントエンドエンジニア">フロントエンドエンジニア</option>
      </select>
    </dd>
  </dl>
  <p><input type="submit" value="送信"></p>
</form>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

select要素で使える属性

どの要素にでも使えるグローバル属性と以下の属性が使えます。

name属性

name（ネーム）属性は、 セレクトボックスの名前を指定する属性です。このname属性はユーザーが選択した値のラベルになります。従ってユーザーが選択した値を取り出す時に必要な名前になります。一般的には、どの質問に対してのセレクトボックスなのかがわかるように、質問内容を英語にした名前を指定します。

<select name="セレクトボックスの名前">
属性値
セレクトボックスの名前となる文字列
利用できるバージョン（HTML4.01以降）
全てのバージョン
使用例
<select name="jobs">
  <option value="WEBディレクター">WEBディレクター</option>
  <option value="WEBデザイナー">WEBデザイナー</option>
  <option value="WEBプログラマー">WEBプログラマー</option>
  <option value="フロントエンドエンジニア">フロントエンドエンジニア</option>
</select>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

disabled属性

disabled（ディセイブルド）属性は、 セレクトボックスを無効にする属性です。この属性を指定した場合は、値が送信されません。

<select disabled="disabled">
属性値
"disabled"： セレクトボックスを無効にする
利用できるバージョン（HTML4.01以降）
全てのバージョン
使用例
<select name="jobs" disabled="disabled">
  <option value="WEBディレクター">WEBディレクター</option>
  <option value="WEBデザイナー">WEBデザイナー</option>
  <option value="WEBプログラマー">WEBプログラマー</option>
  <option value="フロントエンドエンジニア">フロントエンドエンジニア</option>
</select>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

autofocus属性 HTML5で追加

autofocus（オートフォーカス）属性は、 ページを表示した時点で、 フォーカス （カーソル）されて選択可能状態にする属性です。

<select autofocus="autofocus">
属性値
"autofocus"： ページ表示時にフォーカスを入れる
利用できるバージョン（HTML4.01以降）
HTML5 〜
使用例
<select name="jobs" autofocus="autofocus">
  <option value="WEBディレクター">WEBディレクター</option>
  <option value="WEBデザイナー">WEBデザイナー</option>
  <option value="WEBプログラマー">WEBプログラマー</option>
  <option value="フロントエンドエンジニア">フロントエンドエンジニア</option>
</select>

required属性 HTML5で追加

required（リクワイアード）属性は、 セレクトボックスを 必須項目にする属性です。

<select required="required">
属性値
"required"： 必須項目にする
利用できるバージョン（HTML4.01以降）
HTML5 〜
使用例
<select name="jobs" required="required">
  <option value="">-- 選択して下さい --</option>
  <option value="WEBディレクター">WEBディレクター</option>
  <option value="WEBデザイナー">WEBデザイナー</option>
  <option value="WEBプログラマー">WEBプログラマー</option>
  <option value="フロントエンドエンジニア">フロントエンドエンジニア</option>
</select>
<p><input type="submit" value="送信"></p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

form属性 HTML5で追加

form（フォーム）属性は、 <select>要素を、<form>要素の中に配置したかった場合に、関連する<form>要素を指定する属性です。 <select>要素を、<form>要素の中に配置したかった場合は必ず必要な属性で、属性値には<form>要素に指定した、id属性の値を指定します。

<select from="関連するform要素のid名">
属性値
<form>要素に指定した、id属性の属性値
利用できるバージョン（HTML4.01以降）
HTML5 〜
使用例
<form id="contact_form">
  <p><input type="submit" value="送信"></p>
</form>
<select name="jobs" form="contact_form">
  <option value="WEBディレクター">WEBディレクター</option>
  <option value="WEBデザイナー">WEBデザイナー</option>
  <option value="WEBプログラマー">WEBプログラマー</option>
  <option value="フロントエンドエンジニア">フロントエンドエンジニア</option>
</select>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

multiple属性

multiple（マルチプル）属性は、 <select>要素の選択肢を、複数選択可能にする属性です。 複数選択する場合は、 Ctrl （Macの場合：command ） または、Shiftを押しながら選択します。なお、このmultiple属性を指定すると、リスト形式のメニューになります。 

<select multiple="multiple">
属性値
"multiple"：複数選択を可能にする
利用できるバージョン（HTML4.01以降）
全てのバージョン
使用例
<select name="jobs" multiple="multiple">
  <option value="WEBディレクター">WEBディレクター</option>
  <option value="WEBデザイナー">WEBデザイナー</option>
  <option value="WEBプログラマー">WEBプログラマー</option>
  <option value="フロントエンドエンジニア">フロントエンドエンジニア</option>
</select>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

size属性

size（サイズ）属性は、 <select>要素の選択肢が、リスト形式で表示する場合に、1度に見えるリストの行数を指定する属性です。 この属性を省略した場合は、初期値の "1" となりプルダウン型のメニューとして表示します。"2" 以上の値を指定するとリスト形式のメニューとなり、指定した値が表示される行数になります。 

<select size="1度に見えるリストの行数">
属性値
1度に見えるリストの行数
利用できるバージョン（HTML4.01以降）
全てのバージョン
使用例
<select name="jobs" size="3">
  <option value="WEBディレクター">WEBディレクター</option>
  <option value="WEBデザイナー">WEBデザイナー</option>
  <option value="WEBプログラマー">WEBプログラマー</option>
  <option value="フロントエンドエンジニア">フロントエンドエンジニア</option>
</select>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

select要素のサンプル

都道府県のセレクトボックス

都道府県のセレクトボックスの例
<form action="" method="post">
  <dl>
    <dt><label for="prefs">都道府県</label></dt>
    <dd>
      <select name="prefs" id="prefs">
        <option value="">-- 都道府県を選択して下さい --</option>
        <option value="北海道">北海道</option>
        <option value="青森県">青森県</option>
        <option value="岩手県">岩手県</option>
        <option value="宮城県">宮城県</option>
        <option value="秋田県">秋田県</option>
        <option value="山形県">山形県</option>
        <option value="福島県">福島県</option>
        <option value="茨城県">茨城県</option>
        <option value="栃木県">栃木県</option>
        <option value="群馬県">群馬県</option>
        <option value="埼玉県">埼玉県</option>
        <option value="千葉県">千葉県</option>
        <option value="東京都">東京都</option>
        <option value="神奈川県">神奈川県</option>
        <option value="新潟県">新潟県</option>
        <option value="富山県">富山県</option>
        <option value="石川県">石川県</option>
        <option value="福井県">福井県</option>
        <option value="山梨県">山梨県</option>
        <option value="長野県">長野県</option>
        <option value="岐阜県">岐阜県</option>
        <option value="静岡県">静岡県</option>
        <option value="愛知県">愛知県</option>
        <option value="三重県">三重県</option>
        <option value="滋賀県">滋賀県</option>
        <option value="京都府">京都府</option>
        <option value="大阪府">大阪府</option>
        <option value="兵庫県">兵庫県</option>
        <option value="奈良県">奈良県</option>
        <option value="和歌山県">和歌山県</option>
        <option value="鳥取県">鳥取県</option>
        <option value="島根県">島根県</option>
        <option value="岡山県">岡山県</option>
        <option value="広島県">広島県</option>
        <option value="山口県">山口県</option>
        <option value="徳島県">徳島県</option>
        <option value="香川県">香川県</option>
        <option value="愛媛県">愛媛県</option>
        <option value="高知県">高知県</option>
        <option value="福岡県">福岡県</option>
        <option value="佐賀県">佐賀県</option>
        <option value="長崎県">長崎県</option>
        <option value="熊本県">熊本県</option>
        <option value="大分県">大分県</option>
        <option value="宮崎県">宮崎県</option>
        <option value="鹿児島県">鹿児島県</option>
        <option value="沖縄県">沖縄県</option>
      </select>
    </dd>
  </dl>
  <p><input type="submit" value="送信"></p>
</form>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

エリアごとの都道府県セレクトボックス

エリアごとの都道府県セレクトボックスの例
<form action="" method="post">
  <dl>
    <dt><label for="prefs">都道府県</label></dt>
    <dd>
      <select name="prefs" id="prefs">
        <option value="">-- 都道府県を選択して下さい --</option>
        <optgroup label="北海道エリア">
          <option value="北海道">北海道</option>
        </optgroup>
        <optgroup label="東北エリア">
          <option value="青森県">青森県</option>
          <option value="岩手県">岩手県</option>
          <option value="宮城県">宮城県</option>
          <option value="秋田県">秋田県</option>
          <option value="山形県">山形県</option>
          <option value="福島県">福島県</option>
        </optgroup>
        <optgroup label="関東エリア">
          <option value="茨城県">茨城県</option>
          <option value="栃木県">栃木県</option>
          <option value="群馬県">群馬県</option>
          <option value="埼玉県">埼玉県</option>
          <option value="千葉県">千葉県</option>
          <option value="東京都">東京都</option>
          <option value="神奈川県">神奈川県</option>
        </optgroup>
        <optgroup label="中部エリア">
          <option value="新潟県">新潟県</option>
          <option value="富山県">富山県</option>
          <option value="石川県">石川県</option>
          <option value="福井県">福井県</option>
          <option value="山梨県">山梨県</option>
          <option value="長野県">長野県</option>
          <option value="岐阜県">岐阜県</option>
          <option value="静岡県">静岡県</option>
          <option value="愛知県">愛知県</option>
        </optgroup>
        <optgroup label="近畿エリア">
          <option value="三重県">三重県</option>
          <option value="滋賀県">滋賀県</option>
          <option value="京都府">京都府</option>
          <option value="大阪府">大阪府</option>
          <option value="兵庫県">兵庫県</option>
          <option value="奈良県">奈良県</option>
          <option value="和歌山県">和歌山県</option>
        </optgroup>
        <optgroup label="中国エリア">
          <option value="鳥取県">鳥取県</option>
          <option value="島根県">島根県</option>
          <option value="岡山県">岡山県</option>
          <option value="広島県">広島県</option>
          <option value="山口県">山口県</option>
        </optgroup>
        <optgroup label="四国エリア">
          <option value="徳島県">徳島県</option>
          <option value="香川県">香川県</option>
          <option value="愛媛県">愛媛県</option>
          <option value="高知県">高知県</option>
        </optgroup>
        <optgroup label="九州エリア">
          <option value="福岡県">福岡県</option>
          <option value="佐賀県">佐賀県</option>
          <option value="長崎県">長崎県</option>
          <option value="熊本県">熊本県</option>
          <option value="大分県">大分県</option>
          <option value="宮崎県">宮崎県</option>
          <option value="鹿児島県">鹿児島県</option>
          <option value="沖縄県">沖縄県</option>
        </optgroup>
      </select>
    </dd>
  </dl>
  <p><input type="submit" value="送信"></p>
</form>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

仕様

HTML5.1
4.10.7. The select element
HTML5
4.10.7 The select element
HTML4.01
17.6 The SELECT, OPTGROUP, and OPTION elements

関連する要素

関連するレッスン