Form にボタンを並べる

Java Script で Form にボタンを並べます。
ボタンのクリックで石の画像を表示します。

プログラムの説明

  1. Java Script で Form にボタンを並べます。
    このページ(formbutton.html)は utf-8 でタイプしていますが、shift-jis でも動くはずです。
    <script type="text/javascript"> から </script> が Java Script の記述です。
    ボタンのクリックで action= で設定された img.cgi を呼び出します。
    <form action="img.cgi" method="get">
    <script type="text/javascript">
        for(i=1; i<8; i++)
        {   document.write('<input type=radio name="val" value=',i,'>',i,' 個<br>');
        }
    </script>
    <input type="submit" value="送信">
    </form>
    
  2. Form から呼び出されて、石の画像を表示する img.cgi です。
    パラメータで渡されたボタン(石の数)を取得して jewel.gif を並べます。
    Form のデータは、環境変数 'QUERY_STRING' に格納して CGI に渡されます。
    「キー = 値」を '=' で切り分けて連想配列($para)に格納します。
        ($key, $val) = split('=',@s[$i]);
        $para {$key} = $val;
    
    name="val" をキーとしてクリックされた個数を $n に取得して $n の数だけ jewel.gif を並べます。
    $n= $para{'val'};
    
    パラメータの取得は パラメータ文字列 を参照して下さい。
    shift-jis でタイプして、サーバーにアップロードして実行権を設定して下さい。
    #!/usr/local/bin/perl
    print "Content-type: text/html\n\n";
    
    $str = $ENV{QUERY_STRING};
    @s = split('&',$str);
    foreach $i(0 .. $#s)
    {
        ($key, $val) = split('=',@s[$i]);
        $para {$key} = $val;
    }
    $n= $para{'val'};
    for($i=0; $i<$n; $i++)
    {   print "<img src=\"img/jewel.gif\">\r\n";
    }
    
  3. img.cgi が動くか否かは WWW サーバーの問題ですが、Java Script が動くか否かは IE や Netscape など使用する WWW ブラウザに依存します。
    Java Script のプログラムは Java Script を参照して下さい。
    PHP でも同様のプログラム Form にボタンを並べる を作成しています。

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(Perl)