Section 11 : フォーム・その3

 <INPUT> のほかにもフォームを構成する要素はある。これらを紹介しよう。


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

 選択肢から1つあるいは複数をリストの中から選択するものである。これは箇条書き <UL>〜<LI>〜</UL> とのアナロジーで考えてもらうとわかりやすい。

 まず,<UL>〜</UL> にあたるのは,

<SELECT>〜</SELECT>

である。ただし,フォームの要素である以上,<UL> よりも属性は複雑である。

NAME="..."リストボックスにつける一意な名前。必須
SIZE=...リストの大きさ。この値に比べて項目数が多いとスクロールバーがつく。省略時または SIZE=1 のときドロップダウンリストの体裁をとることが多い。
MULTIPLE複数選択を許可する。

この中に書く「項目」,つまり <LI> にあたるのは,

<OPTION>〜</OPTION>

で,</OPTION> は </LI> のように省略できる。この属性は,

SELECTEDその項目を選択済みにする。
VALUE="..."その項目が選択されているときにサーバに渡す値。省略時は項目そのものになる。

となっている。だが,「項目」はタグを用いて記述しない

 例をあげておこう。

&lt;INPUT&gt; で指定できるフォームの要素
<FORM>
<SELECT NAME="sample" SIZE=5>
<OPTION SELECTED>text
<OPTION>password
<OPTION>checkbox
<OPTION>radio
<OPTION>submit
<OPTION>reset
<OPTION>file
<OPTION>hidden
<OPTION>image
</SELECT>
</FORM>

 動作を確かめてみよう。また,自分でリストボックスを作り,属性をいろいろ変えてみよう。

<INPUT> で指定できるフォームの要素

複数行入力のテキストボックス

 <INPUT TYPE="text"> は1行の入力のみが可能だったが,次の要素は複数行の入力を可能にする。

<TEXTAREA NAME="..." COLS=... ROWS=...>〜</TEXTAREA>

3つの属性はすべて必須である。COLS 属性はテキストボックスの桁数を,ROWS 属性は行数を指定する。
 <TEXTAREA>〜</TEXTAREA> 内に書かれた文字(タグは使えない:<PRE> のような書き方になる)が,あらかじめ書き込まれている文字列になる。

たとえば,COLS=60 ROWS=5 の TEXTAREA は

となる。


 以上が <FORM> の中に書いてサーバに送る(あるいはスクリプトで処理される)データを書き込むフォームの要素である。これを利用したインタラクティブなサイトを構築するには CGI やスクリプティングの知識が不可欠である。
 かといってここで CGI を勉強してください,というのも酷なので次の Section できわめて簡単な応用例を紹介する。


解決! センター化学 I
解決! センター化学 I ◆ Z 会出版

Next : フォーム・その4 − 簡単な応用
Prev : フォーム・その2
Up : 目次