form（フォーム）からのデータ送信

ここでは、form要素を使用した単純なデータ送信と受信、および条件分岐による 異なった処理などを演習します。比較的、単純な仕組みですので、習得しやすい と思います。

form要素の基本

CGI (Common Gateway Interface) を使用する場合には、HTMLで使用され るform要素（タグ）は必要不可欠なもので、このform要素を送信側 のWebページ中に使用します。

form要素の基本は下記の通りです。

送信方法には、postまたは getが使われます。 また、 送信先には、処理を記述したファイル （Perlなどで記述したCGIスクリプト）を明記します。

GETとPOSTの違い：

※1の例：
URL http://www.hoge.com/sample.jsp?name=Yamada&age=30

※2の例：
URL http://www.hoge.com/sample.jsp
データ部分（標準入力として送られる） name=Yamada&age=30

下記に、form要素の使用例を示します。

form要素の使用例： post形式で、birth.jspにデータを送信する命令
プルダウン形式のコンボボックスで1から12までの数字を選ばせて、送信させる 内容

<form method="post" action="birth.jsp">

<select name="birthMonth">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
</select>

<input type="submit" value="送信" />

</form>

上記では、selectという要素を利用してプルダウン形式のコンボボックスを 表示させていましたが、他にもいくつかの形式があり、目的に応じて使い分けら れています。

• コンボボックス（1つだけ選択）

  使用例：

  <select name="birthMonth">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  

  Webブラウザ上での表示：

  1 2 3
• ラジオボタン（1つだけ選択）

  使用例：あらかじめ「3年生」にチェックをつけるように設定

  <input type="radio" name="grade" value="1" />1年生
  <input type="radio" name="grade" value="2" />2年生
  <input type="radio" name="grade" value="3" checked="checked" />3年生
  <input type="radio" name="grade" value="4" />4年生
  <input type="radio" name="grade" value="0" />それ以外

  Webブラウザ上での表示：

  1年生 2年生 3年生 4年生 それ以外
• チェックボックス（複数回答可能）

  使用例：あらかじめ「自然環境コース」にチェックをつけるように設定

  <input type="checkbox" name="soft" value="1" />ソフトウェアコース
  <input type="checkbox" name="natural" value="1" checked="checked"/>
  自然環境コース
  <input type="checkbox" name="business" value="1" />ビジネス環境コース
  

  Webブラウザ上での表示：

  ソフトウェアコース 自然 環境コース ビジネス環境コース
• テキストボックス：比較的短い文章の送信

  使用例：最大入力長を示すmaxlength属性はなくても支障はない

  <input type="text" size="5" maxlength="4" name="id" />

  Webブラウザ上での表示：
• パスワードボックス：入力された文字の隠蔽

  使用例：

  <input type="password" size="5" maxlength="4" name="id" />

  Webブラウザ上での表示：
• テキストエリア：比較的長い文章の送信

  使用例：

  <textarea name="comment" rows="5" cols="50">
  </textarea>

  Webブラウザ上での表示：