<SELECT>セレクトボックス(プルダウン)を作る

クリックするとプルダウンして、項目の一覧が表示されるセレクトボックスを作るには、置換要素である<SELECT>と<OPTION>を使います。

個々の選択肢は<OPTION>タグで指定し、セレクトボックス(プルダウンメニュー)全体を<SELECT>~</SELECT>で囲みます。 <OPTION>~</OPTION>内に記述するテキストがそれぞれのメニューに表示される項目となります。

またこのようにして作成されたセレクトボックスは、一般的にはプルダウンメニューとして表示されますが、size属性などを利用する事で、選択肢の表示行数などが指定できます。 さらに<SELECT>は、<FORM>の部品以外にもユーザーインターフェースとしても使用することができます。

なおname属性で付けた値は、フォームのデータが送信される際に、その値とデータとがセットになって送られてきます。 この場合のデータとは、<OPTION>タグ内の項目、または選択された項目のvalue属性の値となります。 value属性については<OPTION>タグのページに記載していますので、詳しくはそちらをご覧ください。

使用した時の例

<p>あなたの好きな漫画は?<br />
<select name="book">
  <option>ナルト</option>
  <option>進撃の巨人</option>
  <option>ワンピース</option>
  <option>こち亀</option>
  <option>烈火の炎</option>
</select>
</p>

ブラウザ上の表示例

あなたの好きな漫画は?

書式

  • <select name="名前">~</select> ・・・・・・ プルダウンのセレクトボックスを作成

属性

name="任意の名前" セレクトボックスの名前を指定する
disabled セレクトボックスを無効にし、入力できないようにする
multiple 複数行の選択を可能にする。(Shiftctrlなどと一緒にクリックする事で複数選択が可能、ただしwindowsの場合)
size="" 画面に表示する選択肢の行数を指定する
align="" セレクトボックスの表示位置を指定する

対応ブラウザなどのデータ

形式 <select>~</select> 分類 インライン要素
親要素 子要素にフレージングコンテンツを含める要素 子要素 option / optgroup / template / script
開始タグ 必須 終了タグ 必須
カテゴリ フローコンテンツ / フレージングコンテンツ / パルパブルコンテンツ / インタラクティブコンテンツ / リステッド / ラベラブル / リセッタブル / サブミッタブル / リアソシエイタブル / フォーム関連
汎用属性 accesskey / class / dir / id / lang / style / tabindex / title
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~