Section 13 : フォームの基礎(5)

 フォームコントロールは <INPUT> 以外にもある。まずは,リストからの選択。

リストボックス,ドロップダウンリスト

 複数の選択肢からひとつあるいは複数を選択するリストボックスまたはドロップダウンリストを生成するのが,

<SELECT>...</SELECT>

である。内容としては <OPTGROUP> または <OPTION> をとり,空ではいけない。構造としては,箇条書きをイメージしてもらうとよいだろう。

 まずは,属性を見ておく。

<SELECT> の属性
属性 解説
NAME 文字列 コントロールに与える,フォーム中で一意を保証された名前。
SIZE 数値 コントロールがリストボックスとして表示されるとき,その行数を指定する。
MULTIPLE ブール値 複数選択を許可する。
onFocus スクリプト コントロールがフォーカスを得たときに実行されるスクリプト。
onBlur スクリプト コントロールがフォーカスを失ったときに実行されるスクリプト。
onChange スクリプト コントロールの内容が変わったときに実行されるスクリプト。

この <SELECT>...</SELECT> は,<UL>...</UL> のように考えていただきたい。すると,<LI> にあたるのは,

<OPTION>...</OPTION>

である。内容は文字データで,タグを用いたマークアップは許されない(文字参照は構わない)。</OPTION> は省略してもよい。

 <LI> に似ているとはいうものの,フォームの要素だけに属性が指定される。

<OPTION> の属性
属性 解説
SELECTED ブール値 その項目をあらかじめ選択済みにする。
VALUE 文字列 選択されたときにフォームデータとして渡される値の初期値を指定する(i.e. スクリプトなどで変化しうる)。省略値はその <OPTION> の内容。
LABEL 文字列 選択時に冗長にならないための短いラベル。

SELECTED 属性は,<SELECT> で MULTIPLE 属性が指定されていれば複数,指定されていなければただ 1 つの項目に対して指定しうる。

 これだけでもコントロールは成立するが,項目が多いときなどはいくつかをグループ化しておくのに

<OPTGROUP>...</OPTGROUP>

を用いるのが有用である。その内容は <OPTION>,空ではいけない。</OPTGROUP> は省略可能。

<OPTGROUP> の属性
属性 解説
LABEL 文字列 その項目グループの表題。必須。

 どのようになるかは見ていただくのが早い。

<P>Choose your favorite tutorial :<BR>
  <SELECT NAME="achtml">
    <OPTGROUP LABEL="Academic HTML Classic">
      <OPTION VALUE="oth" LABEL="The overture to HTML">Classic - The overture to HTML
      <OPTION VALUE="soh" LABEL="The serenade of HTML">Classic - The serenade of HTML
    </OPTGROUP>
    <OPTGROUP LABEL="Academic HTML 3.2">
      <OPTION VALUE="wth" LABEL="Welcome to HTML">3.2 - Welcome to HTML
      <OPTION VALUE="lbh" LABEL="Let's begin HTML">3.2 - Let's begin HTML
      <OPTION VALUE="lth" LABEL="Let's try HTML">3.2 - Let's try to HTML
      <OPTION VALUE="hsh" LABEL="Hop step HTML">3.2 - Hop step HTML
      <OPTION VALUE="mah" LABEL="More about HTML">3.2 - More about HTML
    </OPTGROUP>
    <OPTION VALUE="pth">Passport to HTML 4.0
  </SELECT>
</P>

Choose your favorite tutorial :

 一般に,項目は <OPTGROUP><OPTION> と階層化される。選択時には LABEL 属性の値が,選択後には <OPTION> の内容が表示されることが期待される。

 IE3/4/5/5.5,NN4  <OPTGROUP> はサポートされない(無視される)。