HTML活用講座第6回、HTML活用講座(6)です。

HTML活用講座は、HTMLとCSSの連携講座です。
基礎講座で築いた知識に加えて、知識の幅を広げていきましょう。

今回から、CGIの編集作業を始めます、CGI＆CSSの編集にはTeraPadを使用しますので、
まだインストールがお済みでない場合、出来るだけ、TeraPadをインストール下さい。

教材をご希望の方は、圧縮ファイルを用意しました。
教材DownLoad ここに、教材を置いてありますから、ダウンロードして下さい。

HTML活用講座．第６回

今回からは、フレーム機能を紹介していきます。
作成方法は、後回しで、まず、実験してみてください。

左と、右はCGIへの転送方法に違いがあるんですが、何処が違うのかも、後で説明いたします。

違いに気付きましたか？
では、説明に入りますが、時々送信を試しながら確認してくださいね。

<H5>● フォームから’GET’で呼び出す</H5>
<FORM action="cgi/kouza6.cgi" method="get">
<P>お名前：<INPUT type="text" name="namae" value="活用講座" size="20">　HNもOKです</P>
<P>OS： <INPUT type="radio" name="OS" value="win"checked="checked"> Windows
<INPUT type="radio" name="OS" value="mac">Machintosh
<INPUT type="radio" name="OS" value="unix"> Unix</P>
 <P><INPUT type="submit" name="submit"value="送信"></P>
</FORM>

こちらが、左側、FORM actionは、呼び出すCGI名と、転送方法（get）を指定しています。
getは、環境変数で、読み出せる転送方法です。
QUERY_STRING = [ namae=%91%BE%98Y&OS=win&submit=%91%97%90M ]
REQUEST_METHOD = [ GET ]
先ほどの、CGIページの環境変数が、この様になっているはずです。

<H5>● フォームから’POST’で呼び出す</H5>
<FORM action="cgi/kouza6.cgi" method="post">
<P>お名前：<INPUT type="text name="namae" value="活用講座" size="20">　HNもOKです</P>
<P>OS： <INPUT type="radio"name="OS" value="win" checked="checked">Windows
<INPUT type="radio" name="OS" value="mac">Machintosh
<INPUT type="radio" name="OS" value="unix"> Unix</P>
<P><INPUT type="submit" name="submit" value="送信"></P>
</FORM>

こちらが、右側、FORM actionは、呼び出すCGI名と、転送方法（post）を指定しています。
POSTは、標準入力で、読み出せる転送方法です。
QUERY_STRING = [ ]
REQUEST_METHOD = [ POST ]
先ほどの、CGIページの環境変数が、この様になっているはずです。

この様に、2種類ある転送方法を、切り分けて、処理を分岐するのが普通の処理ですが、
便利な機能が有り、共通の方法で読み出す事が、できるんです。

こちらは、CGIをPerlで書いたもの、

4行目にある、「cgi-lib.pl」が、便利なライブラリー、無料で配布されている物で、

7行目、8行目で、入力変換して取り込めるんです。

ここは、深く考えずにこういうものと覚える方が良いようです。

さらに、もう1つ、5行目の「jcode.pl」です、
こちらは、日本語Codeを変換してくれます。

29行目、30行目で、先ほどの一括取り込みから、
名前とOSに、入力を分割し、

更に、32行目で、日本語Codeを変更して、

34行目、35行目で、実際に表示するわけですね。

環境変数の表示部分は、こんな具合、

ご参考までに。

CGIは、Perlで書くのが標準のようで、小生もPerlで書いてます。

この文書が、Perlということですが、詳しい事は、CGI活用講座に譲り、この講座では、HTMLでの表示に拘り、

次回は、もう少し表示を見やすくします。

HTML活用講座第６回、終了です。