<SELECT>

<SELECT>　〜　</SELECT>

• セレクトボックスを作成する。
• 必ず <FORM>〜</FORM> 内で使用する。（そうしないと表示されないブラウザがある）
• それぞれの選択肢は、<OPTION> で設定する。
• 選択肢をグループ化するのには、<OPTGROUP> を使う。（IE6.0 〜　NN6.0 〜）

タグの形式

• 省略不可　（　開始タグ　：　必須　/　終了タグ　：　必須　）

<SELECT>〜</SELECT>の中で使える要素

• <OPTGROUP>
• <OPTION>

size="数字"

• 画面に一度に表示する選択肢の行数を指定する。
  • 何も指定しないときは１。　（デフォルト。プルダウン式メニューとなる。）
  • ２以上の数を指定するとリストボックスとなる。
  • 指定した数より選択肢がそれ以上多いときはスクロール式リストボックスとなる。

multiple

• 複数選択を許可する。（指定しないときはひとつしか選択できない）
• Windowsは、【Ctrl】キーや 【Shift】キーを押しながらマウスでクリックすると複数選択できる。

name="名前"

• 名前を指定。

tabindex="数字"

• Tabキーを押した際のフォーカス移動順を指定。

disabled

• 無効。選択できないように指定。

• class="クラス"
• style="スタイルシート"
• dir="文字の表記方向"
• id="ID"
• lang="言語コード"
• title="タイトル"

HTMLソース

<FORM action="cgi-bin/xxx.cgi" method="post">

血液型：
<SELECT name="blood">
<OPTION value="A">A型</OPTION>
<OPTION value="B">B型</OPTION>
<OPTION value="O">O型</OPTION>
<OPTION value="AB">AB型</OPTION>
</SELECT><BR><BR>

好きな果物<BR>
<SELECT name="blood" size="9" multiple>
<OPTION value="F1">りんご</OPTION>
<OPTION value="F2">みかん</OPTION>
<OPTION value="F3">バナナ</OPTION>
<OPTION value="F4">いちご</OPTION>
<OPTION value="F5">キウイ</OPTION>
<OPTION value="F6">ドリアン</OPTION>
<OPTION value="F7">オレンジ</OPTION>
<OPTION value="F8">ブルーベリー</OPTION>
<OPTION value="F9">パイナップル</OPTION>
</SELECT><BR><BR>

<INPUT type="submit" value="送信">

</FORM>

解説

• 「血液型」のほうはプルダウン式選択でひとつしか選べない。
  「好きな果物」のほうはリストボックスになっており、また複数選ぶことが可能になっている。
  用途にあわせて使い分けるとよい。
• フォームとして使う以外にもいろいろ使われているようである。
  • JavaScriptなどで、プルダウン式のリンクなどをつくることもできる。
    （スペースが少なくてすむ。選択した瞬間ジャンプするようにもできる。）
  • このセレクトボックスを更新履歴などに使っている人もいる。（やっぱり省スペースだから？）