フォームは、ＨＰを閲覧しているユーザーに対してアンケートのような情報を得るための機能です。また、ＨＰを作ってみたい方の中にフォームを置きたい方も多いことでしょう。ＨＰを、よりインタラクティブなものとする上でマスターしておきたい機能です。フォームには、以下の六つの形式があります。

  • 一行テキストボックス
  • 複数行テキストボックス
  • ラジオボタン
  • チェックボックス
  • プルダウン型選択メニュー
  • フィールド表示型選択メニュー
【構文１７】
一番シンプルなフォームは一行テキストボックスです。これは主にアンケートの中で、メールアドレスや名前のような固有の情報を得る際に用います。
    <FORM>
    <INPUT SIZE="20" NAME="mail address">
    </FORM>
テキストボックスのサイズは <INPUT SIZE="整数"> で好きな大きさに指定できます。上の例はメールアドレス情報取得のフォームと仮定していますが NAME="mail address" は、情報を受け取った時に、他の設問と識別するためのキーワードです。

【構文１８】
より多くの情報を得るためには、一行テキストボックスではユーザーはとても書きづらく、ユーザーフレンドリーではありません。そのような時には複数行テキストボックスを使用します。
    <FORM>
    <TEXTAREA ROWS="5" COLS="20" NAME="comment">
    </TEXTAREA>
    </FORM>
<TEXTAREA ROWS="整数" COLS="整数"> の設定により、複数行の入力ができるテキストボッスクにします。複数行に亘るコメントのような情報を得る際に用います。

【構文１９】
ラジオボタンは、三択、四択といった選択肢が少ない項目について便利です。このラジオボタンで選択できる項目は一つだけです。複数選択を必要とする場合は、次のチェックボックスを使用します。

    あなたが生まれた元号は？
    明治
    大正
    昭和
    平成
    あなたが生まれた元号は？<BR>
    <FORM>
    <INPUT type="radio" NAME="year">明治<BR>
    <INPUT type="radio" NAME="year">大正<BR>
    <INPUT type="radio" NAME="year">昭和<BR>
    <INPUT type="radio" NAME="year">平成<BR>
    </FORM>

【構文２０】

ラジオボタンは複数選択はできませんが、チェックボックスは複数選択ができます。
    あなたが持っているものは？
    パソコン
    スキャナー
    デジカメ
    ＣＤ−ＲＷ
    プリンター
    あなたが持っているものは？<BR>
    <FORM>
    <INPUT type="checkbox" NAME="mochimono">パソコン<BR>
    <INPUT type="checkbox" NAME="mochimono">スキャナー<BR>
    <INPUT type="checkbox" NAME="mochimono">デジカメ<BR>
    <INPUT type="checkbox" NAME="mochimono">ＣＤ−ＲＷ<BR>
    <INPUT type="checkbox" NAME="mochimono">プリンター<BR>
    </FORM>

【構文２１】
次にプルダウン型選択メニューの説明をします。プルダウン型選択メニューは、小さな領域で多くの項目が表示できるメリットがあり、実用的です。
    <FORM>
    <SELECT NAME="age">
    <OPTION SELECTED>年齢は？
    <OPTION VALUE="over90">９０歳以上
    <OPTION VALUE="80-89">８０歳〜８９歳
    <OPTION VALUE="70-79">７０歳〜７９歳
    <OPTION VALUE="60-69">６０歳〜６９歳
    <OPTION VALUE="50-59">５０歳〜５９歳
    <OPTION VALUE="40-49">４０歳〜４９歳
    <OPTION VALUE="30-39">３０歳〜３９歳
    <OPTION VALUE="20-29">２０歳〜２９歳
    <OPTION VALUE="10-19">１０歳〜１９歳
    <OPTION VALUE="under10">１０歳未満
    </SELECT>
    </FORM>

【構文２２】
次にフィールド表示型選択メニューの説明をします。フィールド表示型選択メニューは、一覧で内容が確認できるのがメリットで比較的小さな領域で表示できるところがメリットです。
    お住まいは？
    お住まいは？
    <FORM>
    <SELECT SIZE="9" NAME="age">
    <OPTION VALUE="hokkaido">北海道
    <OPTION VALUE="tohoku">東北
    <OPTION VALUE="kanto">関東
    <OPTION VALUE="chubu">中部
    <OPTION VALUE="kinki">近畿
    <OPTION VALUE="chugoku">中国
    <OPTION VALUE="shikoku">四国
    <OPTION VALUE="kushu">九州
    <OPTION VALUE="okinawa">沖縄
    </SELECT>
    </FORM>
<SELECT SIZE="行数">で表示する行数を定義します。

【構文２３】
上記のフォームで入力した情報を受け取るには、以下の構文を必ず使わなければなりません。

    <FORM ACTION="プロバイダー指定のＣＧＩが置いてあるＵＲＬ または 送信したいメールアドレス" METHOD="POST">

【構文２４】
また【構文２３】と同様に、送信ボタンはフォームには必須です。必ず【構文２３】と組み合せて使います。選択式のフォームの場合には[例６]のボタンを、記述式のフォームの場合には[例７]のように、内容を消去するボタンを置くのことが一般的です。 mailto タグを使うのも良いですが、大抵の場合、プロバイダーがＣＧＩを用意していますので、それを利用することをお勧めします。
    [例１６]
    【構文２１】を基にした送信フォーム


    [例１６]
    <FORM ACTION="プロバイダー指定のＣＧＩが置いてあるＵＲＬ または mailto:送信したいメールアドレス" METHOD="POST">
    <SELECT NAME="age">
    <OPTION SELECTED>年齢は？
    <OPTION VALUE="over90">９０歳以上
    <OPTION VALUE="80-89">８０歳〜８９歳
    <OPTION VALUE="70-79">７０歳〜７９歳
    <OPTION VALUE="60-69">６０歳〜６９歳
    <OPTION VALUE="50-59">５０歳〜５９歳
    <OPTION VALUE="40-49">４０歳〜４９歳
    <OPTION VALUE="30-39">３０歳〜３９歳
    <OPTION VALUE="20-29">２０歳〜２９歳
    <OPTION VALUE="10-19">１０歳〜１９歳
    <OPTION VALUE="under10">１０歳未満
    </SELECT>
    <BR>
    <INPUT type="submit" VALUE="送信">
    </FORM>
    [例１７]
    【構文１８】を基にした送信フォーム


    [例１７]
    <FORM ACTION="プロバイダー指定のＣＧＩが置いてあるＵＲＬ または mailto:送信したいメールアドレス" METHOD="POST">
    <TEXTAREA ROWS="5" COLS="20" NAME="comment">
    </TEXTAREA>
    <BR>
    <INPUT type="submit" VALUE="送信"><INPUT type="reset" VALUE="消去">
    </FORM>