JavaScript でボタンを並べる



JavaScript でボタンを並べて、選択された数の画像を PHP で表示します。
ボタンのクリックで石の画像を表示します。

プログラムの説明

  1. このページ(formbutton.html)のボタンを並べる先頭部分のソースコードです。
    utf-8 でタイプしていますが、shift-jis でも動くはずです。
    JavaScript で Form にボタンを並べます。
    <script type="text/javascript"> から </script> が JavaScript の記述です。
    ボタンのクリックで action= で設定された img.php を呼び出します。
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="php.css" type="text/css">
    <title>forn button</title>
    </head>
    
    <body>
    <h1>Form にボタンを並べる</h1>
    JavaScript で Form にボタンを並べます。<br>
    ボタンのクリックで石の画像を表示します。<br>
    <form action="img.php" 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.php です。
    shift-jis でタイプして、サーバーにアップロードして下さい。
    パラメータで渡されたボタン(石の数)を取得して jewel.gif を並べます。
    <?php
    $n= $_GET['val'];
    for($i=0; $i<$n; $i++)
    {   print "<img src=\"img/jewel.gif\">\r\n";
    }
    ?>
    
  3. PHP はサーバーサイドスクリプト(SSL)ですが、JavaScript はクライアントサイドスクリプト(CSL)です。
    JavaScript はマウスやキーボードの操作などを担当するのに対して、PHP はサーバーサイドで複数ユーザーの管理や情報の交換などを担当します。
    img.php が動くか否かは WWW サーバーの問題ですが、JavaScript が動くか否かは IE や Netscape など使用する WWW ブラウザに依存します。
    JavaScript のプログラムは JavaScript を参照して下さい。
    Perl でも同様のプログラム Form にボタンを並べる を作成しています。

前田稔の超初心者のプログラム入門
PHP Program